如何在FullCalendar v6.1.4中禁用指定单日并屏蔽点击事件？

核心思路 #

通过FullCalendar内置钩子控制日期单元格样式，并拦截点击事件，实现指定日期置灰+禁用交互的效果。

1. 定义禁用日期集合 #

先把需要禁用的日期整理成标准格式数组，统一用YYYY-MM-DD格式避免时区偏差：

const disabledDates = ['2023-03-18', '2023-03-23'];

2. 给禁用日期添加置灰样式 #

利用dayCellDidMount钩子（单元格渲染完成后触发），给目标日期单元格添加自定义CSS类：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const disabledDates = ['2023-03-18', '2023-03-23'];

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    // 你的其他日历配置（如headerToolbar、events等）
    dayCellDidMount: function(info) {
      // 将单元格日期转换为YYYY-MM-DD格式
      const cellDateStr = info.date.toISOString().split('T')[0];
      if (disabledDates.includes(cellDateStr)) {
        info.el.classList.add('fc-disabled-day');
      }
    }
  });

  calendar.render();
});

添加对应的CSS样式实现置灰：

.fc-disabled-day {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

3. 禁用日期单元格的点击事件 #

有两种实现方式：

方式一：通过CSS直接禁用（简单高效） #

在.fc-disabled-day类中添加：

pointer-events: none;

直接阻止该单元格上的所有鼠标交互。

方式二：通过dateClick钩子拦截（支持自定义提示） #

如果需要在用户点击时给出提示，或精细控制事件，可使用dateClick钩子：

// 在日历配置中添加
dateClick: function(info) {
  const clickedDateStr = info.date.toISOString().split('T')[0];
  if (disabledDates.includes(clickedDateStr)) {
    info.jsEvent.preventDefault();
    info.jsEvent.stopPropagation();
    // 可选：提示用户
    // alert('该日期不可用');
  }
}

额外说明 #

• 若禁用日期上存在事件，想要同时禁用事件点击，可添加eventClick钩子，判断事件的开始日期是否在禁用列表中，再阻止默认行为。
• 统一使用YYYY-MM-DD格式是因为FullCalendar的date对象为UTC时间，转成ISO字符串的日期部分能确保和自定义日期匹配，避免时区导致的判断错误。

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