Search code examples
javascriptfullcalendarmomentjsfullcalendar-3

Uncaught TypeError: Cannot read property 'top' of null in fullCalendar

For fullCalendar I have written the code below: 

$('#mycalendar').fullCalendar(
            {
                allDaySlot:false,
                slotDuration: '00:30:00' ,  
                //slotMinutes: '120',           
                lang: currentLangCode,
                minTime: '4:00am',
                maxTime: '24:00pm',
                slotEventOverlap: true,
                slotLabelFormat:'h(:mm)a',
                showAgendaButton: true,
                columnFormat: { month: 'ddd', week: 'ddd M/D', day: 'ddd M/D' },
                timeFormat: 'H:mm',
                defaultView: 'listWeek',
                eventLimit: true,
                theme:false,
                editable: true,
                contentHeight:'auto',
                weekends: false ,
                //timezoneParam: 'America/Los_Angeles',
                //ignoreTimezone: false,
                header:
                {
                    left: 'prev,next today',
                    center: 'title',
                    // right: 'agendaWeek'
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                views: {
                    listDay: { buttonText: 'Day' },
                    listWeek: { buttonText: 'Week' },
                    month: {
                        columnFormat: 'ddd'
                    },
                    agenda: {
                        columnFormat: 'ddd'
                    }
                },

I am getting below error for agendaWeek and agendaDay:

enter image description here

I am using:

jQuery JavaScript Library v3.3.1 FullCalendar v3.9.0

Solution

  • It's because your values for minTime and maxTime are invalid and not parseable as momentJS objects. fullCalendar relies on momentJS to do its date and time processing. Because of this the calendar does not know where to start the display (and thus where the "top" of the calendar is, hence the error message).

    Set them to

    minTime: '04:00',
maxTime: '24:00',

    instead.

    See here for a working demo: http://jsfiddle.net/sbxpv25p/581/

    See http://momentjs.com/docs/#/parsing/string/ for a list of valid date/time formats which momentJS can recognise. You'll see that "am" and "pm" are not recognised items. In any case they are also unnecessary since you're already specifying the time in 24hr format.