CODEWITHSUNDEEP
jquerycssipadfullcalendar
FunkyMonk91
FunkyMonk91

Reputation: 1481

Full Calendar Resize on Orientation Change

I am working with full calendar and I am having some trouble getting it to resize when the orientation of my device (iPad) changes.

The container re sizes fine, but the calendar does not. Any help, advice or tips would be greatly appreciated! Thanks!

JavaScript

//When the orientation changes
window.addEventListener("orientationchange", function() {
    //Resize the container first
    $("#calendarWrapper").css({
      width: $(document).width() * 0.8
    }); 

    //Resize the calendar
    $("#calendar").fullCalendar("windowResize");
    //$("#calendar").fullCalendar("render"); //Doesn't work either

    //Position the container to be in the middle
    $("#calendarWrapper").css({
      marginLeft: $("#calendar").width() / 2 * -1,
      marginTop:  $("#calendar").height() / 2 * -1
    }); 
}, false);

Initial CSS

#calendarWrapper{
  position:absolute;
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 50%;
  left: 50%;
  margin-left: 0px;
  margin-top: 0px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #afafaf;
  background-color: #fff;
  z-index: 1001;
  opacity: 1;
}

Upvotes: 3

Views: 1968

Answers (1)

FunkyMonk91
FunkyMonk91

Reputation: 1481

Found my issue!

I was manually setting the size of my calendar 

window.addEventListener("orientationchange", function() {
    //Resize container and calendar
    $("#calendarWrapper, #calendar").css({
      width: $(document).width() * 0.8
    }); 
    //Re render calendar so it keeps aspect ratio
    $("#calendar").fullCalendar("render");

    //Move container to center of page 
    $("#calendarWrapper").css({
      marginLeft: $("#calendar").width() / 2 * -1,
      marginTop:  $("#calendar").height() / 2 * -1
    });
}, false);

Upvotes: 1

Related Questions