Jquery 更改方向时调整完整日历的大小

我正在使用完整的日历，当我的设备（iPad）的方向改变时，我很难调整它的大小

容器可以重新调整大小，但日历不能。任何帮助、建议或提示都将不胜感激！谢谢

JavaScript 初始CSS 找到我的问题了

我正在手动设置日历的大小

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

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

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