Jak wybrać wiele zakresów dat z Fullcalendar?

Question

Próbuję utworzyć funkcję kalendarza, w której użytkownik może zablokować wiele zakresów dat, wybierając datę początkową i końcową. Myślałem o użyciu FullCalendar, ale nie jestem pewien, jak to zrobić.

Widziałem kilka przykładów blokowania wybranych dat przez dodanie mojego czeku na dayClick, ale te nie dotyczą zakresów dat. Byłbym wdzięczny za każdą pomoc, tak naprawdę nie szukam całego źródła, ale pewne sugestie, jak to zrobić.

Answer 1

Jest to problem wieloczęściowy. Oto podstawowy pomysł.

• Pozwala użytkownikowi dokonać wyboru kliknij + przeciągnięcie z selectable: true
• W select zwrotnego, dodać background event z addEventSource.
• Dodając wydarzenie, nadaj mu właściwość niestandardową: block: true.
• Użyj niestandardowej funkcji dla selectOverlap, która zwraca wartość false, jeśli event.block.

Coś podobnego do tego 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; 
} 

Wydarzenia w tle są opcjonalne, ale zazwyczaj jest to pożądane (wizualnie).

Jeśli wymagane jest przeciąganie i upuszczanie utworzonych zdarzeń, można również użyć funkcji selectOverlap w eventOverlap.