仅在 FullCalendar 中的特定事件上允许 editable = true

Question

我正在尝试让 FullCalendar 仅允许 event Resize 如果两个特定的 id 匹配，但我无法让它工作。

本质上，我是在一个组件中加载 FullCalendar。该组件有一个唯一的 ID，表示为日历上的一个事件。日历加载到页面后，如何确保仅将 editable: true 设置为该特定事件？请参阅下面的eventRender，了解我希望实现的伪代码

loadDataToCalendar: function(component, salesAppointments, resExceptions) {
    let myEventid;
    var ele = component.find('calendar').getElement();
    $(ele).fullCalendar({
        eventResize: function(event) {
            component.set("v.startTime", event.start._d);
            component.set("v.endTime", event.end._d);
            component.set("v.showSaveButton", true)
        },
        eventRender: function(event) {
            if (event.id === myUniqueIdHere) {
                event.editable = true // this is what I'm trying to achieve
            }
        },

        header: {
            left: 'prev, next, today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },

        eventOverlap: false,
        defaultView: 'agendaWeek',
        editable: false,
        eventLimit: true,
        eventSources: [salesAppointments, resExceptions],
        timezone: 'local',
    });
},

所以默认情况下，我希望editable 为假。当日历呈现并具有匹配的 ID 时，我需要将该特定事件设置为可编辑：true。我将如何实现这一目标？我试过使用eventRender 没有 成功。

Answer 1

您应该在生成事件的服务器端进行比较。

Fullcalendar（以及大多数此类程序）无法像您尝试做的那样“即时”更改内容 - 您通常必须先在服务器上设置内容，并且这些程序可以根据你给的设置。

所以，在你的事件中，你应该为你想要的设置 editable = true 。 https://fullcalendar.io/docs/event-object

您不能（嗯，不容易 - 可能有一种非常迂回的方式，但我认为不值得尝试）在“渲染”中执行此操作，但如果您检查服务器端。

当我说“服务器端”时，我的意思是“进入全日历的数据”。由于您在“salesAppointments”和“resExceptions”中有这些内容，因此您可以在 javascript 中进行一些操作 - 但同样，不能在 fullcalendar 部分中进行操作 - 类似于：

 loadDataToCalendar: function(component, salesAppointments, resExceptions) {
    let myEventid;
    $(salesAppointments).each(function(event)){
        if (event.id === myUniqueIdHere) {
            event.editable = true;
        }    
    }
    $(resExceptions).each(function(event)){
        if (event.id === myUniqueIdHere) {
            event.editable = true;
        }    
    }
    var ele = component.find('calendar').getElement();
        $(ele).fullCalendar({
            eventResize: function(event) {
                component.set("v.startTime", event.start._d);
                component.set("v.endTime", event.end._d);
                component.set("v.showSaveButton", true)
        },
        header: {
            left: 'prev, next, today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },
        eventOverlap: false,
        defaultView: 'agendaWeek',
        editable: false,
        eventLimit: true,
        eventSources: [salesAppointments, resExceptions],
        timezone: 'local',
    });
},