FullCalendar.io跨日期预订事件如何在所有预订日显示标题

问题说明 #

使用fullCalendar开发酒店预订日历场景下，按入住/离店日期传入的跨天预订事件，默认仅在入住首日显示房间号标题，无法在预订覆盖的所有日期展示房间号。

该现象是FullCalendar默认渲染规则导致：跨多日的全天事件会被渲染为单个连续条带，仅在条带起始位置输出标题文本，不会按日期重复展示。

现有实现代码 #

前端初始化代码

$(document).ready(function(){
    var booking_details  = @json($booking_details);
    $("#calander").fullCalendar({
        events: booking_details,
        eventColor: '#FF0000'
    }); 
});

后端数据组装代码

$booking_details = array();
$bookings = Booking::all();
foreach($bookings as $booking){
    $booking_details[]=[
        'title'=>$booking->room_number,
        'start'=>$booking->checkin_date,
        'end'=>$booking->checkout_date
    ];
}

可选解决方案 #

方案1：后端拆分单日事件（推荐） #

该方案兼容性最好，无需额外调整前端样式，所有视图下渲染效果稳定。

• 实现逻辑：将每个跨N天的预订记录，拆分为N个独立的单日全天事件，每个事件对应预订周期内的1天，日历会在每个日期单元格独立渲染事件块、自动显示房间号。
• 调整后的后端代码：

$booking_details = array();
$bookings = Booking::all();
foreach($bookings as $booking){
    $checkin = new DateTime($booking->checkin_date);
    $checkout = new DateTime($booking->checkout_date);
    // 按天遍历入住到离店的日期区间
    $interval = new DateInterval('P1D');
    $dateRange = new DatePeriod($checkin, $interval, $checkout);
    
    foreach($dateRange as $currentDate){
        $booking_details[]=[
            'title'=>$booking->room_number,
            'start'=>$currentDate->format('Y-m-d'),
            'end'=>$currentDate->modify('+1 day')->format('Y-m-d'), // 符合FullCalendar单日全天事件的end传参规则
            'allDay'=>true
        ];
    }
}

• 方案优势：不需要修改前端渲染逻辑，不存在多端样式适配问题，月视图、周视图下展示效果一致。

方案2：前端渲染回调自定义（无需修改后端） #

如果不想调整后端数据结构，可以通过FullCalendar的渲染回调手动修改事件DOM结构，实现每日展示标题的效果。

• 实现逻辑：事件渲染完成后，隐藏默认的起始位置标题，根据事件跨天数量拆分事件条带，在每个日期对应位置插入房间号文本。
• 调整后的前端代码：

$(document).ready(function(){
    var booking_details  = @json($booking_details);
    $("#calander").fullCalendar({
        events: booking_details,
        eventColor: '#FF0000',
        allDayDefault: true, // 全局标记预订类事件为全天事件
        eventAfterRender: function(event, $el) {
            // 隐藏默认渲染的起始位置标题
            $el.find('.fc-title').hide();
            // 计算事件总跨天数
            const totalDays = Math.round((event.end - event.start) / (1000*60*60*24));
            // 设置事件为弹性布局，均分每天的宽度
            $el.css('display', 'flex');
            // 每个日期段插入独立的房间号文本
            for(let i=0; i<totalDays; i++){
                $el.append(`<span style="flex: 1; text-align: center; padding: 0 2px;">${event.title}</span>`);
            }
        }
    }); 
});

• 注意事项：该方案需要额外适配不同屏幕尺寸、不同视图下的事件样式，避免文本溢出、错位问题，适配成本高于方案1。

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