FullCalendar事件动态加载与月份导航教程

FullCalendar是前端开发中广泛使用的日历组件，支持自定义事件展示、时间区间切换等能力，其中事件动态加载和月份导航是实际项目里的高频需求。下面我们就一步步实现这两个核心功能。

环境准备与基础配置

首先需要在项目中引入FullCalendar的相关依赖，这里以原生JavaScript环境为例，先完成基础的日历初始化：

// 引入FullCalendar核心库和对应样式
import FullCalendar from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import '@fullcalendar/daygrid/main.css';

// 初始化日历实例
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth', // 默认展示月视图
  headerToolbar: {
    left: 'prev,next today', // 月份导航按钮
    center: 'title',
    right: 'dayGridMonth,dayGridWeek'
  }
});
calendar.render();

实现月份导航逻辑

FullCalendar自带的导航按钮已经支持基础的月份切换，但如果需要自定义导航逻辑或者在切换月份时触发额外操作，可以通过监听相关事件实现：

// 监听月份切换事件
calendar.on('datesSet', function(info) {
  // info.start 是当前视图的开始时间，info.end 是结束时间
  const startMonth = info.start.getMonth() + 1; // 月份从0开始计数，需要+1
  const endMonth = info.end.getMonth() + 1;
  console.log('当前视图时间范围：' + info.start + ' 到 ' + info.end);
  // 可以在这里触发动态加载事件的逻辑
  loadEventsByMonth(info.start, info.end);
});

如果需要自定义导航按钮，也可以直接调用FullCalendar实例的内置方法：

// 切换到上一个月
document.getElementById('prev-btn').addEventListener('click', function() {
  calendar.prev();
});

// 切换到下一个月
document.getElementById('next-btn').addEventListener('click', function() {
  calendar.next();
});

// 回到当前月份
document.getElementById('today-btn').addEventListener('click', function() {
  calendar.today();
});

事件动态加载实现

动态加载事件的核心是调用后端接口获取对应时间段的事件数据，然后添加到日历中。需要注意FullCalendar要求的事件数据格式，默认支持id、title、start、end等字段：

// 动态加载指定时间段的事件
function loadEventsByMonth(startDate, endDate) {
  // 先清空已有的事件，避免重复展示
  calendar.getEvents().forEach(event => event.remove());
  
  // 格式化时间参数，发送给后端
  const params = {
    start: startDate.toISOString().split('T')[0],
    end: endDate.toISOString().split('T')[0]
  };
  
  // 发起请求获取事件数据，这里用fetch示例，实际项目可替换为axios等
  fetch('https://ipipp.com/api/calendar/events?start=' + params.start + '&end=' + params.end)
    .then(response => response.json())
    .then(data => {
      // 假设后端返回的数据格式是 { code: 0, data: [{ id: 1, title: '会议', start: '2024-05-10', end: '2024-05-10' }] }
      if (data.code === 0) {
        // 将事件添加到日历中
        data.data.forEach(event => {
          calendar.addEvent({
            id: event.id,
            title: event.title,
            start: event.start,
            end: event.end,
            // 可以自定义事件的颜色、描述等属性
            backgroundColor: '#3788d8',
            borderColor: '#3788d8'
          });
        });
      }
    })
    .catch(error => {
      console.error('加载事件失败：', error);
    });
}

常见问题与解决方案

• 事件数据不展示：检查返回的事件时间格式是否符合ISO标准，或者是否和日历当前视图的时间范围匹配，另外要确认是否在添加事件前清空了旧数据。
• 月份切换时重复请求：可以在请求前增加防抖处理，或者在datesSet事件中判断时间范围是否和上一次一致，避免不必要的请求。
• 事件时间偏移：如果后端返回的是本地时间，需要注意时区问题，建议统一使用UTC时间或者明确指定时区参数。

完整示例整合

把上面的逻辑整合起来，就可以得到一个支持动态加载和月份导航的完整日历：

// 完整初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,dayGridWeek'
    }
  });
  
  // 初始加载当前月份的事件
  const currentStart = calendar.view.activeStart;
  const currentEnd = calendar.view.activeEnd;
  loadEventsByMonth(currentStart, currentEnd, calendar);
  
  // 监听月份切换，动态加载新时间段的事件
  calendar.on('datesSet', function(info) {
    loadEventsByMonth(info.start, info.end, calendar);
  });
  
  calendar.render();
});

// 抽离加载事件的方法，接收calendar实例作为参数
function loadEventsByMonth(startDate, endDate, calendar) {
  calendar.getEvents().forEach(event => event.remove());
  const params = {
    start: startDate.toISOString().split('T')[0],
    end: endDate.toISOString().split('T')[0]
  };
  fetch('https://ipipp.com/api/calendar/events?start=' + params.start + '&end=' + params.end)
    .then(res => res.json())
    .then(data => {
      if (data.code === 0) {
        data.data.forEach(item => {
          calendar.addEvent({
            id: item.id,
            title: item.title,
            start: item.start,
            end: item.end
          });
        });
      }
    });
}

FullCalendar事件动态加载月份导航前端日历组件JavaScript修改时间：2026-05-28 16:46:09