CODEWITHSUNDEEP
javascripthtmljquerycssfullcalendar
papalatong.dev
papalatong.dev

Reputation: 13

fullCalendar - Change calendar view based on screen size

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();
    }
  });
  
});

Upvotes: 1

Views: 1018

Answers (1)

Invincibear
Invincibear

Reputation: 159

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;
};

Upvotes: 2

Related Questions