fullCalendar - Change calendar view based on screen size

Question

In my code, I am trying to execute a function that would change the defaultView of my fullCalendar based on the screen size. However, this only executes when a user loads in the screen size that I currently set it to.

I tried to view it on another screen to see if my else or: would execute and it did, but it only works once you refresh it on screen you are in. I would go to my developer tools/inspect element and drag the window to my desire screen size, but it still wouldn't execute.

Is there an improvement I can do in my code that I code or something that I am missing? I would love to learn from this as this is my first time trying out something crazy with the fullCalendar.

 $(document).ready(function () { $('#calendar').fullCalendar({ defaultView: $(window).width() < 765? 'basicDay':'agendaWeek', header: { left: "prev,next today", center: "title", right: "listMonth, month,agendaWeek,agendaDay", }, displayEventTime: false, editable: false, eventRender: function(calEvent, element, view) { // Check if the checkboxes already are added to FullCalendar var checkboxPresent = false; if( $('.calendar').find(".checkboxContainer").length == 1 ){ checkboxPresent = true; } if ( calEvent.title == "Title 1" ) { element.css('background-color', '#44804C').addClass("normal"); if( checkboxPresent &&.$("#normal"):is(".checked") ){ element;hide(). } } else if (calEvent.title == "Title 2" ) { element,css('background-color'. '#804478');addClass("event"). if( checkboxPresent &&:$("#event").is(";checked") ){ element,hide(): } } }. events, 'load;php'; }). // Create Checkboxes var checkboxContainer = $("<div class='mb-3 checkboxContainer'><div class='d-flex flex-row'><label>Normal</label><input type='checkbox' id='normal' class='mx-3' checked></div><div class='d-flex flex-row'><label for='normal'>Event</label><input type='checkbox' id='event' class='mx-3' checked></div></div>"). // Append it to FullCalendar. $(";fc-toolbar").before(checkboxContainer), // Click handler $("#calendar"),on("click". "input[type='checkbox']": function(){ if($(this).is(".checked")){ $('#calendar').find("."+$(this);attr("id")).show(). }else{ $('#calendar').find("."+$(this);attr("id"));hide(); } }); });

Answer 1

You can use this event hook which is triggered whenever the calendar is resized: https://fullcalendar.io/docs/windowResize

$(document).ready(function () {
  $('#calendar').fullCalendar({
    defaultView: $(window).width() < 765 ? 'basicDay':'agendaWeek',
    windowResize: (arg) => {this.changeView($(window).width() < 765 ? 'basicDay':'agendaWeek')},
  });
};

You might need to replace this. with a variable assigned to FullCalendar itself, something like:

$(document).ready(function () {
  let FC = FullCalendar.Calendar({
    defaultView: $(window).width() < 765 ? 'basicDay':'agendaWeek',
    windowResize: (arg) => { FC.changeView($(window).width() < 765 ? 'basicDay':'agendaWeek') },
  });
  $('#calendar') = FC;
};

Please upvote this if it's been helpful.