如何在fullCalendar中使用snapDuration?

时间:2019-05-21 22:23:48

标签: fullcalendar fullcalendar-4

我正在尝试要求在fullCalendar中具有固定持续时间的可选事件(例如,您可以每两小时预订一辆皮卡车),并且可以每半小时开始选择(例如,您可以从10:00-12:00或10:30-12:30)。我正在尝试对前者使用snapDuration,对后者使用slotDuration。

我尝试为日历对象设置slotDuration和snapDuration属性,但是每当我选择日历上的单元格时,它都会使用slotDuration。我还寻找了一些已经可以使用的示例,但是所有可用的示例都适用于fullCalendar的旧版本。

我将main.min.js文件用于以下代码的核心,交互,daygrid和timegrid。我还在https://codepen.io/anon/pen/gJXXpw

处设置了一个Codepen
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 个答案:

答案 0 :(得分:1)

文档中没有明确说明,但是看来snapDuration仅在其持续时间小于slotDuration值时才生效。

例如,在演示中,如果将slotDuration更改为4小时,则可以在标记的时间之间选择2小时间隔。

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

更新后的演示:https://codepen.io/anon/pen/EzojoE