FullCalendar技术问题：新增事件时禁用拖放及日程时间限制

嘿，我来帮你搞定这两个FullCalendar的功能限制需求，这俩配置其实官方文档里都有，可能你没找对地方，我给你把具体实现方式拆解出来：

1. 限制日程安排的时间范围 #

要限制用户只能在指定日期范围内创建或查看日程，你可以使用FullCalendar的validRange配置项。这个选项可以接受固定的日期范围，也可以通过函数动态生成范围。

比如你想限制只能在2024年1月1日到2024年12月31日之间操作，就这么加：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay' // 补全你原来的视图配置
    },
    // 添加时间范围限制
    validRange: {
      start: '2024-01-01',
      end: '2024-12-31'
    }
  });
});

如果需要动态计算范围（比如只能查看最近3个月），可以用函数返回：

validRange: function(nowDate) {
  return {
    start: nowDate.clone().subtract(3, 'months'),
    end: nowDate.clone().add(3, 'months')
  };
}

设置后，超出这个范围的日期会被灰化，用户无法在这些区域创建或编辑日程。

2. 创建新事件时禁用拖放功能 #

这里分两种情况，看你具体需求：

• 禁止通过拖拽空白区域创建新事件：也就是用户不能拖拽选中时间段来触发创建事件的操作，只需设置selectable: false即可：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    validRange: {
      start: '2024-01-01',
      end: '2024-12-31'
    },
    // 禁用拖拽选择时间段创建事件
    selectable: false
  });
});

• 禁止已创建的事件被拖放修改时间：如果是想让已有的事件不能被拖拽改变时间，就设置eventStartEditable: false（只禁止时间拖放，保留其他编辑权限），或者直接设置editable: false（禁用所有编辑操作，包括拖放、调整时长）：

// 只禁止事件拖放修改时间
eventStartEditable: false

// 禁用所有编辑操作（包括拖放、调整时长、点击编辑）
editable: false

根据你的描述“创建新事件时禁用拖放功能”，应该是第一种情况，设置selectable: false就可以解决。

把这两个配置加到你的现有代码里，就能实现想要的限制啦！

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