Develop Reference

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:
I am using:
jQuery JavaScript Library v3.3.1
FullCalendar v3.9.0

It's because your values for minTime and maxTime and 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.

Full calendar highlight only empty / available free slots

I'm using fullcalendar in my application. Here is the part of my working code
$('#calendar').fullCalendar({
timeFormat: 'HH:mm',
views: {
week: {
titleFormat: 'D MMM YYYY',
columnFormat: 'ddd D'
},
day: {
titleFormat: 'D MMMM YYYY',
columnFormat: 'dddd D'
}
},
firstDay: 1,
nowIndicator: true,
weekNumberCalculation: 1,
slotLabelFormat: 'HH:mm',
slotLabelInterval: '00:10',
events: events_arr,
});
which renders the calendar perfectly. The question is, Is there a way to highlight only the available slots to the user? I mean if there is an event today from 10:00 to 11:00, I need to show the slots except the time 10:00 to 11:00.
I referred the documentation, but nothing found. If anybody knows how to highlight the available slot, please share your thoughts.

Fullcalendar format of title of weekview

These days i'm working with the fullcalendar.
I want to change the format of the date in the weekview. I found that many people succeeded with columnFormat: { month: 'ddd', week: 'ddd d/M', day: 'dddd d/M' }, but this one doesn't work for me.
Maybe the raison is i used spanish as the language?
Here is my code of calendar and what i want to do. Thank you.
$('#calendar').fullCalendar({
//defaultView: 'week',
locale: "es",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//defaultDate: '2016-01-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
minTime: "09:30:00",
maxTime: "19:30:00",
slotLabelFormat: "h:mm",
slotDuration: "00:30:00",
slotLabelInterval: "00:30:00",
//columnFormat: { month: "ddd", week: "ddd D", day: "dddd" },
select: function(start, end) {
With this code, i got this one now:
And if i delete the '//' of line of columnFormat, it's like:
Can someone help me? Thank you.

Use full calendar View-Specific Options
views: {
month: {
columnFormat: 'dddd' // set format for month here
},
week: {
columnFormat: 'ddd d/M' // set format for week here
},
day: {
columnFormat: 'dddd' // set format for day here
}
},
remove columnFormat from your code and set views config.

the correct answer is the day number with a capital D as follow:
if you don't use the capital leeter fullcalendar will not give you the good day number
views: {
month: {
editable: false
},
week: {
columnFormat: 'ddd D/M' // set format for week here
},
},

You can use this:
columnFormat: {
month: "ddd",
week: "ddd dd",
day: "dddd"
}

jQuery Full Calendar event title time is wrong

I have a jQuery Full Calendar in my UI and it looks as follows:
The problem is the 10:00-10:00am portion of the event title, which seemingly is added to the element based upon the event startTime and endTime parameters in the JSON which sets up the UI element. Please see my code section for this here:
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
allDayText: 'All Day',
columnFormat: {
month: 'ddd',
week: 'ddd d/M',
day: 'dddd d/M'
},
editable: false,
weekends: true,
timeFormat: 'h:mm-h:mma ',
axisFormat: 'hh:mma',
firstDay: 1,
slotMinutes: 15,
defaultView: 'month',
minTime: '10:00',
maxTime: '17:00',
monthNames: ["January","February","March","April","May","June","July", "August", "September", "October", "November", "December" ],
monthNamesShort: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","nov","Dec"],
dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
dayNamesShort: ["Sun","Mon", "Tue", "Wed", "Thus", "Fri", "Sat"],
buttonText: {
today: "Today",
day: "Day",
week:"Week",
month:"Month"
},
selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
},
events: [
{
id: "3",
title: "My event title",
start: new Date(2014,10,03,10,0),
end: new Date(2014,10,03,12,0),
allDay: false,
backgroundColor : "#7F97FF",
textColor: "white"
},
The problem is in the UI it shows 10:00-10:00am which doesnt make sense. According to my events code it should start at 10,00,00 and end at 12,00,00 so why doesnt the title match this? Can somebody please help me!

Your FullCalendar is not configured correctly since you want the text "Start - End" Time on each event.
timeFormat: 'h:mm-h:mma ', // the output i.e. "10:00-10:00pm"
timeFormat: 'h:mma ', // the output i.e. "10:00pm"
displayEventEnd : true, // it will show on all views (Start - End) in your timeFormat
I've updated your JsFiddle, since you forgot to insert the external sources, I've imported the FullCalendar libraries in order to work.

Double semicolons syntax in javascript

Can someone tell me what double semicolons (;;) in javascript means? I see them in fullcalendar.js.
Thanks.
Here's a snippet of the fullcalendar.js code (taken from CDNJS):
(function($, undefined) {
;;
var defaults = {
// display
defaultView: 'month',
aspectRatio: 1.35,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
weekends: true,
weekNumbers: false,
weekNumberCalculation: 'iso',
weekNumberTitle: 'W',
allDayDefault: true,
ignoreTimezone: true,
// event ajax
lazyFetching: true,
startParam: 'start',
endParam: 'end',
// time formats
titleFormat: {
month: 'MMMM yyyy',
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
day: 'dddd, MMM d, yyyy'
},
columnFormat: {
month: 'ddd',
week: 'ddd M/d',
day: 'dddd M/d'
},
timeFormat: { // for event elements
'': 'h(:mm)t' // default
},
// locale
isRTL: false,
firstDay: 0,
monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
dayNames: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
buttonText: {
prev: "<span class='fc-text-arrow'>‹</span>",
next: "<span class='fc-text-arrow'>›</span>",
prevYear: "<span class='fc-text-arrow'>«</span>",
nextYear: "<span class='fc-text-arrow'>»</span>",
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
// jquery-ui theming
theme: false,
buttonIcons: {
prev: 'circle-triangle-w',
next: 'circle-triangle-e'
},
//selectable: false,
unselectAuto: true,
dropAccept: '*',
handleWindowResize: true
};
...
}

The double semicolons ;; has nothing to do with a for loop in the case of fullcalendar.js (which is now on github).
There is no value to the parsing or execution of the code itself (it is basically innocuous); rather the author has used ;; merely as a sentinel to separate logical chunks of code. It was a weird and esoteric choice to do this, but as it turns out it is very helpful to use CTRL-F to search for ;; to jump from one section to another (for example, the class definitions appear to be separated in this way).
The author could have used comments, for example:
/* ;; */
or
/* CLASSDEF */
etc., but he didn't.
Also confirmed: the JavaScript minifiers I tested remove the ;; so definitely not critical to the code, and not helpful as a sentinel when searching minified code. (but neither are comments because they are stripped out).

Empty “for” loop
for(;;){...} is the same as saying while(1){...}
for(;;) jumps out to mean "infinite loop" more readily than while(1)
facebook's AJAX responses all start with an empty for loop.