如何在FullCalendar切换日/月视图时切换不同事件数据源？

要实现视图切换时自动切换不同的事件数据源，核心思路是为日视图和月视图分别准备对应的事件集合，在视图切换时动态替换日历的事件源。以下是具体实现步骤：

1. 定义两个事件数据源 #

提前准备好单个预约（appointments）和预约包（bookings）的数据源，支持本地数组或API接口地址：

// 单个预约数据（日视图展示用）
const appointmentEvents = [
  { title: "预约1", start: "2024-05-20T09:00:00", end: "2024-05-20T10:00:00", bookingId: "B001" },
  { title: "预约2", start: "2024-05-20T14:00:00", end: "2024-05-20T15:30:00", bookingId: "B001" },
  // 更多预约数据...
];

// 预约包数据（月视图展示用，每个条目对应一个包含多预约的booking）
const bookingEvents = [
  { title: "B001 - 客户A预约包", start: "2024-05-20", allDay: true },
  { title: "B002 - 客户B预约包", start: "2024-05-22", allDay: true },
  // 更多预约包数据...
];

2. 完善自定义按钮的切换逻辑 #

在自定义按钮的click事件中，切换视图并替换对应数据源：

const calendarEl = document.querySelector("#calendar");
let calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: "dayGridDay", // 默认加载日视图
  customButtons: {
    myCustomButton: {
      text: '月视图',
      click: function () {
        // 切换到月视图
        calendar.changeView("dayGridMonth");
        // 清空现有事件，加载预约包数据
        calendar.removeAllEventSources();
        calendar.addEventSource(bookingEvents);
      }
    },
    // 新增切回日视图的按钮
    backToDay: {
      text: '日视图',
      click: function () {
        calendar.changeView("dayGridDay");
        calendar.removeAllEventSources();
        calendar.addEventSource(appointmentEvents);
      }
    }
  },
  headerToolbar: {
    left: 'prev,next today myCustomButton backToDay',
    center: 'title',
    right: ''
  },
  // 初始化时加载日视图数据
  events: appointmentEvents
});

calendar.render();

3. 自动监听视图切换（可选） #

如果想依赖默认视图切换按钮实现自动切换，可使用视图钩子：

const calendarEl = document.querySelector("#calendar");
let calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: "dayGridDay",
  events: appointmentEvents,
  // 视图加载完成后触发
  viewDidMount: function(info) {
    calendar.removeAllEventSources();
    info.view.type === 'dayGridMonth' 
      ? calendar.addEventSource(bookingEvents) 
      : calendar.addEventSource(appointmentEvents);
  },
  // 视图切换前触发
  viewWillChange: function(info) {
    calendar.removeAllEventSources();
    info.nextView.type === 'dayGridMonth' 
      ? calendar.addEventSource(bookingEvents) 
      : calendar.addEventSource(appointmentEvents);
  },
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridDay,dayGridMonth' // 使用默认视图切换按钮
  }
});

calendar.render();

关键API说明 #

• calendar.changeView(viewType)：切换到指定视图类型
• calendar.removeAllEventSources()：清空所有已注册的事件源
• calendar.addEventSource(source)：添加新的事件源（支持数组、函数或API地址）
• viewDidMount/viewWillChange：视图生命周期钩子，用于自动触发数据源切换

这样就能实现：默认日视图展示单个预约，切换到月视图时展示预约包，切回日视图时恢复原数据。

内容的提问来源于stack exchange，提问作者Logany-hi