Angular中FullCalendar同起止时间多事件显示UI异常求助

针对你遇到的同起止时间多事件显示错乱问题，给你几个实操的解决方向：

• 明确配置事件重叠与展示模式
  FullCalendar默认支持事件堆叠，但有时候默认配置可能因版本或集成方式出现异常，直接在日历配置中明确开启重叠并指定展示模式：

  import { CalendarOptions } from '@fullcalendar/angular';
  
  export class YourCalendarComponent {
    calendarOptions: CalendarOptions = {
      // 你的其他配置（比如plugins、headerToolbar等）
      eventOverlap: true, // 允许事件相互重叠
      slotEventOverlap: true, // 确保时间槽内的事件允许重叠
      eventDisplay: 'block', // 强制事件以块级元素展示，保证布局稳定
    };
  }
  

• 自定义CSS强制调整事件布局
  如果默认的堆叠宽度计算异常，直接通过CSS控制同时间段事件的宽度和排列：

  /* 针对时间网格视图（日/周视图）的事件 */
  ::ng-deep .fc-timeGrid-event {
    width: 48% !important;
    margin: 0 1% !important;
    float: left;
  }
  
  /* 针对月视图的事件 */
  ::ng-deep .fc-dayGrid-event {
    max-width: 45% !important;
    margin: 2px auto !important;
  }
  

  注：Angular 12中使用::ng-deep穿透组件样式隔离，确保样式能作用到FullCalendar内部元素。

• 检查事件数据的时间格式正确性
  确认你的事件起止时间是标准的Date对象或ISO格式字符串，避免因时间解析错误导致的布局偏移。比如：

  // 正确的事件数据示例
  events: [
    {
      title: '事件1',
      start: new Date(2024, 5, 1, 6, 0), // 6:00
      end: new Date(2024, 5, 1, 9, 0) // 9:00
    },
    {
      title: '事件2',
      start: '2024-06-01T06:00:00',
      end: '2024-06-01T09:00:00'
    }
  ]
  

• 自定义事件渲染模板
  如果上述方法都无效，直接通过eventContent自定义事件的DOM结构，完全控制展示：

  calendarOptions: CalendarOptions = {
    // 其他配置
    eventContent: (arg) => {
      return {
        html: `<div class="custom-calendar-event">
                  <span>${arg.event.title}</span>
               </div>`
      };
    }
  };
  

  然后给.custom-calendar-event设置合适的宽度、边距等样式即可。

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