FullCalendar V5在Asp.net Core页面加载时渲染异常求助

问题原因 #

• Kendo UI TabStrip的未激活标签页默认通过display: none隐藏，FullCalendar初始化时，容器处于隐藏状态，无法正确读取容器宽高（隐藏元素的offsetWidth/offsetHeight为0），导致日历只能以最小尺寸渲染。
• 点击月份按钮或手动调用render()时，容器已处于显示状态，FullCalendar能正确获取容器尺寸，因此渲染恢复正常。

解决/规避方案 #

方案1：在TabStrip标签激活时初始化FullCalendar #

将FullCalendar的初始化逻辑绑定到Kendo TabStrip的activate事件，确保容器显示后再初始化日历，从根源避免尺寸计算问题：

// 初始化Kendo TabStrip
$("#tabstrip").kendoTabStrip({
  activate: function(e) {
    const calendarContainer = e.item.find("#calendar")[0];
    // 仅在首次激活标签时初始化日历
    if (calendarContainer && !calendarContainer._hasInit) {
      const calendar = new FullCalendar.Calendar(calendarContainer, {
        initialView: 'dayGridMonth',
        events: function(info, successCallback) {
          axios.get('/api/Calendar/GetEvents')
            .then(res => successCallback(res.data));
        },
        // 其他日历配置项...
      });
      calendar.render();
      calendarContainer._hasInit = true;
    }
  }
});

方案2：提前初始化，标签激活时强制更新尺寸 #

如果需要预加载日历数据，可以提前初始化日历，再在TabStrip激活时调用updateSize()强制重新计算容器尺寸：

// 提前初始化日历（容器此时可能处于隐藏状态）
const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  initialView: 'dayGridMonth',
  events: '/api/Calendar/GetEvents',
  // 其他配置项...
});
calendar.render();

// 绑定TabStrip激活事件
$("#tabstrip").kendoTabStrip({
  activate: function(e) {
    if (e.item.find("#calendar").length > 0) {
      calendar.updateSize();
    }
  }
});

方案3：给日历容器设置显式初始尺寸（临时规避） #

如果事件监听方式不适用，可以给日历容器设置固定宽高样式，确保初始化时能获取到有效尺寸：

#calendar {
  width: 100%;
  height: 600px;
  min-height: 600px;
}

注意：该方案灵活性较差，容器需要自适应布局时不推荐使用。

原场景简化代码示例 #

<!-- Kendo TabStrip结构 -->
<div id="tabstrip">
  <ul>
    <li>日程日历</li>
    <li>其他功能</li>
  </ul>
  <div>
    <!-- FullCalendar容器 -->
    <div id="calendar"></div>
  </div>
  <div>
    <!-- 其他标签页内容 -->
  </div>
</div>

异常渲染截图 #

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