如何获取FullCalendar Scheduler的标准行高？

要解决这个问题，你可以通过两种方式获取资源行的标准高度，再结合资源数量计算出合适的height配置值：

方法一：直接使用内置配置项（如果已设置） #

如果你已经显式配置了resourceRowHeight（这是Scheduler控制资源行高度的官方选项），可以直接读取这个值来计算：

// 初始化日历后获取配置的行高
var rowHeight = calendar.getOption('resourceRowHeight');
// 资源数组长度
var resourceCount = resources.length;
// 加上日历头部的高度（可以通过DOM获取更精确的值）
var headerHeight = document.querySelector('.fc-header-toolbar').offsetHeight;
// 计算总高度
var totalHeight = rowHeight * resourceCount + headerHeight;
// 设置日历高度
calendar.setOption('height', totalHeight);

默认情况下，resourceRowHeight的值是30px（针对v5版本，不同版本可能略有差异），如果没有手动设置，也可以直接用这个默认值，但通过DOM获取会更准确。

方法二：通过DOM元素获取实际渲染的行高 #

如果依赖默认行高或者担心版本差异，最可靠的方式是在日历渲染完成后，直接读取DOM中资源行的实际高度：

1. 等待日历完成渲染：使用rendered事件确保DOM元素已生成
2. 定位资源行元素：选择.fc-resource类的元素（v5版本，旧版本可能类名不同，比如v4的.fc-resource-row）
3. 计算并设置总高度

完整代码示例：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  // 你的资源数组
  var resources = [
    { id: 'a', title: '资源A' },
    { id: 'b', title: '资源B' },
    { id: 'c', title: '资源C' }
  ];

  var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    header: { 
      left: 'prev,next', 
      center: 'title', 
      right: 'timelineMonth,timelineYear' 
    },
    defaultView: 'timelineMonth',
    resourceLabelText:' ', 
    resourceAreaWidth : "10%",
    resources: resources,
    events: [], // 你的事件数组
    // 日历渲染完成后执行计算
    rendered: function() {
      // 获取第一个资源行元素
      var firstResourceRow = document.querySelector('.fc-resource');
      if (firstResourceRow) {
        // 获取行的实际高度（包含内边距等）
        var rowHeight = firstResourceRow.offsetHeight;
        // 获取日历头部高度
        var headerHeight = document.querySelector('.fc-header-toolbar').offsetHeight;
        // 计算总高度：资源行数*行高 + 头部高度
        var totalHeight = rowHeight * resources.length + headerHeight;
        // 更新日历高度
        calendar.setOption('height', totalHeight);
      }
    }
  });

  calendar.render();
});

注意事项 #

• 如果资源数组是动态加载的（比如通过AJAX获取），需要在资源加载完成后再执行高度计算逻辑，而不是依赖rendered事件
• 不同版本的fullCalendar类名可能有变化，要根据你使用的版本调整DOM选择器
• 如果你的日历还有其他额外元素（比如自定义工具栏），记得把这些元素的高度也加入总高度计算

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