Планировщик Fullcalendar ограничить просмотр месяца на экране и включить скроллер (15 дней на экране + 15 дней на прокрутку) - PullRequest
Новая
       10

Планировщик Fullcalendar ограничить просмотр месяца на экране и включить скроллер (15 дней на экране + 15 дней на прокрутку)

0 голосов
/ 04 октября 2019

В моем веб-приложении есть планировщик полного календаря. Проблема в том, что некоторые события имеют длинный текст, поэтому я включил этот css: 

.fc-timeline-event .fc-title {
        white-space: normal;
    }

Результат лучше, но не приемлем, но вызывает события 1 дня с длинным текстом, которые плохо читать. Смотрите события, которые я выделил красным на скриншоте.

enter image description here

Мой вопрос: можно ли заставить fullcalendar-scheduler просматривать только на экране? 15 дней (в зависимости от месяца) и другие 15 за пределами экрана, включающего автоматическую горизонтальную прокрутку?

Я пробовал: slotWidth: 300 опция. Кажется, все в порядке. Хорошо работает на настольном компьютере ... но на мобильном телефоне я бы хотел установить другое значение ...

1 Ответ

1 голос
/ 04 октября 2019

Вы спросили

, можно ли заставить fullcalendar-scheduler просматривать на экране только 15 дней

Эту часть довольно легко выполнить с помощью customviews : 

views: {
  resourceTimelineFifteen: {
    type: "resourceTimeline",
    duration: { days: 15 },
    buttonText: "15 day",
    slotDuration: { days: 1}
  }
},

Демонстрация: https://codepen.io/ADyson82/pen/YzzKdXv?&editable=true&editors=001

Другая часть вашего требования

другие 15 внешний экран, включающий автоматическую горизонтальную прокрутку

на самом деле невозможно, потому что ширина слотов и ширина календаря не известны заранее, пока календарь не будет отображен (и даже может измениться, если размер экрана изменится). Поэтому простое разбиение вида на 15-дневные разделы, вероятно, лучший компромисс. Пользователь может просто нажать кнопку «Далее», чтобы увидеть следующий набор дат.

NB. Этот подход не всегда приводит к тому, что представление начинается точно с границ месяца (либо с начала месяца, либо на полпути через него), поскольку месяцы не имеют одинаковую длину. Вы можете попытаться сделать что-то более умное с настройкой visibleRange, если хотите попытаться исправить это, но я оставлю это как упражнение для вас, если вы считаете, что оно вам нужно.

...