Angular 15中FullCalendar TimeGridWeek视图详情适配问题求助

你的需求完全可以实现，以下是具体修复步骤：

一、让事件行自动适配内容高度 #

FullCalendar默认事件高度固定，要让它根据内容撑开，需调整配置和样式：

1. 修改FullCalendar配置，启用自定义事件渲染并关闭固定高度模式：

calendarOptions: CalendarOptions = {
  // 保留原有视图、日期等配置
  eventDisplay: 'list-item', // 切换为列表项模式，允许高度自适应
  eventContent: this.renderCustomEvent.bind(this), // 绑定自定义渲染函数
  // 移除eventHeight配置（如果之前设置过）
};

2. 实现自定义事件内容渲染，展示姓名、员工ID等额外信息：

renderCustomEvent(eventInfo: EventContentArg) {
  return {
    html: `
      <div class="event-details">
        <div>${eventInfo.event.title}</div>
        <div>姓名：${eventInfo.event.extendedProps.name}</div>
        <div>员工ID：${eventInfo.event.extendedProps.empId}</div>
      </div>
    `
  };
}

3. 添加CSS样式，确保内容不截断：

/* 覆盖FullCalendar默认固定高度 */
.fc-event {
  height: auto !important;
  padding: 5px 8px;
}

/* 自定义事件内容样式 */
.event-details {
  line-height: 1.5;
  color: #fff; /* 根据背景色调整文字颜色 */
}

/* 让事件框架和背景色铺满自适应高度 */
.fc-event-main-frame,
.fc-event-bg {
  height: 100% !important;
}

二、修复背景色匹配问题 #

上面的CSS中已经包含了背景色修复：通过强制设置.fc-event-bg的高度为100%，让背景色完全覆盖自适应后的事件行高度，解决背景色不匹配的问题。

额外注意点 #

• 确保事件数据通过extendedProps携带额外信息，比如：

events: EventInput[] = [
  {
    title: '项目评审',
    start: '2024-05-21T10:00:00',
    end: '2024-05-21T12:00:00',
    extendedProps: {
      name: '李四',
      empId: 'EMP002'
    },
    backgroundColor: '#257eaf'
  }
];

• 若使用SCSS，建议用更具体的选择器替代!important，避免样式冲突：

::ng-deep .fc-timeGridWeek-view .fc-event {
  height: auto;
  .fc-event-main-frame,
  .fc-event-bg {
    height: 100%;
  }
}

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