Laravel集成FullCalendar按日展示可用/已订客房问题咨询

基于Laravel框架与FullCalendar开发酒店客房预订系统，初始实现逻辑为传递两个独立JSON对象，用不同颜色区分展示全量客房、已预订客房两类日历事件。现需要调整展示效果：取消全时段全量客房叠加已订房的展示形式，仅按日期维度展示每日对应的可用客房与已预订客房。

• 可用房事件逻辑错误：给所有客房统一设置了跨超长时间段的固定起止时间，直接导致页面全时段铺满所有客房条目，和已订房条目叠加
• 前端未做日期维度的状态计算，直接把两类全量事件全量渲染，必然出现重叠展示的问题
• Laravel传参写法不规范：view()辅助函数虽支持第三个数组合并数据，但拆分传参的方式容易出现变量丢失问题

后端控制器修改 #

不再提前生成固定时段的可用房长事件，只需要传递已预订记录、总客房数两个核心数据即可，同时规范视图传参写法，代码如下：

// 整理所有已预订记录
$bookedRecords = Booking::all()->map(function($booking) {
    return [
        'title' => '已预订: ' . $booking->room_number,
        'start' => $booking->checkin_date,
        'end' => $booking->checkout_date,
    ];
})->toArray();

// 统计客房总数量，不需要生成固定时段的可用房事件
$totalRoomCount = tbl_room::count();

// 规范视图传参，所有绑定变量放到同一个数组中
return view('calander.view_calander', [
    'booked_rooms' => $bookedRecords,
    'total_room_count' => $totalRoomCount
]);

前端FullCalendar逻辑修改 #

利用FullCalendar自带的datesSet回调，每次日历渲染、切换日期范围时，自动遍历当前视图内的所有日期，逐天统计当日已预订房间数，计算可用房数量后再生成对应单日事件，从根源避免全时段长事件叠加的问题，代码如下：

<script>
var bookedRooms = @json($booked_rooms);
var totalRoomCount = @json($total_room_count);

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calander');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        // 日历加载/切换日期时自动计算每日房态事件
        datesSet: function(info) {
            // 清空所有旧事件避免重复渲染
            calendar.removeAllEvents();
            // 渲染所有已预订房间事件，标记为绿色
            bookedRooms.forEach(booked => {
                calendar.addEvent({
                    title: booked.title,
                    start: booked.start,
                    end: booked.end,
                    color: 'green'
                })
            })

            // 遍历当前视图显示的所有日期，计算当日可用房
            var currentDate = new Date(info.start);
            var endDate = new Date(info.end);
            while(currentDate < endDate) {
                var dateStr = currentDate.toISOString().split('T')[0];
                // 统计当日已预订房间数，匹配FullCalendar的end日期排他规则
                var bookedCount = bookedRooms.filter(booked => {
                    var checkin = new Date(booked.start);
                    var checkout = new Date(booked.end);
                    var cur = new Date(dateStr);
                    return cur >= checkin && cur < checkout;
                }).length;
                // 计算当日可用房数量
                var availableCount = totalRoomCount - bookedCount;
                // 添加当日可用房事件，标记为棕色
                calendar.addEvent({
                    title: '可用房: ' + availableCount + '间',
                    start: dateStr,
                    allDay: true,
                    color: 'brown'
                })
                // 日期偏移1天继续计算
                currentDate.setDate(currentDate.getDate() + 1);
            }
        }
    });

    calendar.render();
});
</script>

• 每个日期单元格内仅展示两类内容：绿色条目标记当日已预订的客房号，棕色条目标记当日可用客房总数
• 切换月/周/日视图时会自动重新计算对应日期范围的房态，不需要额外刷新
• 不会再出现跨全时段的客房长条叠加效果

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