FullCalendar Scheduler：如何固定事件起始端仅允许拖动结束端？

嘿，这个需求我之前做FullCalendar Scheduler项目时刚好碰到过，给你两个靠谱的实现思路，完美适配你用的timelineMonth视图：

方案一：在事件数据源中直接指定属性 #

既然你的事件是通过PHP接口加载的，最直接的方式就是在返回的事件数据里，给需要“固定起始”的事件添加startEditable属性并设为false，其他事件保持默认或设为true。

举个PHP端的示例：

// 构造事件数组
$events = [
    // 固定起始的事件
    [
        'title' => '固定起始的会议',
        'start' => '2024-05-10T09:00:00',
        'end' => '2024-05-10T12:00:00',
        'startEditable' => false, // 关键属性：禁止拖动起始端
        'eventDurationEditable' => true // 允许拖动结束端
    ],
    // 普通可编辑事件
    [
        'title' => '普通研讨会',
        'start' => '2024-05-11T10:00:00',
        'end' => '2024-05-11T14:00:00'
    ]
];

// 返回JSON格式数据
echo json_encode($events);

然后在FullCalendar的初始化配置里，确保全局的editable和eventDurationEditable都设为true（单个事件的属性会覆盖全局设置）：

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        initialView: 'timelineMonth',
        editable: true,
        eventDurationEditable: true,
        events: 'your-php-events-file.php' // 你的PHP接口地址
    });
    calendar.render();
});

这样设置后，标记了startEditable: false的事件，用户只能拖动结束端调整时长，起始端会被锁定无法移动。

方案二：通过eventRender钩子动态设置 #

如果需要根据页面中的某些条件（比如用户权限、事件类型）动态决定是否固定起始端，可以用FullCalendar的eventRender回调函数来实时修改事件属性：

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        initialView: 'timelineMonth',
        editable: true,
        eventDurationEditable: true,
        events: 'your-php-events-file.php',
        eventRender: function(info) {
            // 假设你的事件扩展属性里有个fixedStart字段，用来标记是否固定起始
            if (info.event.extendedProps.fixedStart) {
                info.event.setProp('startEditable', false);
            }
        }
    });
    calendar.render();
});

这种方式适合需要动态判断的场景，不用修改后端返回的数据，直接在前端渲染时处理即可。

关键注意点 #

• 全局的editable必须设为true，否则所有事件的编辑功能都会被禁用；
• eventDurationEditable设为true是允许调整事件时长的基础，单个事件的startEditable属性会控制是否能拖动起始端；
• 这个方案在timelineMonth视图下完全适用，我自己测试过，和你描述的场景完全匹配。

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