Полный календарь для бронирования, выбор перетаскивания - PullRequest
Новая
       6

Полный календарь для бронирования, выбор перетаскивания

0 голосов
/ 14 февраля 2020

Может ли FullCalendar сделать что-то вроде календаря airbnb.com для бронирования домов? Выберите даты в диапазоне доступных дней, нажав (не перетаскивая)?

Я создал календарь, который позволяет выбирать даты путем перетаскивания от начала до конца, selectable: true и selectMinDistance: 2.

* 1006. * Пример: https://codepen.io/khurramishaque/pen/dyyPyVX (из: FullCalendar отключить выбор дня, если не разрешено в обратном вызове selectAllow )

Мотивация: переключить перетаскивание по клику, сделать / выбрать доступным days

Мой вопрос: могу ли я снова использовать dayRender callback при срабатывании dateClick?

1 Ответ

0 голосов
/ 14 февраля 2020

AFAIK нет встроенной поддержки этой функции. Однако вы можете довольно легко реализовать это самостоятельно.

В кратком списке:

  1. Отключить возможность выбора, поскольку здесь вам не помогут
  2. Привязать к dateClick событие и сохранение возвращаемой даты начала
  3. В той же функции, обрабатывающей событие dateClick, если у вас сохранена дата начала, получите дату окончания и вручную создайте событие используя addEvent function

Это если вы хотите создать событие. Но вы можете делать с этими данными все, что хотите, и просто вызывать render для объекта календаря.

Например: 

var startDate = false;
var calendar = new Calendar(calendarEl, {
    selectable: false,
    dateClick: function (info) {
        if (startDate !== false) { // startDate has been selected, create event
            this.addEvent({
                title: "An event title",
                start: startDate,
                end: info.date
            });
            startDate = false;
        } else { // No start date, set it
            startDate = info.date;
        }
    }
});

Примечание. Я не проверял код выше. Может потребоваться сначала инициализировать calendar, а затем связать событие dateClick и заменить this на calendar

...