如何在FullCalendar中同时显示Google Calendar节假日与自定义事件？

嘿，我明白你的需求了！想要同时显示Google公共节假日日历和自己定义的事件，其实只需要把FullCalendar的events配置改成事件源数组就可以啦——FullCalendar支持同时加载多个不同类型的事件源，不管是Google日历ID还是自定义事件列表都能一起用。

修改后的代码示例 #

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
  },
  googleCalendarApiKey: 'myCalendar'sAPIkey',
  eventClick: function (arg) {
    window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600');
    arg.jsEvent.preventDefault() // don't navigate in main tab
  },
  initialDate: '2020-09-12',
  navLinks: true, // can click day/week names to navigate views
  businessHours: true, // display business hours
  editable: true,
  selectable: true,
  // 这里改成事件源数组，同时包含Google日历和自定义事件
  events: [
    // 第一个事件源：Google公共节假日日历
    'en.pk#holiday@group.v.calendar.google.com',
    // 第二个事件源：自定义事件列表
    {
      events: [
        {
          title: 'Business Lunch',
          start: '2020-09-03T13:00:00',
          constraint: 'businessHours'
        },
        {
          title: 'Meeting',
          start: '2020-09-13T11:00:00',
          constraint: 'availableForMeeting', // defined below
          color: '#257e4a'
        },
        {
          title: 'Conference',
          start: '2020-09-18',
          end: '2020-09-20'
        },
        {
          title: 'Party',
          start: '2020-09-29T20:00:00'
        },
        // areas where "Meeting" must be dropped
        {
          groupId: 'availableForMeeting',
          start: '2020-09-11T10:00:00',
          end: '2020-09-11T16:00:00',
          display: 'background'
        },
        {
          groupId: 'availableForMeeting',
          start: '2020-09-13T10:00:00',
          end: '2020-09-13T16:00:00',
          display: 'background'
        },
        // red areas where no events can be dropped
        {
          start: '2020-09-24',
          end: '2020-09-28',
          overlap: false,
          display: 'background',
          color: '#ff9f89'
        },
        {
          start: '2020-09-06',
          end: '2020-09-08',
          overlap: false,
          display: 'background',
          color: '#ff9f89'
        }
      ]
    }
  ]
});
calendar.render();

原理说明 #

原来你是把events设置成了单个值（要么是Google日历ID，要么是自定义事件数组），所以FullCalendar只会加载那一种事件源。改成数组之后，FullCalendar会依次加载数组里的每一个事件源，这样就能同时显示节假日和你自己定义的所有事件啦。另外我已经帮你去掉了代码里多余的*~*标记，避免出现语法错误。

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