FullCalendar周视图点击前后按钮加载对应周事件的实现咨询

别手动绑定按钮点击了，FullCalendar自带了更靠谱的事件钩子，能统一处理所有导航操作（prev/next按钮、周导航图标切换），直接用这些钩子就行。

核心思路 #

当视图的日期范围发生变化（不管是点击翻页还是切换周导航），FullCalendar会触发datesSet事件（v5+版本），我们在这个事件里：

1. 判断当前是否是周视图
2. 获取当前周的起始/结束日期
3. 请求对应周的事件数据
4. 更新日历上的事件

完整代码示例（v5+ 原生JS） #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek', // 默认周视图
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,dayGridMonth'
    },
    // 日期范围变化时触发（翻页、导航切换都触发）
    datesSet: function(info) {
      if (info.view.type === 'timeGridWeek') {
        // 转成YYYY-MM-DD格式，方便传给后端
        const startDate = info.start.toISOString().split('T')[0];
        const endDate = info.end.toISOString().split('T')[0];
        
        // 替换成你的实际API请求
        fetch(`/api/events?start=${startDate}&end=${endDate}`)
          .then(res => res.json())
          .then(events => {
            // 清空旧事件，添加新事件
            calendar.removeAllEvents();
            calendar.addEvents(events);
          })
          .catch(err => console.error('加载事件失败:', err));
      }
    },
    // 初始加载周视图时触发
    viewDidMount: function(info) {
      if (info.view.type === 'timeGridWeek') {
        const startDate = info.view.currentStart.toISOString().split('T')[0];
        const endDate = info.view.currentEnd.toISOString().split('T')[0];
        
        fetch(`/api/events?start=${startDate}&end=${endDate}`)
          .then(res => res.json())
          .then(events => calendar.addEvents(events));
      }
    }
  });

  calendar.render();
});

关键细节说明 #

• 为什么不用按钮点击事件？
  FullCalendar的导航操作不止prev/next按钮，周导航图标切换、直接点击日期等操作都会改变日期范围，用datesSet能一次性覆盖所有场景，不用逐个绑定元素。

• 日期处理
  info.start和info.end是FullCalendar提供的Date对象，转成YYYY-MM-DD格式是后端接口最常用的参数格式，你可以根据实际需求调整。

• 事件更新
  removeAllEvents()清空现有事件，addEvents()添加新事件；如果你的事件是固定源，也可以用updateEventSource()动态更新。

jQuery版本适配（v5+） #

如果你习惯用jQuery，代码逻辑一样，只是初始化语法不同：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    initialView: 'timeGridWeek',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,dayGridMonth'
    },
    datesSet: function(info) {
      if (info.view.type === 'timeGridWeek') {
        const startDate = info.start.format('YYYY-MM-DD');
        const endDate = info.end.format('YYYY-MM-DD');
        
        $.ajax({
          url: '/api/events',
          data: { start: startDate, end: endDate },
          success: function(events) {
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEvents', events);
          },
          error: function(err) {
            console.error('加载事件失败:', err);
          }
        });
      }
    },
    viewDidMount: function(info) {
      if (info.view.type === 'timeGridWeek') {
        const startDate = info.view.currentStart.format('YYYY-MM-DD');
        const endDate = info.view.currentEnd.format('YYYY-MM-DD');
        
        $.ajax({
          url: '/api/events',
          data: { start: startDate, end: endDate },
          success: function(events) {
            $('#calendar').fullCalendar('addEvents', events);
          }
        });
      }
    }
  });
});

内容的提问来源于stack exchange，提问作者Lil Gero