Develop Reference

Fullcalendar - Not able to display day names in Month view

I'm using full calendar 3.4 and trying to show day names in the month view, but nothing seems to work.
Works fine in Week view though.
Tried multiple different things and here is my configuration:
$('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
timeFormat: 'H:mm',
firstDay: 1,
views: {
month: {
columnHeaderFormat: 'ddd'
}},
header: {
right: 'prev,next today',
left: 'title',
center: 'month,agendaWeek,agendaDay'
} });
Any ideas how I can make it to work?

What momnet version you are using ? Try this code snippet. I can see day names in the header.
(function($) {
$(document).ready(function() {
var fullcalendar = $('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
timeFormat: 'H:mm',
firstDay: 1,
views: {
month: {
columnHeaderFormat: 'ddd'
}
},
header: {
right: 'prev,next today',
left: 'title',
center: 'month,agendaWeek,agendaDay'
}
});
});
})(jQuery)
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<div id="calendar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

columnFormat: {
month: 'dddd'
}

Too much recursion in FullCalendar

I am getting a
Too much recursion
error when I click on any event or date. Here is some of my code
$('#kt_calendar').fullCalendar({
isRTL: false,
header: {
left: 'prev title next today',
center: '',
right: 'month,listMonth'
},
buttonText: {
month: 'Calendar View',
list: 'List View'
},
editable: false,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
events: events,
dayClick: function (date, jsEvent, view) {
load_day_events(date);
},
eventClick: function (info) {
if (info.id) {
load_event(info);
}
}
});

Change fullCalendar option (i.e. selectable) after click a button

I have a small problem with fullCalender.js. I am trying to change an option of the calendar after click a button, but it´s not working.
That is my js:
var calendar = $('#calendar');
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
selectable: true
});
$('#but').on(click, function(e) {
calendar.fullCalendar('selectable', false);
});
And my html
<div id='calendar'></div>
<button id='but'>
Not selectable
</button>
Here the JSFiddle:
http://jsfiddle.net/CYnJY/874/
What am I doing wrong?
Thank you very much!

Change this $('#but').on(click, function(e) { to $('#but').on('click', function(e) {
Also use calendar.fullCalendar( 'destroy' ) to destroy calendar and create a new calendar.
$('#but').on('click', function(e) {
calendar.fullCalendar( 'destroy' )
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
selectable: false
});
});
Check this http://jsfiddle.net/k4dhm3yL/

How to close previous popovers in fullCalendar?

I am using fullCalendar in my website together with Bootstrap so that everytime I click on a day in month view, there is a popover to add event, just like that in Google Calendar. Here is my code
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
height: height,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function( date, allDay, jsEvent, view ){
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',html : true, container: 'body'
});
$(this).children().popover('show');
}
})
The code should be right before $(this).children().popover({ so that it closes all previously fired popover.
However, exactly, what code should I use to achieve this?
Thank you!

You can remove the popover or more specifically destroy the one created before by saving the reference (which would be a more specific and better approach).
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$('.popover.in').remove(); //<--- Remove the popover
$(this).children().popover('show');
}
});
Fiddle Method1
or
var $calPopOver; //create a variable to save refe
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
if($calPopOver) //if there is something
$calPopOver.popover('destroy'); //then call popover destroy
$calPopOver = $(this).children().popover('show');
}
});
Fiddle Method2

FullCalendar usage with strings

I have just today started looking at FullCalendar,and in the future i would like to use a php scritp to load events from a db, parse the results to be apt for FullCalendar, and call the $('#calendar').fullCalendar(options);
The thing is that if I call the function as follows:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true}
);
All works ok, but if I call it like this:
var stringCal="{
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true}";
$('#calendar').fullCalendar(
stringCal
);
It does not work, any ideas?
Thanks in beforehand, by the way im using FullCalendar 1.5.1

If you have the object like a string then you can use the JSON.parse() function.
var stringCal = "{
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
}";
then
$('#calendar').fullCalendar(JSON.parse(stringCal));

Your second attempt is an object literal but you have quotes around it. This turns it into a string. Remove the quotes like this:
var stringCal={
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
};