Angular应用中FullCalendar日程块底部自定义CSS额外信息实现方法

要实现截图中日程块底部显示自定义样式的额外信息（如蓝色文本的16 CALLS SALE 8），可以通过FullCalendar的eventContent钩子结合自定义CSS完成，步骤如下：

1. 给事件添加自定义字段 #

先在事件数据中加入需要展示的自定义信息字段，比如通话数和销售数：

calendarOptions = {
  // 其他基础配置...
  events: [
    {
      title: '客户拜访',
      start: '2024-05-20',
      callCount: 16, // 自定义字段：通话数量
      saleCount: 8   // 自定义字段：销售数量
    },
    // 更多事件数据...
  ]
};

2. 使用eventContent自定义日程块内容 #

通过eventContent钩子重写日程块的HTML结构，在原有内容下方插入额外信息元素：

import { EventContentArg } from '@fullcalendar/angular';

// 在calendarOptions中添加该配置
eventContent: (arg: EventContentArg) => {
  // 创建额外信息的DOM元素
  const extraInfoEl = document.createElement('div');
  extraInfoEl.className = 'event-extra';
  // 从事件的extendedProps中读取自定义字段
  extraInfoEl.textContent = `${arg.event.extendedProps.callCount} CALLS SALE ${arg.event.extendedProps.saleCount}`;

  // 组合原有日程内容和额外信息
  const eventContainer = document.createElement('div');
  eventContainer.appendChild(arg.innerHTML);
  eventContainer.appendChild(extraInfoEl);

  return { domNodes: [eventContainer] };
}

3. 编写自定义CSS样式 #

在组件的CSS文件中添加样式，将额外信息固定在日程块底部并设置样式：

/* 确保日程块为相对定位，让内部绝对定位元素生效 */
.fc-event {
  position: relative !important;
  padding-bottom: 22px !important; /* 为底部信息预留空间 */
}

/* 自定义额外信息的样式 */
.event-extra {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  font-size: 12px;
  color: #0066cc; /* 蓝色文本 */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

关键说明 #

• FullCalendar会将所有非标准事件字段存入event.extendedProps，所以我们从这里读取自定义的callCount和saleCount。
• 通过绝对定位将额外信息固定在日程块底部，同时调整日程块的内边距避免内容重叠。
• 如果需要更复杂的HTML结构，可以直接在eventContent中拼接HTML字符串，或者结合Angular模板渲染逻辑实现。

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