Full Calendar change view based on window size

Question

I am using Full Calendar for my web-app. When viewing on a computer, I want it to display the entire month (dayGridMonth). But when viewing on a mobile device, I want it to display just the day (dayGridDay).

What about my code is not allowing this to happen?

document.addEventListener('DOMContentLoaded', function() {
   var calendarEl = document.getElementById('calendar');
   var calendar = new FullCalendar.Calendar(calendarEl, {
      events: 'fetchSchedule.php',
      selectable: false,
   });

   $(window).resize(function() {
      if(window.innerWidth < 800){
      $('#calendar').fullCalendar('changeView', 'dayGridDay');
      } else {
      $('#calendar').fullCalendar('changeView', 'dayGridMonth');
      }
   });

   calendar.render();
});
    

Answer 1

Use windowResize trigger.

function( arg: { view } )

The calendar has automatically adapted to the new size when windowResize is triggered.

$('#calendar').fullCalendar({
    windowResize: (arg) => { // your code}
  });