如何在Full Calendar垂直资源视图中实现列分页？

当然可以实现这种列分页需求！FullCalendar本身没有内置的资源分页功能，但我们可以通过维护分页状态+动态更新显示的资源集合来达成目标。下面是具体的实现方案：

核心思路 #

1. 保存完整的资源列表，不直接全量传给日历，而是根据当前页码截取对应片段
2. 添加分页控制按钮（上一页/下一页），点击时更新页码并重新计算要显示的资源
3. 动态更新日历的resources配置并重新渲染

完整实现代码 #

首先在HTML里添加分页控制区域：

<div id="pagination-controls">
  <button id="prev-page">上一页</button>
  <span id="page-info"></span>
  <button id="next-page">下一页</button>
</div>
<div id="calendar"></div>

然后修改JS逻辑，加入分页处理：

document.addEventListener('DOMContentLoaded', function() {
  // 1. 定义全局的分页相关变量
  const allResources = [
      { id: '1', title: 'Room 1' },
      { id: '2', title: 'Room 2'},
      { id: '3', title: 'Room 3' },
      { id: '4', title: 'Room 4' },
      { id: '5', title: 'Room 5' },
      { id: '6', title: 'Room 6'},
      { id: '7', title: 'Room 7' },
      { id: '8', title: 'Room 8' },
      { id: '9', title: 'Room 9' },
      { id: '10', title: 'Room 10'},
      { id: '11', title: 'Room 11' },
      { id: '12', title: 'Room 12' },
      { id: '13', title: 'Room 13' },
      { id: '14', title: 'Room 14'},
      { id: '15', title: 'Room 15' },
      { id: '16', title: 'Room 16' },
      { id: '17', title: 'Room 17'},
      { id: '18', title: 'Room 18' },
      { id: '19', title: 'Room 19' },
      { id: '20', title: 'Room 20' },
      { id: '21', title: 'Room 21'},
      { id: '22', title: 'Room 22' },
      { id: '23', title: 'Room 23' },
  ];
  const resourcesPerPage = 5;
  let currentPage = 1;
  const totalPages = Math.ceil(allResources.length / resourcesPerPage);

  // 2. 获取DOM元素
  const calendarEl = document.getElementById('calendar');
  const prevBtn = document.getElementById('prev-page');
  const nextBtn = document.getElementById('next-page');
  const pageInfo = document.getElementById('page-info');

  // 3. 初始化日历
  const calendar = new FullCalendar.Calendar(calendarEl, {
    header: {
      left: '',
      center: '',
      right: ''
    },
    plugins: [ 'resourceTimeGrid' ],
    timeZone: 'UTC',
    defaultView: 'resourceTimeGridDay',
    resources: getCurrentPageResources(), // 初始显示第一页资源
    events: 'https://fullcalendar.io/demo-events.json?with-resources=4&single-day'
  });
  calendar.render();
  updatePaginationUI();

  // 4. 分页按钮点击事件
  prevBtn.addEventListener('click', () => {
    if (currentPage > 1) {
      currentPage--;
      updateCalendarResources();
      updatePaginationUI();
    }
  });

  nextBtn.addEventListener('click', () => {
    if (currentPage < totalPages) {
      currentPage++;
      updateCalendarResources();
      updatePaginationUI();
    }
  });

  // 辅助函数：获取当前页要显示的资源
  function getCurrentPageResources() {
    const startIndex = (currentPage - 1) * resourcesPerPage;
    return allResources.slice(startIndex, startIndex + resourcesPerPage);
  }

  // 辅助函数：更新日历的资源并重新渲染
  function updateCalendarResources() {
    calendar.setOption('resources', getCurrentPageResources());
    // 如果事件和资源强关联，切换后可调用calendar.refetchEvents()确保只显示当前资源的事件
  }

  // 辅助函数：更新分页按钮的状态和页码信息
  function updatePaginationUI() {
    pageInfo.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
    prevBtn.disabled = currentPage === 1;
    nextBtn.disabled = currentPage === totalPages;
  }
});

关键细节说明 #

• 资源切片：通过slice()方法从完整资源数组中截取当前页的资源片段，确保每次只显示5列
• 动态更新日历：使用calendar.setOption('resources', ...)替换当前显示的资源，日历会自动重新渲染对应列
• 分页UI控制：根据当前页码禁用无效按钮，同时显示页码信息，提升用户体验
• 事件适配：如果你的事件和资源绑定，切换分页后可调用calendar.refetchEvents()确保只加载当前资源的关联事件

这个方案可以完美适配50-100列的资源场景，每次只加载和显示5列，彻底解决界面拥挤的问题。

内容的提问来源于stack exchange，提问作者Setu Kumar Basak