如何在FullCalendar中从JSON数组按日展示日程及休息日？

我来帮你调整代码，实现在起止日期范围内按日展示对应日程，同时标记休息日的需求。先理清楚核心逻辑：我们需要遍历每一天，判断当天是否属于员工的休息日，然后分别生成对应标题的事件。

修改后的Blade视图代码 #

var emps = {!! $emps !!};
var empsoffdays = {!! $emps_offdays !!};

// 1. 把休息日转换为Set，方便快速判断某一天是否是休息日
const offDayMap = new Set(empsoffdays.map(item => item.offday));

// 2. 获取日程的起止日期
const startDate = new Date(emps[0].start);
const endDate = new Date(emps[0].end);
const oneDayMs = 24 * 60 * 60 * 1000; // 一天的毫秒数

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    // 3. 动态生成每日事件
    events: function(start, end, timezone, callback) {
        const dailyEvents = [];
        
        // 遍历起止日期之间的每一天
        for (let currentTime = startDate.getTime(); currentTime <= endDate.getTime(); currentTime += oneDayMs) {
            const currentDateObj = new Date(currentTime);
            const dayOfWeek = currentDateObj.getDay(); // 0=周日，1=周一...6=周六
            const dateStr = currentDateObj.toISOString().split('T')[0]; // 转成YYYY-MM-DD格式
            
            // 判断当天是否为休息日
            if (offDayMap.has(dayOfWeek)) {
                // 休息日：添加"休息日"全天事件
                dailyEvents.push({
                    title: '休息日',
                    start: dateStr,
                    allDay: true,
                    color: '#f5c6cb' // 可选：给休息日加个背景色区分
                });
            } else {
                // 工作日：添加对应日程标题（可根据需求调整字段，比如timetable_check_in）
                dailyEvents.push({
                    title: emps[0].title || emps[0].timetable_check_in,
                    start: dateStr,
                    // 如果需要展示具体时段，可改成：start: `${dateStr} 09:00`, end: `${dateStr} 18:00`
                    allDay: false
                });
            }
        }
        
        callback(dailyEvents);
    }
});

关键逻辑说明 #

• 休息日快速判断：用Set存储休息日的星期数（比如0=周日、6=周六），判断操作的效率更高，避免循环遍历数组。
• 日期遍历：通过毫秒数累加的方式遍历所有日期，避免直接修改Date对象导致的边界问题（比如月份切换）。
• 事件格式适配：把Date对象转成FullCalendar支持的YYYY-MM-DD字符串格式，确保事件能正确显示在日历上。
• 自定义样式（可选）：给休息日事件添加背景色，让视觉区分更明显。

注意事项 #

1. 确保后端返回的JSON格式正确：你提供的第一个查询JSON末尾有语法错误（最后一个对象未闭合），需要后端修正为标准JSON格式。
2. 如果日程有具体时段（比如上下班时间），可以在start和end字段拼接时间字符串（如${dateStr} 09:00），并设置allDay: false。

内容的提问来源于stack exchange，提问作者fullstack