how to stay on the last view after reloading the page (fullcalendar)

Question

I use fullcalendar in laravel 5.6. My default view is the month view, and I want to stay on the last view after reloading the page. example: if I switch to the week view, I want to be able to stay on this view week after refreshing the page and not return to the month view. Thank you for helping me if you have a solution.

Answer 1

It is really simple, just add the following lines to your .fullCalendar initialization:

viewRender: function (view, element) {
  // when the view changes, we update our localStorage value with the new view name
   localStorage.setItem("fcDefaultView", view.name);
},

    defaultView: (localStorage.getItem("fcDefaultView") !== null ? localStorage.getItem("fcDefaultView") : "month"),

Rgds. Senad

Answer 2

For V5:

var iv = localStorage.getItem("fcDefaultView") || 'timeGridWeek'
var id = localStorage.getItem("fcDefaultDate") || new Date
var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: iv,
    initialDate: id,
    datesSet: function (dateInfo) {
        localStorage.setItem("fcDefaultView", dateInfo.view.type);
        localStorage.setItem("fcDefaultDate", dateInfo.startStr);
    },
})
calendar.render()

Answer 3

use jquery cookie library to store current view using the viewRender event and then use the follwing method to switch to it,

 $('#calendar').fullCalendar( 'changeView', 'basicDay'  );

here is the reference for viewRender event which is triggered while you switch among views. https://fullcalendar.io/docs/viewRender

Answer 4

For V4:

viewSkeletonRender: function (view, element) {
   // when the view changes, we update our localStorage value with the new view name
   localStorage.setItem("fcDefaultView", view.view.type);
},
defaultView: (localStorage.getItem("fcDefaultView") !== null ? localStorage.getItem("fcDefaultView") : "month"),

Answer 5

I had problems with localStorage. For me it only works with localhost, but not on a remote server.

Instead I use ajax and php to store the variable in $_SESSION. Note that the startStr variable returns the first box date, which is the previous month if the first day of the month is not a Sunday. This is corrected for in the php code, by adding 7 days.

Remember to include a session_start(); at the top of your main file.

PHP & Javascript in main file:

var calendarEl = document.getElementById('calendar');

<?php 
if(isset($_SESSION['startdate'])) echo "var id = '".$_SESSION['startdate']."';";
else echo "var id = new Date;"
?> 

var calendar = new FullCalendar.Calendar(calendarEl, {

  initialDate: id,
  datesSet: function (dateInfo) {
    $.post("./setdate.php", {startdate : dateInfo.startStr}); // posts current view date for storage in $_SESSION
  },
  .....

PHP code (setdate.php):

<?php
session_start();
$date = strtotime(substr($_POST['startdate'], 0, 10));
$date = strtotime("+7 day", $date); // the datestring relates to the first box, which is usually the previous month, so add a week to get to correct month
$_SESSION['startdate'] = date("Y-m-d", $date);
?>

My example only stores the month, not the view, but the code can easily be extended to include that.