时间戳

首页 > 解决方案 > 仅在 FullCalendar 中的特定事件上允许 editable = true

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

问题描述

我试图让 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没有成功。

标签： javascriptfullcalendarsalesforce-lightning

解决方案

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

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',
    });
},

推荐阅读