How to keep a persistent month view using fullcalendar.io after refreshing the page.
Are you trying to keep fullcalendar on the same month or date after you refresh? So were we, but couldn’t find anything online, so made our own tutorial with full code examples.
First, we need to get an instance of fullcalendar.io working in a .html document. We will set up an initial .html document that gets fullcalendar.io, rendering the calendar to the screen. We are using CDNs to save time and adding no additional styles other than Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sir-Dev how to keep month view persistent in fullcalendar.io after refresh</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
<div class="container">
<div id='calendar'></div>
</div>
</body>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: [{
title: 'April Event Name',
start: '2023-04-19'
},
{
title: 'March Event Name',
start: '2023-03-21'
}
],
});
});
</script>
</html>
The calendar is rendered within the
<div id=’calendar’></div>
We have set two events up on separate months
title: 'April Event Name', start: '2023-04-19'
title: 'March Event Name', start: '2023-03-21'
When viewing the event from the previous month and refreshing the page, you will see we are shown the current month.
Sometimes this behaviour is not desired by the user, so we will save the current month being viewed, save it in session data and give FullCalender this date on refresh to render the calendar back to the month we were looking at.
We need to figure out what month we are looking at to save this data.
var currentMonth = $('#calendar').fullCalendar('getDate');
This gives us the current date we are viewing; for example, if we were on September 2022 the variable will be set to:
Thu Sep 01 2022 00:00:00 GMT+0000
This then needs to be saved to session data so that after a refresh, we have the data stored on the user’s browser using sessionStorage . We are going to assign it to the variable userCurrent
sessionStorage.userCurrent = currentMonth;
This is great; we are saving the month we are viewing, but this happens when the calendar initially renders; we will only ever save the initial month and won’t save where we move to on the calendar. How do we save what month the user has navigated to?
We must save this variable at a fixed interval when on the page. We have found that 1-second works well.
To do this, we will use the setInterval() method, offered on the Window and Worker interfaces; this repeatedly calls the code we have written with a fixed time delay between each call; for this will be 1 second using 1000
var intervalId = window.setInterval(function(){
//SAVE THE CURRENT DATE TO THE SESSION
}, 1000);
Adding all the code together, we get
var intervalId = window.setInterval(function(){
var currentMonth = $('#calendar').fullCalendar('getDate');
sessionStorage.userCurrent = currentMonth;
}, 1000);
We are now getting the current calendar date every second, so when we view any other months, we will know where we left off if navigating away from this page.
However, when returning to the page, you will notice that we must return to the date we left off on.
This is due to us not calling the sessionStorage.userCurrent passing it back to the FullCalander.
Let’s grab the variable from the session storage with the following code and assign it to the variable loadDate.
var loadDate = sessionStorage.userCurrent;
Then within the FullCalendar.io element, we can add options and callbacks
$('#calendar').fullCalendar({
// put your options and callbacks here
});
We can give Fullcalender.io the last date to load when the calendar initialises again.
$('#calendar').fullCalendar({
defaultDate: loadDate,
events: [{
title: 'April Event Name',
start: '2023-04-19'
},
{
title: 'March Event Name',
start: '2023-03-21'
}
],
});
The full working code is here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sir-Dev how to keep month view persistent in fullcalendar.io after refresh</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
<div class="container">
<div id='calendar'></div>
</div>
</body>
<script>
$(document).ready(function() {
// script to set sessionStroage for current date the calander is on every second
var intervalId = window.setInterval(function() {
var currentMonth = $('#calendar').fullCalendar('getDate');
sessionStorage.userCurrent = currentMonth;
}, 1000);
var loadDate = sessionStorage.userCurrent;
$('#calendar').fullCalendar({
defaultDate: loadDate,
events: [{
title: 'April Event Name',
start: '2023-04-19'
},
{
title: 'March Event Name',
start: '2023-03-21'
}
],
});
});
</script>
</html>