CODEWITHSUNDEEP
jqueryfullcalendar
Ayrton Senna
Ayrton Senna

Reputation: 3835

How to select multiple date ranges from Fullcalendar?

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.

Upvotes: 11

Views: 21558

Answers (1)

DanielST
DanielST

Reputation: 14133

This is a multi-part problem. Here's the basic idea.

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.

Upvotes: 23

Related Questions