我正在使用FullCalendar v2.3.0,
当我点击日期时,单元格的背景颜色会更改为'已预订',它与addEventSource完美配合,(在数组中存储选定日期) 当我点击一次agian到所选日期时,需要将单元格的背景颜色更改为白色(可预订),
如何删除原始的单元格颜色? 如何使用.fullCalendar(' removeEventSource',source)删除特定日期的事件......
select: function (start, end, jsEvent, view, cell, calEvent) {
if (jQuery.inArray(moment(start).format('YYYY-MM-DD'), sel_dates) == -1) {
sel_dates.push(moment(start).format('YYYY-MM-DD'));
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background'
}]);
}
else {
sel_dates.pop(moment(start).format('YYYY-MM-DD'));
// Here i need to change the cell background color
}
}
答案 0 :(得分:1)
select
的正确方法签名是function( start, end, jsEvent, view, [ resource ] )
。见https://fullcalendar.io/docs/selection/select_callback。我不知道你在哪里知道它包含“cell”或“calEvent”?
所选区域可能跨越多个单元格,因此您无法像这样直接更改背景颜色。无论如何,即使你可以,这也没有区别,因为你必须删除之前添加的事件,它位于单元格顶部。事件不仅仅是一些背景颜色 - 即使“背景”事件实际上是需要管理的对象,尽管它可能只是颜色变化的外观。
一些建议:
1)我不会为了创建一个事件而添加整个事件源。事件源旨在将大型事件组拆分为逻辑块,以便更轻松地管理它们,或从不同的服务器获取它们。
而是使用renderEvent创建新的单个事件。 https://fullcalendar.io/docs/event_rendering/renderEvent/。如果您有任何现有事件源,则可以选择指定要包含它的ID。
2)要删除事件,正如我所解释的那样,您不能只恢复背景颜色,您需要删除实际事件本身。您也无法使用“select”回调,因为您无法确定用户是否会选择与任何特定事件实际匹配的相同大小的区域。
允许删除的一种明显方法是处理“eventClick”回调(https://fullcalendar.io/docs/mouse/eventClick/)并要求用户确认是否要删除。如果他们同意,您可以调用“removeEvents”方法(https://fullcalendar.io/docs/event_data/removeEvents/)传递用户点击的事件的ID。