如何在FullCalendar React中实现粘性headerToolbar

先澄清一个误区 #

你提到的stickyHeaderDates选项是用来让**日期表头（比如月视图的日期行、时间网格的日期标题行）**固定在顶部，而非控制顶部的headerToolbar，所以这个选项对你的需求不起作用。

解决方案：自定义CSS实现粘性工具栏 #

核心思路是给日历容器设置固定高度并开启内部滚动，然后通过CSS将headerToolbar设置为粘性定位，确保它在滚动时停留在容器顶部。

1. 日历组件代码（Next.js 13+ 客户端组件）

'use client'; // 必须添加，因为FullCalendar依赖DOM操作

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';

export default function StickyToolbarCalendar() {
  // 模拟长事件列表
  const events = Array.from({ length: 30 }, (_, i) => ({
    title: `Event ${i + 1}`,
    start: `2024-05-${String(i + 1).padStart(2, '0')}`,
    end: `2024-05-${String(i + 2).padStart(2, '0')}`
  }));

  return (
    <div className="calendar-container">
      <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin]}
        headerToolbar={{
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }}
        events={events}
        height="auto" // 让日历内容自适应高度，由外部容器控制滚动
      />
    </div>
  );
}

2. 对应的CSS样式（可放在globals.css或组件模块CSS中）

/* 日历容器：固定高度，开启垂直滚动 */
.calendar-container {
  height: 80vh;
  overflow-y: auto;
  position: relative; /* 确保粘性定位的参考容器正确 */
}

/* 将headerToolbar设置为粘性 */
.calendar-container .fc-header-toolbar {
  position: sticky;
  top: 0;
  z-index: 10; /* 确保工具栏在日历内容上方 */
  background-color: #ffffff; /* 背景色覆盖下方滚动的内容 */
  padding: 0.75rem 0; /* 调整内边距，避免内容挤压 */
  border-bottom: 1px solid #e5e7eb; /* 可选：添加分隔线，增强视觉区分 */
}

关键注意事项 #

• 客户端组件要求：在Next.js中，FullCalendar必须作为客户端组件使用，因此需要在组件顶部添加'use client'指令。
• 避免CSS冲突：检查父元素是否设置了overflow: hidden或position: static，这会导致sticky定位失效，确保容器是position: relative或其他非static定位。
• 同时固定日期表头：如果需要同时让日期表头（比如月视图的日期行）固定，可以开启stickyHeaderDates={true}选项，它会和工具栏的粘性效果兼容。

内容的提问来源于stack exchange，提问作者Olivier Kango