Develop Reference

full calendar is not showing properly untill i click on any action button like(Month,week,day)

When i resize my window it showing properly, but on refresh of my page issue is come again and I click again on button to see proper calendar.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('leave_calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
height: 650,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
navLinks: true,
nowIndicator: true,
selectable: true,
dayMaxEvents: true,
events: [
{title: 'Frank',
start: '2021-09-17',
end: '2021-09-21',
},
]
});
calendar.render()
});
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.9.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.9.0/main.min.css">
<div id='leave_calendar' class="leave-calendar"></div>

I moved the calendar to another empty page and simply include it in the PHP file its working properly, so there is only a render issue. Fullcalendar required dedicated page to render properly.

Full calendar event limit text on click event

I am using https://fullcalendar.io/ calendar i have used eventLimitText : "more" i want the date on click of eventLimitText
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
timeFormat: 'H:mm',
dayClick: function(date, jsEvent, view) {
alert('Clicked on: ' + date.format());
}
})

I have solved this problem by reading this documentation
Here is the code
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
timeFormat: 'H:mm',
eventLimitClick: function(cellInfo, jsEvent, view) {
var from_date_val = JSON.stringify(cellInfo.date);
var from_to_val = JSON.stringify(cellInfo.date);
},
});

HTML Content doesnt render in popover content in fullcalendar

I am following a this codepen Here to implement popover in my fullcalendar. But the html does not render in popover.content. Instead it just displays it as string. Here is my implementation.
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: event_array,
eventRender: function (calEvent, $el) {
$el.popover({
title: calEvent.title,
content: "<div><b>Example popover</b> - content</div>",
start: calEvent.start,
end: calEvent.end,
trigger: "hover",
placement: "top",
container: "body"
});
}
})

Pretty sure this will have been asked before, but you can simply set the option
html: true
in your popover options to have your content rendered as HTML.
See the documentation for details.

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
};