FullCalendar父容器旋转90度后视图崩溃，求解决方案

直接旋转父元素会干扰FullCalendar的尺寸计算与布局逻辑——它在渲染时依赖元素的原始宽高、定位信息，旋转后的元素clientWidth/clientHeight等属性与视觉呈现不一致，最终导致UI错乱崩溃。以下是两种可行的解决思路：

方法一：先渲染日历，再旋转父元素 #

让FullCalendar在正常布局下完成初始化与渲染，确保它获取到正确的尺寸数据后，再对父元素应用旋转变换。这种方式下，旋转仅作为视觉效果，不会影响日历内部的布局计算。

修改后的JavaScript代码：

$(document).ready(function(){  
  function drawCalendar() {
     var calendarEl = document.getElementById("calendar");
     var calendar = new FullCalendar.Calendar(calendarEl, {
       // 填入你的日历配置选项
     });
     calendar.render();
     
     // 渲染完成后旋转父元素，并调整位置避免偏移
     var bodyElement = document.getElementById("body");  
     bodyElement.style.transform = 'rotate(90deg)';
     bodyElement.style.transformOrigin = 'center center';
     // 旋转后页面宽高互换，调整元素尺寸与位置使其居中
     bodyElement.style.width = window.innerHeight + 'px';
     bodyElement.style.height = window.innerWidth + 'px';
     bodyElement.style.position = 'absolute';
     bodyElement.style.top = '50%';
     bodyElement.style.left = '50%';
     bodyElement.style.marginTop = '-' + (window.innerWidth / 2) + 'px';
     bodyElement.style.marginLeft = '-' + (window.innerHeight / 2) + 'px';
  }             
  drawCalendar();
});

方法二：给日历容器应用反向旋转 #

如果必须提前旋转父元素，可以给日历容器设置反向旋转变换（-90deg），抵消父元素的旋转影响，让日历内部保持正常布局。

修改后的JavaScript代码：

$(document).ready(function(){  
  var bodyElement = document.getElementById("body");  
  bodyElement.style.transform = 'rotate(90deg)';
  bodyElement.style.transformOrigin = 'center center';
  
  // 给日历容器设置反向旋转，并调整尺寸适配视口
  var calendarEl = document.getElementById("calendar");
  calendarEl.style.transform = 'rotate(-90deg)';
  calendarEl.style.transformOrigin = 'center center';
  calendarEl.style.width = window.innerHeight + 'px';
  calendarEl.style.height = window.innerWidth + 'px';
  
  function drawCalendar() {
     var calendar = new FullCalendar.Calendar(calendarEl, {
       // 填入你的日历配置选项
       height: '100%',
       width: '100%'
     });
     calendar.render();
  }             
  drawCalendar();
});

额外注意事项 #

• 避免依赖setTimeout的延迟来触发渲染，不同设备的渲染速度差异可能导致延迟失效，直接调整执行顺序或使用DOM渲染完成事件更可靠。
• 旋转后可设置容器的overflow: hidden，避免出现不必要的滚动条。
• 若使用FullCalendar的响应式特性，旋转后尺寸变化时，可手动调用calendar.render()重新渲染以适配新布局。

内容的提问来源于stack exchange，提问作者Gaurav Tripathi