Full Calendar切换月/周时更新JSON URL的实现求助

Hey there! Let's work through how to get FullCalendar to automatically update your JSON data URL when switching months or weeks. It sounds like you've already figured out how to grab the current date range, so let's focus on tying that to FullCalendar's built-in events to make the URL update and data refresh work reliably.

Core Approach: Use FullCalendar's Date Change Events #

Instead of relying on manual getDate() calls or storage, FullCalendar has dedicated events that trigger whenever the visible date range changes (like switching months, weeks, or views). The most reliable one for this use case is datesSet (available in v5+; for older versions, use viewRender). This event gives you direct access to the new date range, so you can build your URL and refresh the events seamlessly.

Example Implementation #

Let's break this down into two common scenarios:

1. Dynamic Event Fetching (Recommended)

If you set your events option to a function, FullCalendar will automatically call it whenever the date range changes. This is the cleanest way to handle dynamic URLs:

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    // Use a function to fetch events dynamically
    events: function(info, successCallback, failureCallback) {
      // Extract formatted dates from the info object
      const startDate = info.startStr.split('T')[0]; // YYYY-MM-DD format
      const year = startDate.split('-')[0];
      const month = startDate.split('-')[1];

      // Build your custom URL (adjust to match your API's requirements)
      // For week views, you could swap month for week number here
      const jsonUrl = `/your-api/events?year=${year}&month=${month}`;

      // Fetch the data and pass it to FullCalendar
      fetch(jsonUrl)
        .then(response => response.json())
        .then(events => successCallback(events))
        .catch(error => {
          console.error('Error fetching events:', error);
          failureCallback(error);
        });
    }
  });

  calendar.render();
});

2. Updating a Static Event Source

If you initially set a static URL and need to update it later, use the datesSet event to modify the event source and trigger a refresh:

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    // Start with an initial event source
    events: '/your-api/events?year=2024&month=01',
    // Triggered whenever the date range changes
    datesSet: function(info) {
      const startDate = info.startStr.split('T')[0];
      const year = startDate.split('-')[0];
      const month = startDate.split('-')[1];
      const newJsonUrl = `/your-api/events?year=${year}&month=${month}`;

      // Remove the old event source and add the new one
      const existingSource = calendar.getEventSources()[0];
      if (existingSource) {
        existingSource.remove();
      }
      calendar.addEventSource(newJsonUrl);
      // Force a refetch to load the new data
      calendar.refetchEvents();
    }
  });

  calendar.render();
});

Why Your Previous Attempts Might Have Failed #

• Timing Issues: Using getDate() outside of FullCalendar's event callbacks might run before the calendar has finished updating its date range, leading to stale values.
• Missing Refresh: Even if you updated the URL, you need to explicitly tell FullCalendar to refetch events (either via the success callback in the function approach or refetchEvents() in the static source approach).
• Incorrect Event Source Update: If you tried to modify the URL directly without removing/replacing the event source, FullCalendar won't pick up the change automatically.

Key Notes #

• Date Formatting: Adjust how you extract year/month/week from info.startStr to match your backend API's expected parameters. For week views, you might use info.start.getWeek() (with a date library) or the ISO week string.
• FullCalendar Version: Make sure you're using the correct event names for your version. datesSet is for v5+; v4 and earlier use viewRender.
• Error Handling: Always add error handling to your fetch calls so you can debug if the URL isn't returning data as expected.

With this setup, switching between months or weeks will automatically trigger a request to the updated JSON URL, and your calendar will load the correct events for the new date range.

内容的提问来源于stack exchange，提问作者André Bisewski