如何 select 来自 Fullcalendar 的多个日期范围?
How to select multiple date ranges from Fullcalendar?
我正在尝试制作一个日历功能,用户只需选择开始日期和结束日期即可在其中屏蔽多个日期范围。我正在考虑使用 FullCalendar 但我不确定如何进行。
我确实看到了一些示例,说明如何通过在 dayClick
上添加检查来阻止某些日期被选中,但这些示例不涉及日期范围。如果有任何帮助,我将不胜感激,我并不是真的在寻找完整的资源,而是在寻找有关如何解决此问题的一些建议。
这是一个多部分问题。这是基本的想法。
- 允许用户使用
selectable: true
进行点击+拖动选择
- 在
select
callback, add a background event with addEventSource
.
- 添加事件时,给它自定义属性:
block: true
.
- 为
selectOverlap
使用自定义函数,如果 event.block. returns 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
功能。
我正在尝试制作一个日历功能,用户只需选择开始日期和结束日期即可在其中屏蔽多个日期范围。我正在考虑使用 FullCalendar 但我不确定如何进行。
我确实看到了一些示例,说明如何通过在 dayClick
上添加检查来阻止某些日期被选中,但这些示例不涉及日期范围。如果有任何帮助,我将不胜感激,我并不是真的在寻找完整的资源,而是在寻找有关如何解决此问题的一些建议。
这是一个多部分问题。这是基本的想法。
- 允许用户使用
selectable: true
进行点击+拖动选择
- 在
select
callback, add a background event withaddEventSource
. - 添加事件时,给它自定义属性:
block: true
. - 为
selectOverlap
使用自定义函数,如果 event.block. returns 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
功能。