Question

我正在尝试让FullCalendar仅在两个特定ID匹配时才允许event Resize，但我无法使其正常工作。

基本上，我正在组件中加载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时，我需要将该特定事件设置为editable：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',
    });
},

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

1 个答案: