You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.24 14:06:04