FullCalendar如何阻止已发生的过去日程事件被拖拽?
FullCalendar禁止过去日程事件被拖拽的实现方案
要实现禁止FullCalendar中发生在过去的日程事件被拖拽的效果,可参考以下配置逻辑:
你已经尝试的eventConstraint配置可以约束新增/拖拽事件的时间范围仅为今日及之后,代码如下:
eventConstraint: { start: moment().format('YYYY-MM-DD'),/* 约束事件仅可设置为今日及之后的日期 */ end: '2100-01-01' // 此处为写死的最远可设置日期 },
你还可以通过eventDrop回调函数,实现事件被拖拽到过去日期时自动回退的效果,代码如下:
eventDrop: function(info) { var eventObj = info.event; var check = moment(eventObj.start).format('YYYY-MM-DD'); var today = moment().format('YYYY-MM-DD'); if(check < today) { revertFunc(); // 将事件放回原位置 } else { // 拖拽日期合法时的后续业务逻辑 } },
完整的日历配置示例如下:
var calendar = new FullCalendar.Calendar(calendarEl, { firstDay: 0, // 每周第一天为周日 weekends: true, // 展示周末 businessHours: { // 工作日设置,数组中为星期的0基索引,0代表周日 daysOfWeek: [ 1, 2, 3, 4, 5 ], // 周一至周五 startTime: '09:00', // 每日工作开始时间 endTime: '17:00', // 每日工作结束时间 }, initialView: 'dayGridMonth', headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' }, locale: 'en-gb', selectable: true, // 支持框选多日,选中后可触发回调事件 buttonIcons: false, // 展示上一页/下一页文字按钮而非图标 weekNumbers: true, // 展示周数 navLinks: true, // 支持点击日期/周名称跳转对应视图 editable: true, // 支持编辑、新增事件 dayMaxEvents: true, // 单日事件过多时展示“更多”链接 displayEventEnd: true, // 展示事件结束时间 eventTimeFormat: { hour: '2-digit', minute: '2-digit', },// 时间展示精确到分钟 eventDisplay: 'block', // 将带起止时间的事件从列表项样式改为块级样式 eventConstraint: { start: moment().format('YYYY-MM-DD'),/* 约束事件仅可设置为今日及之后的日期 */ end: '2100-01-01', // 此处为写死的最远可设置日期 }, events: responseJson1a,// 通过JSON数据填充事件 });
内容的提问来源于stack exchange,提问作者Glyn
相关产品推荐
相关产品推荐

