How to select multiple date ranges from Fullcalendar?

Question

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.

Answer 1

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.