如何从Fullcalendar中选择多个日期范围？

Question

我正在尝试创建一个日历功能，用户可以通过选择开始日期和结束日期来阻止多个日期范围。我在考虑使用FullCalendar，但我不知道如何继续这样做。

我确实看到了一些示例，说明如何通过在dayClick上添加检查来阻止某些日期被选中，但这些日期范围不会处理。我很感激任何帮助，我不是真的在寻找一个完整的来源，而是一些关于如何解决这个问题的建议。

Answer 1

这是一个多部分问题。这是基本的想法。

• 允许用户使用selectable: true
进行点击+拖动选择
• 在select回调中，使用background event添加addEventSource。
• 添加活动时，请为其指定自定义属性：block: true。
• 使用selectOverlap的自定义函数，如果event.block。
则返回false

像这样JSFiddle。

selectable: true,
select: function (start, end, jsEvent, view) {
    $("#calendar").fullCalendar('addEventSource', [{
        start: start,
        end: end,
        rendering: 'background',
        block: true,
    }, ]);
    $("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
    return ! event.block;
}

背景事件是可选的，但通常需要（视觉上）。

如果需要拖放已创建的事件，您也可以使用eventOverlap中的selectOverlap功能。