FullCalendar, каким образом добиться выделения диапазона дат при клике?

Question

[Ridik7]

Всем привет!

Кто работал с FullCalendar? Подскажите, пожалуйста, как реализовать выбор диапазона дат, т.е. при клике на дату выделить ее, при следующем клике на другую дату, выделить все дни между этими датами, включая кликнутые дни. Пример, как должно работать здесь
Ссылка на песочницу с календарем

Answer 1

[iBird Rose]

ну это не просто) мне лень. поэтому опишу просто:
1) создаешь hidden input куда будут записываться выбранные даты. к примеру в формате (dd/mm/yyyy)
2) через колбек календаря или через клик записываешь туда выделенные даты (к примеру будет 07/09/2016, 09/09/2016)
3) итого ты получишь 2 даты
4) дальше идем в jq и работает с этими датами.
5) для начала записываем данные из input в переменную
6) далее делаем сплит по запятой и записываем это все в массив
7) далее переводим наши строки в формат даты через new Date()
8) потом сортируем наш массив через sort();
9) и теперь мы знаем минимальную и максимальную дату (тобишь dateArray[0] и dateArray[dateArray.length-1];)
10) далее заполняем оставшиеся даты между минимумом и максимумом примерно так:
for (var T = minDate; T <= maxDate; T += 86400000) {
AllDatesArrray.push(new Date(T));
}
Ну и по сути все. мы получили масив в котором все даты заполнены меджду выбранными нами.
далее через api календаря заливаем их в сам календарь.
Profit.

Comments

[Ridik7]

Спасибо, за алгоритм)

Answer 2

[Владимир Проскурин]

Я просто на каждого дня ставил тег data-time равным его timestamp, создавал две переменных start и to. При клике на день, он определял, если start пустой, то он его заполнял и выделял выбранный блок. Если я еще выбирал блок, он смотрел, что start заполнен, значит нужно заполнить end и опять выделять выбранный блок (я создавал два css класса - start и end). После чего я писал что-то типа такого

jQuery('[date-time]').each(function() {
var cur_time = parseInt(jQuery(this).date('time'))
if(cur_time > start && cur_time < end) {
jQuery(this).addClass('selected')
} else {
jQuery(this).removeClass('selected')
}
});

Еще создал стиль для класса selected, который выделяет выбранные блоки.
Давно делал, не лучшее решение конечно, в этом цикле я удаляю на всех блоках класс selected, даже там, где он не установлен. Тут можно поработать с кешем в массивы. Но суть ясна я надеюсь.

Comments

[Ridik7]

Суть ясна, реализовал опираясь на Ваши подсказки. Спасибо!