Vue3中FullCalendar隐藏过往日期且保留事件拖拽功能方案咨询

1. 标记目标日期单元格 #

在FullCalendar配置里，通过dayCellClassNames回调给今日之前的日期单元格添加自定义类，避免直接隐藏整个单元格：

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script setup>
import { ref } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'

const calendarOptions = ref({
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  editable: true, // 必须开启拖拽编辑权限
  dayCellClassNames(arg) {
    const today = new Date()
    today.setHours(0, 0, 0, 0) // 重置今日时间到零点，消除时分秒的判断干扰
    const cellDate = new Date(arg.date)
    cellDate.setHours(0, 0, 0, 0)
    return cellDate < today ? 'past-day-hidden' : ''
  }
})
</script>

2. 编写CSS实现视觉隐藏但保留交互 #

放弃display: none，改用仅隐藏单元格的非事件内容，确保事件元素的拖拽功能正常：

/* 隐藏单元格的日期文字、背景和边框 */
.past-day-hidden {
  background-color: transparent !important;
  color: transparent !important;
  border-color: transparent !important;
}

/* 强制事件元素正常显示并保留交互 */
.past-day-hidden .fc-event {
  opacity: 1;
  color: inherit;
  position: relative;
  z-index: 1;
}

为什么之前的方法失效 #

display: none会彻底移除DOM元素的布局空间，同时禁用所有交互事件，FullCalendar的拖拽逻辑依赖事件所在的单元格元素存在，所以直接隐藏单元格会导致拖拽功能失效。上述方案仅隐藏视觉内容，单元格元素本身仍在DOM中，事件的交互逻辑不受影响。

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