如何在FullCalendar中加载展示多个JSON数据源的事件？

FullCalendar的events配置项接收事件数组格式的入参，要同时展示多组数据，只需要把多组事件数组合并后传入即可，还支持给不同来源的事件单独配置样式做区分。

前端代码修改 #

直接用JavaScript原生的concat方法合并两组事件数组，若需要区分不同来源的事件，可以在合并前给对应数组的事件项添加独立颜色配置，事件上的颜色配置优先级高于全局eventColor配置。
修改后的初始化代码如下：

<script>
$(document).ready(function(){
    var booking_details  = @json($booking_details);
    var test  = @json($test);
    
    // 给第二组测试事件设置专属蓝色，和第一组默认红色做视觉区分
    test.forEach(event => {
        event.color = '#0099FF';
    })

    $("#calander").fullCalendar({
      // 合并两组事件数组后传入，后续新增数据源继续在concat后追加即可
      events: booking_details.concat(test),
      eventColor: '#FF0000'
    }); 
});
</script>

Laravel后端优化建议 #

当前控制器对同一份Booking数据做了两次重复循环，属于冗余逻辑，可以直接在单次循环内组装多组数据，也可以直接在PHP层合并好所有事件数组再传给前端，减少前端处理逻辑：

$booking_details = [];
$test = [];
$bookings = Booking::all();

foreach ($bookings as $booking) {
    // 组装第一组预订事件
    $booking_details[] = [
       'title' => $booking->room_number,
       'start' => $booking->checkin_date,
       'end' => $booking->checkout_date
    ];

    // 组装第二组测试事件，实际业务中替换为其他数据源的组装逻辑即可
    $test[] = [
       'title' => $booking->room_number,
       'start' => $booking->checkin_date,
       'end' => $booking->checkout_date
    ];
}

// 若不需要区分两组事件样式，可直接在后端合并为单个数组返回，前端直接传该数组即可
// $all_events = array_merge($booking_details, $test);

扩展说明 #

• 后续需要接入第三组及更多事件源时，继续通过concat追加对应数组即可，无数量限制
• 除了颜色配置，还可以给不同来源的事件添加className、textColor、自定义业务属性，实现更灵活的交互和样式定制
• 静态数据场景直接合并数组的方式，比配置多个异步事件源的加载性能更好

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