如何在FullCalendar中使用快速素化



我试图在FullCalendar中要求可选的事件为固定持续时间(例如,您可以以两个小时的间隔保留皮卡车,并且可以每半小时开始选择您的选择(例如,您可以从10:00-12:00或10:30-12:30保留它。我试图将Snapduration用于前者,而后者则是slotturation。

我已经尝试为日历对象设置插槽和快照属性,但是每当我在日历上选择单元格时,它都会使用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();
});

选择一个时间间隔以将事件添加到日历中时,我希望它可以"快照"到快照值(例如2小时(,但仅受slotduration的约束(例如30分钟(。我可以添加一些额外的JavaScript来获得所需的约束,但是如果可能

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

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

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

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

相关内容

  • 没有找到相关文章

最新更新