FullCalendar拖拽事件问题：仅允许蓝色线条拖拽并从点击位置启动

1. 仅允许蓝色事件拖拽 #

通过给单个事件设置editable属性覆盖全局配置，实现指定事件可拖拽、其余事件不可拖拽：

• 给管理员区域的事件添加editable: true，并设置eventColor为蓝色
• 用户区域事件统一设置editable: false

2. 点击列从点击位置开始拖拽 #

监听dateClick事件，当点击管理员列的时间槽时，自动将蓝色事件的起始位置调整到点击处并保留原时长，之后即可直接拖拽调整。

修改后的完整代码 #

JavaScript代码 #

var calendarEl = document.getElementById("calendar");
var events = [];

let calendar = new Calendar(calendarEl, {
    plugins: [interactionPlugin, resourceTimelinePlugin],
    initialView: "resourceTimelineDay",
    headerToolbar: {
        left: "",
        center: "title",
        right: "prev,next today",
    },
    height: "auto",
    locale: "ja",
    editable: true, // 全局允许编辑，单个事件可覆盖该配置
    resourceAreaColumns: [{
            field: 'title',
            headerContent: 'スタッフ'
        },
        {
            field: 'count',
            headerContent: '出勤回数'
        }
    ],
    resourceAreaWidth: "190px",
    views: {
        resourceTimelineDay: {
            slotDuration: "00:15:00",
            slotMinWidth: "10",
        },
    },
    eventDidMount: function(info) {
        var currentdate = info.view.intervalStart;
        $('.datetime-picker').datepicker().datepicker('setDate', new Date(currentdate));
    },
    // 点击时间槽触发的回调
    dateClick: function(info) {
        // 仅处理管理员对应的资源列（示例中为ID=1的佐藤）
        if (info.resource.id === "1") {
            const targetEvent = calendar.getEvents().find(event => event.resourceId === "1" && event.editable);
            if (targetEvent) {
                // 保留原事件时长
                const duration = targetEvent.end.getTime() - targetEvent.start.getTime();
                // 更新事件起始时间为点击位置
                targetEvent.setStart(info.date);
                // 计算并设置新的结束时间
                targetEvent.setEnd(new Date(info.date.getTime() + duration));
                // 通知日历更新事件状态
                calendar.updateEvent(targetEvent);
            }
        }
    },
    resources: [{
            id: "1",
            title: "佐藤",
            count: "10"
        },
        {
            id: "2",
            title: "山田",
            count: "12",
            eventColor: "#ffe5e5"
        },
        {
            id: "3",
            title: "田中",
            count: "3",
            eventColor: "#bbd6ee"
        },
        {
            id: "4",
            title: "鈴木",
            count: "5",
            eventColor: "#e7e6e6"
        },
    ],
    // 定义事件，区分可拖拽与不可拖拽
    events: [{
            resourceId: "1",
            title: "",
            start: "2022-08-10T09:00:00",
            end: "2022-08-10T15:00:00",
            editable: true,
            eventColor: "#bbd6ee" // 管理员蓝色区域
        },
        {
            resourceId: "2",
            title: "",
            start: "2022-08-10T00:00:00",
            end: "2022-08-10T24:00:00",
            editable: false
        },
        {
            resourceId: "3",
            title: "",
            start: "2022-08-10T00:00:00",
            end: "2022-08-10T24:00:00",
            editable: false
        },
        {
            resourceId: "4",
            title: "",
            start: "2022-08-10T00:00:00",
            end: "2022-08-10T24:00:00",
            editable: false
        },
    ],
});
calendar.render();

HTML代码 #

<div id="calendar" class="w-full"></div>

补充说明 #

• 若管理员区域对应其他资源ID，只需修改dateClick中的info.resource.id判断值，以及事件数组中对应资源的editable和eventColor配置
• 拖拽时事件会保持原时长，如需修改时长，可调整setEnd的计算逻辑
• 确保已正确引入FullCalendar的interactionPlugin，否则拖拽功能无法生效

内容的提问来源于stack exchange，提问作者Ngô Văn Hoàng