FullCalendar v5：如何同时加载JSON已有事件与未保存预览背景事件

有两种简单的方法可以实现同时展示数据库中的已有预约和未保存的预览预约：

方法1：使用eventSources配置多数据源 #

FullCalendar的eventSources选项支持同时配置多个事件源（可以是URL、数组或函数），正好满足你的需求。把原来单一的events配置换成eventSources数组，同时包含远程数据源和本地预览事件：

document.addEventListener('DOMContentLoaded', function() {
  var srcCalendarEl = document.getElementById('source-calendar');
  // 定义你的预览事件（可以根据表单输入动态生成）
  var previewEvent = {
    start: '2022-08-03T10:00:00',
    end: '2022-08-03T16:00:00',
    display: 'background',
    title: '新预约预览', // 可选，让预览更清晰
    color: '#ffcccc' // 可选，自定义背景色区分预览
  };

  var srcCalendar = new FullCalendar.Calendar(srcCalendarEl, {
    // 保留你原来的所有配置项...
    headerToolbar: {
        left: '',
        center: 'title',
        right: ''
    },
    editable: false,
    resizable: false,
    dragRevertDuration: 0,
    allDayText: 'Ganztägig',
    axisFormat: 'H:mm',
    navLinks: true,
    eventLimit: false,
    locale: 'de',
    firstDay: 1,
    initialView: 'timeGridDay',
    allDaySlot: false,
    slotMinTime: '07:00:00',
    slotMaxTime: '20:00:00',
    slotDuration: '00:30:00',   
    contentHeight:"auto",
    droppable: false,
    // 替换原来的events为eventSources数组
    eventSources: [
      // 第一个源：数据库中的已有预约
      'events.php?calendar=<?php echo $employeeID; ?>',
      // 第二个源：本地预览事件
      [previewEvent]
    ]
  });
  srcCalendar.render();
});

这种方法适合预览事件固定的场景，初始化时就把所有事件加载完成。

方法2：动态添加/更新预览事件 #

如果你的预览事件需要根据用户输入动态变化（比如用户修改了预约时间），可以先用events加载远程数据，再通过FullCalendar的API动态添加预览事件：

document.addEventListener('DOMContentLoaded', function() {
  var srcCalendarEl = document.getElementById('source-calendar');
  var srcCalendar = new FullCalendar.Calendar(srcCalendarEl, {
    // 保留你原来的所有配置项，包括加载远程事件的配置
    events: 'events.php?calendar=<?php echo $employeeID; ?>',
    // ...其他配置
  });
  srcCalendar.render();

  // 添加预览事件（可以封装成函数，在用户修改表单时调用）
  function updatePreviewEvent(newStart, newEnd) {
    // 先移除旧的预览事件（如果存在）
    var oldPreview = srcCalendar.getEventById('preview-event');
    if (oldPreview) oldPreview.remove();

    // 添加新的预览事件
    srcCalendar.addEvent({
      id: 'preview-event', // 给预览事件加唯一ID，方便后续移除
      start: newStart,
      end: newEnd,
      display: 'background',
      title: '新预约预览',
      color: '#ffcccc'
    });
  }

  // 示例：初始化时添加预览事件
  updatePreviewEvent('2022-08-03T10:00:00', '2022-08-03T16:00:00');

  // 当用户在表单中修改时间时，调用updatePreviewEvent更新
  // 比如表单的时间选择器change事件：
  // document.getElementById('start-time').addEventListener('change', function() {
  //   var start = this.value;
  //   var end = document.getElementById('end-time').value;
  //   updatePreviewEvent(start, end);
  // });
});

这种方法更灵活，能实时响应用户的输入变化，非常适合预约创建表单的场景。

两种方法都能让你同时看到已有预约和新预约的预览，轻松判断时间是否冲突。

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