FullCalendar - slot duration not working below 1:30 minutes

Question

I was playing along with the codepen version of FullCalendar Scheduler, to test it out if it would suit my needs for a new project, and tried to reduce the slotDuration option to as low as possible.

$(function() {

  $('#calendar').fullCalendar({
    defaultView: 'timelineDay',
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'timelineDay,timelineWeek,timelineMonth'
    },
    resourceLabelText: 'Rooms',
    resources: 'https://fullcalendar.io/demo-resources.json',
    events: [{ id: '1', resourceId: 'a', start: '2018-05-24T06:00:00', end: '2018-05-24T06:04:00', title: 'event 1' }],
    slotDuration: "00:01:00"
  });
});

This was the code that I played along with. In this version, the slots are being displayed in an hourly interval, instead of the minutely one. It doesn't matter what I change slotDuration to, if it is below 00:01:30, it just reverts to an hourly duration.

Is this a bug? The intended use case? Is there any way to reduce the slot duration below the 1 minute 30 seconds treshold? Maybe to a 30 second treshold? If so, how?

I also include the CodePen save if anyone wants to play around with it, maybe a solution comes up.

When I run it in your CodePen with the low duration (under 1:30) I see a warning in the console "slotDuration results in too many cells" generated by fullCalendar, which suggests that this is intended behaviour and meant to stop the table from being un-manageable. If you make your timeline smaller (e.g. make a custom timeline view which only spans a few hours), then it will let you have a smaller slot duration - e.g. I made a timeline of 4 hours duration, and it allowed me to set a slotDuration of 30 seconds successfully. So I think you just have to find a balance which suits you. — ADyson, May 24 '18 at 08:22

ADyson · Accepted Answer · 2018-05-24T09:23:58.547

When I run it in your CodePen with the low duration (under 1:30) I see a warning in the console

slotDuration results in too many cells

generated by fullCalendar, which suggests that this is intended behaviour and meant to stop the table from being un-manageable.

If you make your timeline smaller (e.g. make a custom timeline view which only spans a few hours), then it will let you have a smaller slot duration - e.g. based on your CodePen I made a timeline of 8 hours duration, and it allowed me to set a slotDuration of 30 seconds successfully:

$('#calendar').fullCalendar({
    defaultView: 'timelineHours',
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'timelineHours,timelineWeek,timelineMonth'
    },
    views: {
    timelineHours: {
      type: 'timeline',
      duration: { hours: 8 },
      buttonText: 'hours'
    }
  },
  resourceLabelText: 'Rooms',
  resources: 'https://fullcalendar.io/demo-resources.json',
  events: [{ id: '1', resourceId: 'a', start: '2018-05-24T06:00:00', end: '2018-05-24T06:04:00', title: 'event 1' }],
  slotDuration: "00:00:30",
  slotLabelInterval: "00:05:00"
});

See https://codepen.io/anon/pen/mLYxaV?&editors=001 for a working demo.

Based on very quick experimentation, 8 hours 25 minutes seems to be roughly the maximum timeline size when the slotDuration is 30 seconds, so I chose 8 hours as being a clean rounded number.

Based on this, I think you just have to find a balance which suits you between the length of the timeline and the size of the slots, within the limitations which fullCalendar allows. Perhaps if you check the fullCalendar source code it may be possible to find out if there is a hard (or calculated) limit on the number of cells, and therefore predict what will work for you, without trial and error.

FullCalendar - slot duration not working below 1:30 minutes

1 Answers1