仅允许在 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（以及大多数此类程序）无法像您尝试做的那样更改内容 'on the fly' - 您通常必须先在服务器上设置内容，然后这些程序才能呈现，等等。根据您提供的设置。

因此，在您的活动中，您应该为您想要的活动设置 editable = true。 https://fullcalendar.io/docs/event-object

你不能（好吧，不容易 - 可能有一个非常迂回的方式，但我认为不值得尝试）在 'render' 中这样做，但如果你这样做很简单服务器端的检查。

当我说 'server side' 时，我的意思是 'the data coming into fullcalendar'。因为你在 "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',
    });
},

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

Only allow editable = true on specific events in FullCalendar

javascript

fullcalendar

salesforce-lightning