咨询FullCalendar月视图插件两类功能：事件按时长定高度、多日事件非横条显示

1. 月视图事件按时长显示高度的插件 #

目前FullCalendar的官方插件库以及主流第三方生态中，没有现成插件能实现月视图单元格内事件根据时长匹配高度（和周视图一致的效果）。

原因在于月视图的核心设计目标是在有限空间内紧凑展示单日/多日事件，原生并未为每个单元格提供基于时间轴的高度计算逻辑。要实现这个效果需要深度修改月视图的渲染机制：包括为每个单元格建立时间刻度、动态计算事件高度、处理事件重叠布局等，这类定制化需求通常需要自行开发，而非依赖现有插件。

2. 多日事件不显示为跨日期水平条的实现方案 #

不需要专门插件，通过FullCalendar的原生API即可实现，常见思路有两种：

方案一：拆分多日事件为单日事件 #

在事件数据加载阶段，将跨多个日期的事件拆分成每个对应日期的独立事件，示例代码如下：

// 假设原始多日事件
const originalEvents = [
  {
    title: "跨3天会议",
    start: "2024-05-20",
    end: "2024-05-23",
    allDay: true
  }
];

// 拆分函数
function splitMultiDayEvents(events) {
  const splitEvents = [];
  events.forEach(event => {
    if (!event.end) return splitEvents.push(event);
    const startDate = new Date(event.start);
    const endDate = new Date(event.end);
    for (let d = new Date(startDate); d < endDate; d.setDate(d.getDate() + 1)) {
      splitEvents.push({
        ...event,
        start: new Date(d).toISOString().split('T')[0],
        end: new Date(d.setDate(d.getDate() + 1)).toISOString().split('T')[0],
        title: `${event.title}（当日）`
      });
    }
  });
  return splitEvents;
}

// 初始化日历
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    events: splitMultiDayEvents(originalEvents),
    // 其他配置
  });
  calendar.render();
});

方案二：自定义事件渲染隐藏跨日期样式 #

利用eventDidMount钩子修改事件DOM，隐藏跨日期的连线和扩展样式，强制事件在单个单元格内显示：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    events: [
      {
        title: "跨3天会议",
        start: "2024-05-20",
        end: "2024-05-23",
        allDay: true
      }
    ],
    eventDidMount: function(info) {
      // 移除跨日期事件的扩展样式
      info.el.classList.remove('fc-event-mirror', 'fc-event-past', 'fc-event-future');
      // 隐藏跨日期的连线元素
      const connectors = info.el.parentNode.querySelectorAll('.fc-event-connector');
      connectors.forEach(conn => conn.style.display = 'none');
      // 强制事件宽度适配单个单元格
      info.el.style.width = '90%';
    },
    // 其他配置
  });
  calendar.render();
});

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