如何调整PHP插件FullCalendar每日日程框的高度？

当然可以调整每日日程框的高度啦！FullCalendar提供了几种灵活的方式来实现，不管是全局统一设置还是针对特定视图/事件自定义，都能轻松搞定。下面分两种常用方法给你详细说明：

如果是要调整单个事件日程框的高度，最直接的方式就是在初始化Calendar时配置eventHeight参数：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的其他配置项（比如视图、数据源等）
    eventHeight: 50, // 固定设置每个事件的高度为50px
    // 要是想让事件高度自适应内容，可以改成'auto'
    // eventHeight: 'auto'
  });
  calendar.render();
});

这个参数支持固定像素值或者'auto'，设置为'auto'时，事件框会根据内部内容的高度自动调整，很适合内容长度不固定的场景。

如果需要调整的是日期单元格本身的高度，或者要针对不同视图（比如月视图、日视图）做差异化设置，用CSS样式会更灵活：

• 调整月视图中每日单元格的最小高度：

.fc-daygrid-day-frame {
  min-height: 120px; /* 根据需求修改数值 */
}

• 强制覆盖所有事件框的高度：

.fc-event {
  height: 60px !important;
  min-height: 60px;
}

• 调整日/周视图中时间槽的高度（也就是每日里的时间段单元格）：

.fc-timegrid-slot {
  height: 80px; /* 修改这个数值来调整时间槽高度 */
}

如果需要根据事件的具体内容动态改变高度，可以结合eventRender回调函数来实现：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他配置...
    eventRender: function(info) {
      // 获取事件标题的高度，加上额外内边距
      var titleHeight = info.el.querySelector('.fc-event-title').offsetHeight;
      info.el.style.height = (titleHeight + 15) + 'px';
    }
  });
  calendar.render();
});

注意：如果你是用PHP封装的FullCalendar插件，只要找到页面中初始化Calendar的JS代码位置，把上述配置加进去就行；如果是插件自带的配置项，也可以看看插件文档有没有对应的参数可以直接设置，实在不行就加自定义CSS到你的页面样式表里~

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