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

Я пытаюсь требовать, чтобы выбираемые события имели фиксированную продолжительность в 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 ответ

Решение

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

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

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

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

Другие вопросы по тегам