如何在slotDuration为1天的日视图中正常展示半天事件

核心思路是优先不修改slotDuration: {days: 1}的基础配置，避免时间槽翻倍导致的表头冗余问题，具体实现方案如下：

• 方案1：自定义事件渲染（最适配简洁视图需求）
  不需要调整时间槽配置，仅需要给半天事件增加上/下午的标识属性，通过事件渲染钩子调整事件的展示占比即可：

  // 日历配置项
  slotDuration: {days: 1},
  eventDidMount: function(info) {
    // 假设自定义extendedProps中的halfDay字段标识上下午：am为上午，pm为下午
    const halfDayType = info.event.extendedProps.halfDay
    if(halfDayType) {
      info.el.style.width = '50%'
      info.el.style[halfDayType === 'am' ? 'float' : 'marginLeft'] = 'left'
    }
  }
  

  该方案完全保留1天槽的简洁表头，不会出现重复的星期、时间标识，可直接实现上下午半天事件并排展示的效果。
• 方案2：调整slotDuration为12小时的同时自定义槽头格式
  如果需要明确展示上下午时段标识，可在将slotDuration改为12小时后，通过自定义槽头格式隐藏重复内容：

  slotDuration: {hours: 12},
  // 自定义槽头显示规则，避免重复展示星期、日期
  slotLabelFormat: {
    hour12: true,
    hour: '2-digit',
    meridiem: 'short'
  },
  // 隐藏重复的日期行，仅保留顶部一次日期展示
  slotLabelInterval: {days: 1}
  

  配置后时间槽仅保留时段标识，不会出现重复的星期名称。

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