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

Question

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

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

Answer 1

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

• 允许用户使用单击+拖动选择 selectable: true
• 在select回调中,添加一个背景事件用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;
}

背景事件是可选的,但通常需要(视觉上).

如果需要拖放已创建的事件,您也可以使用该 selectOverlap函数eventOverlap.