Fullcalendar v4结合PrimeNG如何为日历事件添加可触发事件的功能按钮

1. 开箱即用方案说明 #

FullCalendar 本身没有内置和 PrimeNG 组件适配的事件功能按钮实现，需要基于 FullCalendar 提供的渲染钩子结合 Angular 动态组件能力自行实现。

2. 当前代码失效原因 #

你直接通过 innerHTML 拼接的字符串属于原生 HTML 内容，Angular 不会对其中的 PrimeNG 组件指令、(onClick) 绑定语法做编译解析，因此 p-button 不会渲染为实际的 PrimeNG 按钮组件，绑定的点击事件也不会触发。

3. 完整实现步骤 #

3.1 创建独立的事件操作按钮组件 #

封装所有功能按钮和对应的业务逻辑，代码示例如下：

// event-action-buttons.component.ts
import { Component, Input } from '@angular/core';
import { EventApi } from '@fullcalendar/core';

@Component({
  selector: 'app-event-action-buttons',
  template: `
    <p-button (click)="deleteEvent()" icon="pi pi-trash" styleClass="p-button-sm p-button-danger mr-1"></p-button>
    <p-button (click)="snapToPrev()" icon="pi pi-arrow-up" styleClass="p-button-sm p-button-secondary mr-1"></p-button>
    <p-button (click)="snapToNext()" icon="pi pi-arrow-down" styleClass="p-button-sm p-button-secondary"></p-button>
  `
})
export class EventActionButtonsComponent {
  @Input() event: EventApi;

  deleteEvent() {
    this.event.remove();
    // 补充你的自定义删除后续逻辑
  }

  snapToPrev() {
    // 实现吸附到上一个事件的逻辑，可通过Event Api修改当前事件时间
  }

  snapToNext() {
    // 实现吸附到下一个事件的逻辑
  }
}

3.2 注册组件依赖 #

在你当前使用 FullCalendar 的模块中做如下配置：

• 把 EventActionButtonsComponent 加入 declarations 数组，Angular 9 以下版本还需要加入 entryComponents 数组
• 确保已经从 primeng/button 导入 ButtonModule 并加入当前模块的 imports 数组

3.3 修改eventRender渲染逻辑 #

在使用 FullCalendar 的组件中，注入动态创建组件需要的依赖，修改 eventRender 方法：

// 使用FullCalendar的组件ts文件
import { ComponentFactoryResolver, ViewContainerRef, ComponentRef, OnDestroy } from '@angular/core';
import { EventActionButtonsComponent } from './event-action-buttons.component';

// 存储动态创建的组件实例，用于后续销毁避免内存泄漏
private componentRefs: ComponentRef<EventActionButtonsComponent>[] = [];

constructor(
  private componentFactoryResolver: ComponentFactoryResolver,
  private viewContainerRef: ViewContainerRef
) {}

eventRender(info: any) {
  // 创建组件工厂
  const factory = this.componentFactoryResolver.resolveComponentFactory(EventActionButtonsComponent);
  // 动态生成组件实例
  const componentRef = this.viewContainerRef.createComponent(factory);
  // 传入当前事件对象
  componentRef.instance.event = info.event;
  // 触发变更检测确保组件渲染完成
  componentRef.changeDetectorRef.detectChanges();
  // 将组件DOM插入到事件标题区域
  const titleEl = info.el.querySelector('.fc-title');
  titleEl.appendChild(componentRef.location.nativeElement);
  // 存储组件实例
  this.componentRefs.push(componentRef);
}

// 组件销毁时清理动态生成的组件
ngOnDestroy() {
  this.componentRefs.forEach(ref => ref.destroy());
}

3.4 补充优化点 #

• 可以给事件元素添加自定义样式调整按钮位置，避免遮挡事件标题内容
• 吸附功能可以通过 FullCalendar 的 getEvents() 方法获取所有事件，匹配当前事件的相邻事件后，调用 event.setStart()/event.setEnd() 方法修改当前事件时间即可完成吸附

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