javascript - Full Calendar Time interval Should be 1 hour and start from 6:30

Question

I tried this implementation Full Calendar Implementation.

    $("#available_classes_calendar").fullCalendar({
        header: {
             left   : 'prev,next',
             center : 'title'
            },
        defaultView: 'agendaWeek',
        views:{
            agenda:{
                allDaySlot: false,
                minTime: "06:30:00",
                maxTime: "24:00:00",
                slotDuration: "00:60:00"
            }
        }
    });

In this all-day column should be start from 6:30am and interval slot should be 1 hour.

So all-days column should look like:

6:30 am 7:30 am 8:30 am . . . 11:30 pm

I tried lots of solution but not able to achieve this.

Please let me know if any other info is required to solve this.

Thanks

Answer 1

Your issue is the place where you've put your options. It should be

$("#available_classes_calendar").fullCalendar({
    header: {
         left   : 'prev,next',
         center : 'title'
        },
    defaultView: 'agendaWeek',
    allDaySlot: false,
    minTime: "06:30:00",
    maxTime: "24:00:00",
    slotDuration: "06:00:01"
});

Regarding the display of 06:30, 07:30 and so on, on the vertical axis, you need to set the slotDuration: "06:30:01". Take a look at this jsfiddle.

The most important thing to notice is the 01 second on the slotDuration. Without this, you won't be able to display half hours.

---

Explanation as to why you need the "+01" second:

FullCalendar supports axis with half hours or whatever you want, but you need to do this quirky thing. The reason behind this is in the source code itself (view source for FullCalendar 2.3.1), from line 5714 to 5719:

((!slotNormal || !minutes) ? // if irregular slot duration, or on the hour, then display the time
    '<span>' + // for matchCellWidths
        htmlEscape(slotDate.format(this.axisFormat)) +
    '</span>' :
    ''

Now, $slotNormal is defined on line 5701 and is:

var slotNormal = this.slotDuration.asMinutes() % 15 === 0;

So, if you have a 30 minute slot time, the condition will be false and FullCalendar won't display the time. This subject is covered in depth in this answer.

One additional remark: You're using FullCalendar v1.5.4 which is really old and I advice you to upgrade. If you do upgrade, remember that FullCalendar now relies on momentjs.