How to choose multiple date ranges from Fullcalendar?

Question

I am trying to create a calendar function in which a user can block multiple date ranges by simply selecting start and end dates. I was thinking of using FullCalendar , but I'm not sure how to do it.

I saw some examples of how to block some dates from being selected by adding my dayClick , but they do not concern date ranges. I would appreciate any help, I'm really not looking for a whole source, but some suggestions on how to do this.

Answer 1

This is a problem with several parts. Here is the basic idea.

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

Something like 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 desirable (visually).

If you want to drag already created events, you can use the selectOverlap function in eventOverlap .