如何在 fullCalendar 中使用 snapDuration?
How to use snapDuration in fullCalendar?
我正在尝试要求 selectable 事件在 fullCalendar 中具有固定的持续时间(例如,您可以每隔两小时预订一辆皮卡车),并且可以开始您的 selection每半小时一次(例如,您可以从 10:00-12:00 或 10:30-12:30 预订)。我正在尝试对前者使用 snapDuration,对后者使用 slotDuration。
我已尝试为日历对象设置 slotDuration 和 snapDuration 属性,但每当我在日历上 select 单元格时,它都会使用 slotDuration。我还寻找了这已经有效的例子,但所有有效的例子都是针对旧版本的 fullCalendar。
我在下面的代码中使用 main.min.js 文件作为核心、交互、daygrid 和 timegrid。我还在 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();
});
当 select 设置一个时间间隔以将事件添加到日历时,我希望它 "snap" 到 snapDuration 值(例如,2 小时),但它仅受 slotDuration 的限制(例如,30 分钟)。我可以添加一些额外的 javascript 来获得我需要的约束,但如果可能的话,我更愿意使用 fullcalendar 本机处理它。
文档中没有明确说明,但似乎 snapDuration
只有在其持续时间小于 slotDuration
值时才会生效。
例如,在您的演示中,如果您将 slotDuration
更改为 4 小时,现在您可以 select 标记时间之间的 2 小时间隔。
slotDuration: '04:00',
snapDuration: '02:00',
我正在尝试要求 selectable 事件在 fullCalendar 中具有固定的持续时间(例如,您可以每隔两小时预订一辆皮卡车),并且可以开始您的 selection每半小时一次(例如,您可以从 10:00-12:00 或 10:30-12:30 预订)。我正在尝试对前者使用 snapDuration,对后者使用 slotDuration。
我已尝试为日历对象设置 slotDuration 和 snapDuration 属性,但每当我在日历上 select 单元格时,它都会使用 slotDuration。我还寻找了这已经有效的例子,但所有有效的例子都是针对旧版本的 fullCalendar。
我在下面的代码中使用 main.min.js 文件作为核心、交互、daygrid 和 timegrid。我还在 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();
});
当 select 设置一个时间间隔以将事件添加到日历时,我希望它 "snap" 到 snapDuration 值(例如,2 小时),但它仅受 slotDuration 的限制(例如,30 分钟)。我可以添加一些额外的 javascript 来获得我需要的约束,但如果可能的话,我更愿意使用 fullcalendar 本机处理它。
文档中没有明确说明,但似乎 snapDuration
只有在其持续时间小于 slotDuration
值时才会生效。
例如,在您的演示中,如果您将 slotDuration
更改为 4 小时,现在您可以 select 标记时间之间的 2 小时间隔。
slotDuration: '04:00',
snapDuration: '02:00',