如何从Fullcalendar中选择多个日期范围？ [英] How to select multiple date ranges from Fullcalendar?

问题描述

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

我确实看到了一些如何通过在 dayClick 上添加检查来选择某些日期的例子，但这些不处理日期范围。我将不胜感激任何帮助，我不是真的在寻找一个完整的来源，而是如何解决这个问题的一些建议。

解决方案

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

• 允许用户使用 selectable：true 选择 回调，添加后台事件与 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'，
lock：true，
}，]）; 
 $（＃calendar）。fullCalendar（unselect）; 
}，
 selectOverlap：function（event）{
 return！ event.block; 
 
 
 
 
 
 $ b 
后台事件是可选的，但这通常是需要的（可视化）。 p> 
 
 
如果需要拖放已经创建的事件，您可以使用 selectOverlap  //fullcalendar.io/docs/event_ui/eventOverlap/rel =noreferrer>  eventOverlap  。
 
I am trying to make a calendar feature in which a user can block off multiple date ranges by just selecting the start and end dates. I was thinking of using FullCalendar but I am not sure how to proceed with this. 

I did see some examples of how to block some dates from being selected by adding my check on dayClick but these do not deal with date ranges. I would appreciate any help, I am not really looking for an entire source but some suggestions on how to go about this.  
解决方案
This is a multi-part problem. Here's the basic idea.


Allow the user to make a click+drag selection with selectable: true
In the select callback, add a background event with addEventSource.
When adding the event, give it a custom property: block: true.
Use a custom function for selectOverlap that returns false if event.block.


Something like this 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;
}
Background events are optional, but this is usually desired (visually).

If dragging and dropping already created events  is desired, you can use the  selectOverlap function in eventOverlap as well.

                        
这篇关于如何从Fullcalendar中选择多个日期范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！