In FullCalendar v3, there has an option to catch after loading all events.
eventAfterAllRender
It seems removed in v4. As saying here:
Here has a code snippet to prepare a demo calendar in v5.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='/[email protected]/main.min.css' rel='stylesheet' />
<script src='/[email protected]/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
events: [
{
title: 'Business Lunch',
start: '2020-09-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2020-09-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
{
title: 'Conference',
start: '2020-09-18',
end: '2020-09-20'
},
{
title: 'Party',
start: '2020-09-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
groupId: 'availableForMeeting',
start: '2020-09-11T10:00:00',
end: '2020-09-11T16:00:00',
display: 'background'
},
{
groupId: 'availableForMeeting',
start: '2020-09-13T10:00:00',
end: '2020-09-13T16:00:00',
display: 'background'
},
// red areas where no events can be dropped
{
start: '2020-09-24',
end: '2020-09-28',
overlap: false,
display: 'background',
color: '#ff9f89'
},
{
start: '2020-09-06',
end: '2020-09-08',
overlap: false,
display: 'background',
color: '#ff9f89'
}
]
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Codepen:
Is there any option to perform an action after loading all events in v5?
I'm actually using a html loader. It's showing with the page load. But after loading all events, it should be removed.
In FullCalendar v3, there has an option to catch after loading all events.
eventAfterAllRender
It seems removed in v4. As saying here: https://fullcalendar.io/docs/v4/upgrading-from-v3
Here has a code snippet to prepare a demo calendar in v5.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://cdn.jsdelivr/npm/[email protected]/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr/npm/[email protected]/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
events: [
{
title: 'Business Lunch',
start: '2020-09-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2020-09-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
{
title: 'Conference',
start: '2020-09-18',
end: '2020-09-20'
},
{
title: 'Party',
start: '2020-09-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
groupId: 'availableForMeeting',
start: '2020-09-11T10:00:00',
end: '2020-09-11T16:00:00',
display: 'background'
},
{
groupId: 'availableForMeeting',
start: '2020-09-13T10:00:00',
end: '2020-09-13T16:00:00',
display: 'background'
},
// red areas where no events can be dropped
{
start: '2020-09-24',
end: '2020-09-28',
overlap: false,
display: 'background',
color: '#ff9f89'
},
{
start: '2020-09-06',
end: '2020-09-08',
overlap: false,
display: 'background',
color: '#ff9f89'
}
]
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Codepen: https://codepen.io/wetruck/pen/poEXEve
Is there any option to perform an action after loading all events in v5?
I'm actually using a html loader. It's showing with the page load. But after loading all events, it should be removed.
Share Improve this question edited Jan 27, 2021 at 10:08 ADyson 62.2k16 gold badges79 silver badges92 bronze badges asked Jan 24, 2021 at 20:47 EncryptedEncrypted 6961 gold badge10 silver badges24 bronze badges 12- 1 No there isn't. What exactly is it that you need to do after all the events have loaded? – ADyson Commented Jan 24, 2021 at 22:37
- 1 ??? I asked a question. Can you answer it? – ADyson Commented Jan 25, 2021 at 13:17
- 1 No you didn't. In your original question, you already said you need to perform an action after all events have loaded. I was asking what exactly this action is? Just in case maybe there is another way to achieve your overall goal. If we understand what you are trying to do, and why, then maybe we can help you find another solution. – ADyson Commented Jan 25, 2021 at 13:40
- 1 Ok. How does that help your application then? Seems like not a big deal. If it's not there any more, so what? In your example code above, the events are hard-coded, so they'll be loaded pretty much instantly anyway. Are you perhaps getting them from a JSON feed in your real application? – ADyson Commented Jan 25, 2021 at 14:01
- 1 Why is it a big deal, if all you do is log it to the console? That doesn't make sense. Console logging is only for development purposes. You could watch the network tab in the dev tools to see how long the AJAX request takes, but of course that doesn't take into account the rendering time. Do you have any other purpose for doing this, in the real application? Because as I said originally, the answer is no, there isn't a direct replacement for this feature in fullCalendar 5. If you genuinely need a workaround, you'll have to e up with a genuine use case. – ADyson Commented Jan 25, 2021 at 14:15
2 Answers
Reset to default 4For this situation where you have a loader you want to show and hide, please see the loading callback option for something which will do the job - you can use that callback to make a loader show/hide when the AJAX part of the task starts and stops.
e.g.
loading: function( isLoading ) {
if (isLoading == true) {
//show your loader
} else {
//hide your loader
}
}
Unlike the old eventAfterAllRender it starts and stops on the start/end of the AJAX request and doesn't cover the rendering of the events by fullCalendar, but that's normally very fast unless you have an absurd number of events being downloaded for a single time period.
For version 6 I'm using next settings instead eventAfterAllRender
datesSet: function (dateInfo) {
//my custom code
}