如何处理PrimeNG p-fullCalendar的自定义按钮点击事件？

在 PrimeNG 中，p-fullCalendar 组件是一个功能强大的日历组件，允许您显示和管理日历事件。如果您想要处理自定义按钮的点击事件，可以通过以下步骤实现。

步骤

安装 PrimeNG 和 FullCalendar：确保您已经安装了 PrimeNG 和 FullCalendar。
设置 FullCalendar：在您的组件中配置 p-fullCalendar。
添加自定义按钮：使用 headerToolbar 属性添加自定义按钮。
处理按钮点击事件：在按钮的点击事件中执行相应的逻辑。

示例代码

以下是一个完整的示例，展示了如何在 PrimeNG 的 p-fullCalendar 中处理自定义按钮的点击事件。

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FullCalendarModule } from 'primeng/fullcalendar';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FullCalendarModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
import { Component } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  events: any[] = [
    { title: 'Event 1', date: '2023-10-01' },
    { title: 'Event 2', date: '2023-10-02' },
  ];

  calendarOptions: any;

  constructor() {
    this.calendarOptions = {
      plugins: [dayGridPlugin, interactionPlugin],
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'customButton', // 自定义按钮
      },
      customButtons: {
        customButton: {
          text: 'Custom Button',
          click: this.handleCustomButtonClick.bind(this), // 绑定点击事件
        },
      },
      events: this.events,
    };
  }

  handleCustomButtonClick() {
    alert('Custom button clicked!');
    // 在这里处理自定义按钮的逻辑
  }
}

<!-- app.component.html -->
<p-fullCalendar [options]="calendarOptions"></p-fullCalendar>

代码说明

模块导入：在 app.module.ts 中导入 FullCalendarModule。
事件数据：在 app.component.ts 中定义一个事件数组 events，用于存储日历事件。
日历选项：在 calendarOptions 中配置日历的选项，包括插件、工具栏和事件。
自定义按钮：
- 在 headerToolbar 中添加自定义按钮 customButton。
- 在 customButtons 中定义按钮的文本和点击事件处理函数。
处理按钮点击事件：在 handleCustomButtonClick 方法中处理自定义按钮的点击事件。