Как использовать 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