FullCalendar - просмотр месяца: различное поведение для выбора диапазонов дат (без щелчка и перетаскивания) - PullRequest
Новая
       39

FullCalendar - просмотр месяца: различное поведение для выбора диапазонов дат (без щелчка и перетаскивания)

0 голосов
/ 26 сентября 2018

Интересно, есть ли альтернативный способ выбора диапазона дат в представлении месяца, без click + drag?

Моя идея была бы:

  • первый.щелчок: устанавливает дату начала.
  • Вкл. mousemove, подсветка диапазонов дат (до даты, на которую наведен указатель мыши).
  • 2-й.click: Устанавливает дату окончания.

Должен ли я сделать этот запуск вручную dragstart при dayClick обратном вызове?Я не могу найти способ документировать события там.Чего мне не хватает?

Каким-то образом связанным, но другим поведением, которое я хочу добавить, является «выделение» диапазона дат (в скрипте 4 дня) от выбранной даты начала.Я пытался вызвать метод select с помощью обратного вызова dayClick, но если я вызываю метод select программным способом, подсвечиваются только даты начала и окончания (и я хотел бы также выделить промежуточные).

(см. Скрипку: https://jsfiddle.net/xeezawaki/qrjpv7w5/)

1 Ответ

0 голосов
/ 27 сентября 2018

Выполнение чего-то вроде следующего даст вам отправную точку для выбора одной даты, а затем другой, чтобы выделить первую, последнюю и все ячейки между ними.Mouseover настроен в viewRender, чтобы гарантировать, что элементы, к которым вы хотите присоединиться, находятся в DOM.

Глядя на документы, я вижу только dragstart, это eventDragStart, это бесполезно, так как на данный момент у вас еще нет события.

var startDate, endDate

viewRender: function( view, element ) {
  $( ".fc-row .fc-bg .fc-day" ).mouseover(function() {
    if (startDate != null && endDate == null){
      var hoverDate = moment($(this).data("date"));
      bookingCalendarSelector.fullCalendar('select', startDate, hoverDate.add(1, 'd'));
    }
  });
},
dayClick: function(date, jsEvent, view) {
  if (startDate == null) {
      startDate = date;
      bookingCalendarSelector.fullCalendar('select', startDate);
  } else if (endDate == null) {
      endDate = date;
      bookingCalendarSelector.fullCalendar('select', startDate, endDate.add(1, 'd'));
  } else {
      startDate = endDate = null;
      bookingCalendarSelector.fullCalendar('unselect');
  }
}

https://jsfiddle.net/ally_murray/2b7s3dj1/

...