CODEWITHSUNDEEP
javascriptfullcalendarmomentjsfullcalendar-3
Souvik Kundu
Souvik Kundu

Reputation: 13

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

Upvotes: 1

Views: 1922

Answers (1)

ADyson
ADyson

Reputation: 61783

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.

Upvotes: 6

Related Questions