Angular中FullCalendar自定义竖排省略号按钮及下拉菜单实现问询

一、为什么plus-square能生效，其他图标不行？ #

FullCalendar的默认图标系统基于预定义CSS类实现，它内置了部分Font Awesome图标的映射（比如plus-square对应fc-icon-plus-square类），这些类会自动加载对应图标资源。而竖排省略号这类不在预定义列表里的图标，无法直接通过icon: 'xxx'调用，必须手动自定义样式。

二、添加竖排省略号自定义按钮 #

提供两种适配不同场景的方案：

方案1：纯CSS实现（无需额外图标库） #

1. 配置自定义按钮，清空默认文本并绑定点击事件：

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

calendarOptions: CalendarOptions = {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'ellipsisButton' // 与customButtons中的key保持一致
  },
  customButtons: {
    ellipsisButton: {
      text: '', // 清空文本，用CSS生成图标
      click: this.handleEllipsisClick.bind(this)
    }
  }
};

handleEllipsisClick() {
  this.isDropdownOpen = !this.isDropdownOpen;
}

2. 在组件CSS中添加样式，用伪元素生成竖排省略号：

/* 自定义按钮基础样式 */
.fc-ellipsisButton-button {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 用Unicode生成竖排省略号 */
.fc-ellipsisButton-button::before {
  content: '\22EE';
  font-size: 18px;
  color: inherit;
}

方案2：使用Font Awesome图标（项目已引入时） #

如果你的项目已经集成Font Awesome，直接利用其fa-ellipsis-v图标：

1. 配置按钮时添加自定义类名：

customButtons: {
  ellipsisButton: {
    text: '',
    className: 'fc-ellipsis-btn',
    click: this.handleEllipsisClick.bind(this)
  }
}

2. CSS中引入Font Awesome图标样式：

.fc-ellipsis-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-ellipsis-btn::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f142'; /* fa-ellipsis-v的Unicode编码 */
  font-size: 16px;
}

三、Angular实现点击弹出下拉菜单 #

用Angular原生语法实现，无需依赖jQuery：

1. 组件模板中添加下拉菜单，通过*ngIf控制显示状态：

<full-calendar [options]="calendarOptions"></full-calendar>

<!-- 下拉菜单，定位在按钮旁 -->
<div class="ellipsis-dropdown" *ngIf="isDropdownOpen">
  <button (click)="handleAction('导出日程')">导出日程</button>
  <button (click)="handleAction('批量编辑')">批量编辑</button>
  <button (click)="handleAction('刷新数据')">刷新数据</button>
</div>

2. 组件类中实现菜单的显示/隐藏逻辑：

isDropdownOpen = false;

handleEllipsisClick() {
  this.isDropdownOpen = !this.isDropdownOpen;
  // 点击外部区域关闭菜单
  if (this.isDropdownOpen) {
    document.addEventListener('click', this.closeDropdown.bind(this));
  } else {
    document.removeEventListener('click', this.closeDropdown.bind(this));
  }
}

closeDropdown(event: MouseEvent) {
  const button = document.querySelector('.fc-ellipsisButton-button');
  const dropdown = document.querySelector('.ellipsis-dropdown');
  if (button && dropdown && !button.contains(event.target as Node) && !dropdown.contains(event.target as Node)) {
    this.isDropdownOpen = false;
    document.removeEventListener('click', this.closeDropdown.bind(this));
  }
}

handleAction(actionName: string) {
  console.log(`执行：${actionName}`);
  this.isDropdownOpen = false;
}

3. 给下拉菜单添加定位样式：

.ellipsis-dropdown {
  position: absolute;
  top: 45px; /* 根据日历头部高度调整 */
  right: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
}

.ellipsis-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ellipsis-dropdown button:hover {
  background: #f5f5f5;
}

四、关键注意事项 #

• 自定义按钮的key（如ellipsisButton）必须与headerToolbar中声明的名称完全一致，否则按钮不会渲染。
• 使用bind(this)确保点击事件中的this指向组件实例，避免上下文丢失。
• 全局点击监听要在菜单关闭时移除，防止内存泄漏。

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