如何在FullCalendar的dateClick事件中禁用过去日期点击

核心思路分为两层：一是在点击回调中做日期判断，拦截非合法日期的后续逻辑；二是可选搭配单元格渲染钩子给过去日期加禁用视觉态，提升交互体验。

方案1：纯dateClick回调拦截（全版本通用） #

直接在dateClick触发时先做日期比对，若点击日期早于当前日期，直接终止后续业务逻辑即可，不需要额外修改其他配置：

const calendar = new FullCalendar.Calendar(calendarEl, {
  // 其余初始配置省略
  dateClick: function (info) {
    // 按天比对时，统一将两个日期的时分秒毫秒置为0，避免时间粒度误差
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const targetDate = new Date(info.date);
    targetDate.setHours(0, 0, 0, 0);

    // 命中过去日期直接拦截
    if (targetDate < today) {
      // 可按需加提示，比如轻量toast
      console.log('不能选择过去的日期');
      return;
    }

    // 以下为合法日期点击后的正常业务逻辑
    // 例如打开新建日程弹窗、回填选中日期等
    console.log('选中日期：', info.dateStr);
  }
});

方案2：视觉禁用+逻辑兜底（体验更优） #

如果不想让用户点了才知道不能选，可以在日期单元格渲染时就给过去日期加禁用样式，甚至直接屏蔽单元格的点击事件，再保留dateClick里的判断做兜底：

const calendar = new FullCalendar.Calendar(calendarEl, {
  // 其余初始配置省略
  // 单元格挂载时处理过去日期的禁用态
  dayCellDidMount: function (info) {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const cellDate = new Date(info.date);
    cellDate.setHours(0, 0, 0, 0);

    if (cellDate < today) {
      // 添加自定义禁用样式类
      info.el.classList.add('fc-disabled-past');
      // 直接屏蔽该单元格的所有鼠标事件，无需额外拦截点击
      info.el.style.pointerEvents = 'none';
    }
  },
  // 兜底判断，避免特殊场景（比如视图切换、API触发点击）下的异常
  dateClick: function (info) {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const targetDate = new Date(info.date);
    targetDate.setHours(0, 0, 0, 0);
    if (targetDate < today) return;
    // 正常业务逻辑
  }
});

配套的自定义样式可以参考：

.fc-disabled-past {
  background-color: #f7f7f7;
  color: #bfbfbf;
  cursor: not-allowed;
}

注意事项：如果业务场景是选择精确到时分秒的时间点，不需要统一把时分秒置0，直接拿info.date和new Date()做时间戳比对即可；如果是按天选择的场景，一定要统一时间粒度，避免当天的晚些时候点击当天日期被误判为过去日期。

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