在FullCalendar中，只允许在特定事件上进行editable = true的编辑操作。

Question

在FullCalendar中，只允许在特定事件上进行editable = true的编辑操作。

javascriptfullcalendarsalesforce-lightning

3

我想让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为false。当日历呈现并具有匹配的ID时，我需要将该特定事件设置为可编辑：true。我该如何实现这一点？我尝试使用eventRender但没有成功。

- erikvm

这篇文章主要讨论“可编辑性”，不过第一行文字有些混淆：“我正在尝试使FullCalendar只允许事件缩放”——应该是“可编辑性”？ - Apps-n-Add-Ons

eventResize 是 FullCalendar 中的一个函数，它允许你拖动事件并使其变长/变短。 - erikvm

是的，尽管问题的其余部分（包括“if”）都涉及“可编辑”，这是关于修改事件数据的......如果您真的只想要它与某个ID一起调整大小，那么您应该更改您的问题以显示与ID相关的尝试代码。然而，在大多数情况下，我认为我的答案是您应该走的方向。如果不是，请澄清您要做什么。 - Apps-n-Add-Ons

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Apps-n-Add-Ons · Accepted Answer

您应该在生成事件的服务器端进行比较。Fullcalendar（以及大多数类似程序）无法像您尝试的那样“即时”更改事物——通常您需要先在服务器上设置这些事物，然后这些程序可以根据您提供的设置进行渲染等操作。因此，在您的事件中，您应该为您想要编辑的事件设置 editable = true。https://fullcalendar.io/docs/event-object 您不能（不容易，可能有一个非常绕弯的方法，但我认为不值得尝试）在“render”中执行此操作，但是如果您在服务器端进行检查，则很简单。当我说“服务器端”时，我指的是“进入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',
    });
},