FullCalendar单击并拖动多个事件

Question

I'm trying to set up a calendar where a user can select multiple time slots by clicking and dragging in the weekly view ('agendaWeek'). For example - Mon 2-4pm, Tues 1:30-2:00pm, etc.

What's the recommended way to do this? Currently every time a new selection is made, the previous one automatically gets cleared.

Answer 1

Everytime a user selects a timerange, it creates a kind of placeholder event for visual feedback to the user. This isn't actually an event yet, and it is removed when the user makes another selection.

What you need to do, is add an actual event whenever a selection is made.

Use the select callback .

It's triggered every time the user selects (clicks and drags) a time slot. In it, call addEventSource to add it to the calendar as an actual event. And then call unselect to manually remove the placeholder.

select: function (start, end, jsEvent, view) {
    $("#calendar").fullCalendar('addEventSource', [{
        start: start,
        end: end,
    }, ]);
    $("#calendar").fullCalendar("unselect");
}

JSFiddle