编辑全天 fullCalendar 事件会将其转换为非全天事件



当我编辑全天事件时,fullCalendar (2.0.2) 会将其转换为非全天事件。在日历视图中单击事件时,我会加载一个允许用户编辑详细信息的模式。选择所有日期或时间不是其中的一部分,但日期是。单击提交后,我触发了一个 AJAX 调用,该调用更新事件服务器端,然后返回包含事件 ID 的 JSON 数据。然后,我查询 fullCalendar 以获取正确的事件。此时allDay_allDay都仍然true

theEvent = $('#calendar').fullCalendar('clientEvents', data.id)[0];
> theEvent.allDay
true
> theEvent._allDay
true

然后,我使用编辑后的事件对象更新 fullCalendar:

calendar.fullCalendar('updateEvent', theEvent);

编辑完成后,事件将显示在日历中,12a紧挨着事件标题显示。

我能够将其跟踪到 fullCalendar 中的 mutateEvent 函数,该函数似乎在以下条件下覆盖了我的设置:

// current values are:
// event.allDay: true
// oldAllDay: true
// newStart: Moment object - Mon Jan 19 2015 00:00:00 GMT-0600 (CST)
// newEnd: null
// detect new allDay
if (event.allDay != oldAllDay) { // if value has changed, use it
    newAllDay = event.allDay;
} else { // otherwise, see if any of the new dates are allDay
    newAllDay = !(newStart || newEnd).hasTime();
}

我不认为我做错了什么,但我不能确定。有人对此有意见吗?请和谢谢。目前我无法升级到更新的版本,因为此版本(2.0.2)似乎与我的客户选择的Ace Admin Bootstrap主题有些联系。

或者,我希望能够只允许全天活动,这样我将来就不必担心这个问题。

虽然这并不能真正解决问题,但这个答案解决了我的问题。

只需将 fullCalendar timeFormat 属性设置为 ''。就我而言,我只有一整天的活动,所以我永远不需要时间。

http://fullcalendar.io/docs/text/timeFormat/

$('#calendar').fullCalendar({
    events: [
        {
            title:  'My Event',
            start:  '2010-01-01T14:30:00',
            allDay: false
        }
        // other events here...
    ],
    timeFormat: ''
});

这似乎是在更高版本中修复的错误。最新版本的做法不同。

正在发生的事情是,它会设置allDay=false当您更改开始或结束日期并且更改的日期有时间时。此处重现了问题。

解决方案非常简单,当事件全天时删除开始/结束的时间部分。无论如何,它不应该在那里。

var fcEvent = $('#calendar').fullCalendar("clientEvents",id)[0]; //get the event
// Change the start date and turn it into a string, stripping off the time.
fcEvent.start = moment().format("YYYY-MM-DD"); 
$('#calendar').fullCalendar("updateEvent",fcEvent);

JSFiddle Demo

使其有条件,if(fcEvent.allDay),它应该在不破坏其他功能的情况下解决问题。

相关内容

  • 没有找到相关文章

最新更新