如何 select 来自 Fullcalendar 的多个日期范围?

How to select multiple date ranges from Fullcalendar?

我正在尝试制作一个日历功能,用户只需选择开始日期和结束日期即可在其中屏蔽多个日期范围。我正在考虑使用 FullCalendar 但我不确定如何进行。

我确实看到了一些示例,说明如何通过在 dayClick 上添加检查来阻止某些日期被选中,但这些示例不涉及日期范围。如果有任何帮助,我将不胜感激,我并不是真的在寻找完整的资源,而是在寻找有关如何解决此问题的一些建议。

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

像这样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 功能。