FullCalendar日视图垂直显示多谷歌日历事件异常问题

Hey there, let's break down and fix this issue you're facing with FullCalendar and multiple Google Calendars. I've run into similar resource-view quirks before, so here's how to get everything working as expected:

The Root Cause #

Your problem boils down to two key conflicts:

• When using the resources array, FullCalendar expects events to be linked to a specific resource ID to display them in resource-aware views (like resourceTimeGridDay). Google Calendar events don't have this property by default, so they disappear from the day view.
• Removing the resources array switches you to the basic timeGridDay view, which stacks events horizontally instead of showing them in vertical time slots with resource separation.

Step-by-Step Solution #

1. Use the Correct Day View Type #

Instead of the basic timeGridDay, use resourceTimeGridDay—this is the resource-aware version of the day view that supports vertical time slot display with resource columns.

2. Link Google Calendar Events to Resources #

Since Google Calendar events don't include a resourceId, you'll need to inject this property manually for each calendar source. Use the eventDataTransform callback to map each Google Calendar to a matching resource ID.

3. Ensure Resources Are Properly Configured #

Your resources array needs unique IDs that match the resourceId values you inject into the Google Calendar events.

Example Working Code #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');

  const calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'resourceTimeGridDay,timeGridWeek,dayGridMonth'
    },
    // Define your resources (one per Google Calendar)
    resources: [
      { id: 'gcal-1', title: 'Team Calendar' },
      { id: 'gcal-2', title: 'Client Events' }
    ],
    eventSources: [
      // First Google Calendar
      {
        googleCalendarId: 'your-first-calendar-id@group.calendar.google.com',
        eventDataTransform: function(event) {
          // Attach the matching resource ID to every event from this calendar
          return {
            ...event,
            resourceId: 'gcal-1'
          };
        }
      },
      // Second Google Calendar
      {
        googleCalendarId: 'your-second-calendar-id@group.calendar.google.com',
        eventDataTransform: function(event) {
          return {
            ...event,
            resourceId: 'gcal-2'
          };
        }
      }
    ]
  });

  calendar.render();
});

Why This Works #

• The resourceTimeGridDay view will now display each Google Calendar's events in its own vertical column, with proper time slot highlighting.
• Week and month views will continue to work as before (they'll either group events by resource or display them normally, depending on your view settings).
• You'll no longer have to choose between visible day events and vertical time slot layout.

Quick Debug Tips #

• If events still don't show up, check the browser console for errors related to resource IDs or Google Calendar API access.
• Use the eventRender callback to log event data and confirm the resourceId is being added correctly:

  eventRender: function(info) {
    console.log('Event data:', info.event);
  }
  

Give this setup a try—let me know if you need to adjust anything for your specific use case!

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