3

フルカレンダーを使用していますが、デバイス（iPad）の向きが変わったときにサイズを変更するのに問題があります。

コンテナのサイズは適切に変更されますが、カレンダーは適切ではありません。ヘルプ、アドバイス、ヒントをいただければ幸いです。ありがとう！

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

初期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;
}
4

1 に答える 1

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);
于 2013-02-25T21:51:37.420 に答える