完整日历自定义按钮 - 省略号图标

Question

我正在开发一个使用 FullCalendar 库的 Angular 项目。我需要使用 customButtons 属性将带有省略号（三个垂直点）图标的自定义按钮添加到 FullCalendar 标头。 FullCalendar 库仅提供四个默认图标（V 形右、V 形左、双右、双左）。

这是我的要求：

使用省略号图标（三个垂直点）作为自定义按钮。 单击省略号按钮时，应出现一个下拉菜单。 无需使用 jQuery，仅使用 TypeScript 和 Angular 即可实现此功能。 我在网上找到了一些涉及 jQuery 的解决方案，但我想坚持使用 TypeScript。有谁有关于如何实现这一目标的解决方案或指导吗？

我尝试使用以下示例代码在 FullCalendar 中设置自定义按钮：

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

calendarOptions: CalendarOptions = {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'customButton'
  },
  customButtons: {
    ellipsis: {
      icon: ???
      click: this.handleCustomButtonClick.bind(this)
    }
  }
};

handleCustomButtonClick() {
  // Logic to open a dropdown menu
}

我还遇到了一些 CodePens，其中人们在自定义按钮中使用了打印和加号等图标。当我使用 icon: 'plus-square' 时，它工作正常，但任何其他图标似乎都不起作用。

我的期望：

将图标：' ' 替换为省略号图标。 使用 Angular 和 TypeScript 实现单击按钮时出现的下拉菜单。 了解为什么有些图标（如加号方块）有效，而其他图标则无效，以及如何正确使用自定义图标。

Answer 1

这将需要额外的工作和测试，因为您想要自定义现有的库，如果 JQuery 不适用，有一个解决方法。

对于省略号图标：您可以提供图标代码“EE”以在自定义按钮中显示省略号。

对于下拉部分：现在我不太清楚您的项目中使用哪个库进行下拉，以及单击下拉菜单中每个选项的预期内容。全日历也不提供内置下拉菜单，但您可以通过单击省略号来显示下拉部分。 像这样的东西：https://stackblitz.com/edit/fullcalendar-angular-custom-function-rquerh?file=README.md