Fc-подсветка Fullcalendar не применяется при смене дня в пользовательском календаре - PullRequest
1 голос
/ 26 апреля 2019

У меня есть представление планировщика Fullcalendar, которое запускается с 8:00 дня 1 до 8:00 дня 2

При перетаскивании события на календарь, класс .fc-highlight применяется только с 1 дня 8 вечера 11,59 вечера.При наведении на событие в течение 2-го дня класс .fc-highlight не применяется

Это мои события

<div id='external-events'>
        <div class='fc-event'>
            My Awesome Event
        </div>
        <div class='fc-event'>
            Foo
        </div>
        <div class='fc-event'>
            Bar
        </div>
</div>

Так я устанавливаю время с 8 вечера до 8 вечера

minTime: "20:00:00", // this makes the calendar start at 8PM
maxTime: "1.20:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)

Я настроил демо здесь .

Попробуйте выбрать событие и перетащите его в 11 вечера.Фон серый.При переходе на следующий день фон исчезает.

Here .fc-highlight covers the complete hour

Here .fc-highlight is not applied

Я хотел быкласс .fc-highlight, чтобы оставаться активным

1 Ответ

0 голосов
/ 30 апреля 2019

Похоже, проблема в том, что вы используете «дневное» представление, а затем корректируете его, устанавливая «maxTime» выше, чем полночь. Возможно, где-то в коде fullCalendar он сталкивается с жестким пределом полуночи, когда он не добавляет этот класс в поле за пределами этого. Я не изучал код, но это все, что я могу предположить, основываясь на наблюдаемом поведении.

Правильный способ определения пользовательского периода времени, подобного этому, в вашем представлении - это использовать visibleRange и при желании объединить его с настраиваемым представлением (особенно если вы хотите использовать другое просмотров в вашем календаре).

Вот пример определения видимого диапазона, который будет делать то, что вам нужно. Временная шкала всегда будет отображаться с 8 вечера текущего выбранного дня до 8 вечера следующего дня. Вы не должны указывать какие-либо другие параметры, такие как dayCount или minTime / maxTime, в сочетании с этим, поскольку они будут искажать окончательное отображение:

visibleRange: function(currentDate) {
  return {
   start: currentDate.clone().startOf("day").add('20', 'h'),
   end: currentDate.clone().startOf("day").add('1', 'd').add('20', 'h')
  }
}

Вот полная рабочая демонстрация, использующая это определение диапазона как часть настраиваемого представления временной шкалы, основанного на ранее опубликованной скрипте: https://jsfiddle.net/Lzuv5kog/1/

...