FullCalendar v5如何为指定日期设置背景色？

FullCalendar v5 已移除 dayRender，可以通过以下两种方案实现指定日期背景色的效果：

方案1：使用 dayCellDidMount 钩子（直接操作DOM） #

这是 dayRender 的替代钩子，在日历单元格渲染完成后触发，可直接修改单元格样式：

// 示例以React版本为例，Angular/Vue语法逻辑一致
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

// 指定需要设置背景色的日期
const targetDates = ['2024-05-15', '2024-05-20'];

function Calendar() {
  const handleDayCellDidMount = (info) => {
    // 判断当前单元格日期是否在目标列表中
    if (targetDates.includes(info.dateStr)) {
      // 设置背景色
      info.el.style.backgroundColor = '#e8f4fa';
    }
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      dayCellDidMount={handleDayCellDidMount}
    />
  );
}

• info.dateStr 是当前单元格的日期字符串（格式如 YYYY-MM-DD）
• info.el 是当前单元格的DOM元素，可直接修改其样式属性

方案2：使用背景事件（Background Events） #

通过FullCalendar的事件系统实现，无需操作DOM，更符合官方推荐的用法：

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

// 定义背景事件数组
const backgroundEvents = [
  {
    start: '2024-05-15',
    allDay: true,
    backgroundColor: '#e8f4fa',
    display: 'background' // 标记为背景事件
  },
  {
    start: '2024-05-20',
    allDay: true,
    backgroundColor: '#ffebee',
    display: 'background'
  }
];

function Calendar() {
  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      events={backgroundEvents}
    />
  );
}

• 设置 display: 'background' 后，事件会以背景色块形式填充整个日期单元格
• 动态更新背景日期时，只需修改 backgroundEvents 数组即可

注意事项 #

• Angular/Vue版本的API逻辑与React一致，仅需适配对应框架的语法（比如Angular中在组件配置项里传入 dayCellDidMount 或 events）
• 颜色值支持十六进制、RGB、RGBA等标准格式，可根据需求自由调整

内容的提问来源于stack exchange，提问作者Nikunj Chaklasiya