tui-calendar在ExtJS面板中无法正常显示的排查求助

• 延迟日历初始化时机到面板渲染完成后
  ExtJS组件的DOM元素需在afterrender事件触发后才完全生成，此时初始化tui-calendar才能正确获取容器尺寸。将日历初始化逻辑放入面板的afterrender回调中：

  Ext.create('Ext.panel.Panel', {
      renderTo: Ext.getBody(),
      width: 800,
      height: 600,
      layout: 'fit',
      bodyPadding: 0,
      listeners: {
          afterrender: function(panel) {
              const container = panel.body.dom;
              const calendar = new tui.Calendar(container, {
                  defaultView: 'month',
                  usageStatistics: false,
                  month: {
                      startDayOfWeek: 0
                  }
              });
              // 监听面板尺寸变化，同步重绘日历
              panel.on('resize', () => calendar.render());
          }
      }
  });
  

• 确保日历容器填满面板
  给tui-calendar添加全局样式强制占满容器：

  .tui-full-calendar {
      width: 100% !important;
      height: 100% !important;
  }
  

  同时在面板配置中设置bodyPadding: 0，避免默认padding挤压日历空间。

• 显式指定日历初始化尺寸
  若仍有显示问题，可在初始化日历时直接使用面板的当前宽高：

  const calendar = new tui.Calendar(container, {
      defaultView: 'month',
      usageStatistics: false,
      month: {
          startDayOfWeek: 0
      },
      width: panel.getWidth(),
      height: panel.getHeight()
  });
  

核心逻辑是保证第三方组件与ExtJS组件的生命周期同步，同时通过样式和尺寸监听确保日历能自适应容器变化。

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