FullCalendar：如何通过validRange函数保留灰化区域内的事件？

要实现「灰化无效日期、限制事件拖拽/调整，但保留范围外事件显示」的需求，不要直接使用validRange（它会自动隐藏范围外事件），可以拆分需求分别实现：

• 限制事件操作范围：通过eventDrop和eventResize回调拦截超出范围的操作，强制重置事件位置
• 灰化无效日期区域：通过dayRender手动给无效日期添加灰化样式
• 保留所有事件显示：移除validRange配置，让所有事件正常渲染

示例代码 #

JavaScript 配置

// 定义你的有效日期范围
const validStartDate = new Date('2024-05-01');
const validEndDate = new Date('2024-05-31');

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    // 你的其他日历配置（比如header、events数据源等）
    events: '/your-events-endpoint',
    
    // 拦截事件拖拽操作
    eventDrop: function(info) {
      const event = info.event;
      // 判断事件新位置是否超出有效范围
      if (event.start < validStartDate || event.end > validEndDate) {
        // 超出则重置回原位置
        info.revert();
      }
    },
    
    // 拦截事件大小调整操作
    eventResize: function(info) {
      const event = info.event;
      if (event.start < validStartDate || event.end > validEndDate) {
        info.revert();
      }
    },
    
    // 给无效日期添加灰化样式
    dayRender: function(info) {
      if (info.date < validStartDate || info.date > validEndDate) {
        info.el.classList.add('fc-invalid-day');
      }
    }
  });

  calendar.render();
});

CSS 样式

/* 灰化无效日期的样式 */
.fc-invalid-day {
  background-color: #e9e9e9;
  opacity: 0.8;
}

原理说明 #

• 移除validRange后，日历会渲染所有事件，不管日期是否在你定义的有效范围内
• eventDrop和eventResize回调会在用户操作事件时触发，判断新位置是否合规，不合规则调用info.revert()恢复事件原状态
• dayRender会遍历每个日历日期，给超出范围的日期添加自定义灰化类，达到视觉上的无效区域标识

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