Как использовать snapDuration в fullCalendar? - PullRequest
Новая
       15

Как использовать snapDuration в fullCalendar?

0 голосов
/ 22 мая 2019

Я пытаюсь требовать, чтобы выбираемые события имели фиксированную продолжительность в fullCalendar (например, вы можете зарезервировать пикап с двухчасовым интервалом), и можете начинать свой выбор каждые полчаса (например, вы можете зарезервировать его из 10: 00-12: 00 или 10: 30-12: 30). Я пытаюсь использовать snapDuration для первого и slotDuration для второго.

Я попытался установить свойства slotDuration и snapDuration для объекта календаря, но всякий раз, когда я выбираю ячейки в календаре, он использует slotDuration. Я также искал примеры, где это уже работает, но все рабочие были для более старых версий fullCalendar.

Я использую файлы main.min.js для ядра, взаимодействия, дневной сетки и временной сетки для приведенного ниже кода. У меня также есть кодовая ручка настроенная на https://codepen.io/anon/pen/gJXXpw

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'timeGridWeek',
    selectable:true,
    select:function(info){
      alert("I'm hoping that it will snap to two hours before I do other stuff inside this function.");
    },
    slotDuration: '00:30',
    snapDuration: '02:00',
    defaultDate: '2019-05-21',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'Birthday Party',
        start: '2019-05-20T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-05-22'
      }
    ]
  });

  calendar.render();
});

При выборе временного интервала для добавления события в календарь я ожидаю, что оно «привязывается» к значению snapDuration (например, 2 часа), но оно ограничено только slotDuration (например, 30 минут). Я могу добавить дополнительный javascript, чтобы получить необходимое ограничение, но я бы предпочел обработать его полностью с помощью fullcalendar, если это возможно.

1 Ответ

1 голос
/ 24 мая 2019

Это явно не указано в документации, но похоже, что snapDuration вступает в силу только тогда, когда его продолжительность меньше значения slotDuration.

Например, в вашей демонстрации, если вы измените slotDuration на 4 часа, теперь вы можете выбрать 2-часовой интервал между отмеченными временами.

slotDuration: '04:00',
snapDuration: '02:00',

Обновленная демоверсия: https://codepen.io/anon/pen/EzojoE

...