将按钮添加到全日历事件

Question

我想在我的全日历活动中添加按钮。例如：删除、吸附到上一个。事件，捕捉到后续事件。我有开箱即用的可能性吗？

如果没有，我如何使用 FullCalendar 的 eventRender 功能来实现这一点？我可以将 html 添加到事件中，但它不是 p 按钮，也不会触发 onClick 事件。如何添加 html 并使用 primeng 元素和事件？

eventRender(info: any) {
        info.el.querySelector('.fc-title').innerHTML += '<p-button (onClick)="delete(info.event)" icon="pi pi-trash"></p-button>';
      }

我正在使用带有 primeng 的 Fullcalendar v4。

Answer 1

我们可以使用动态创建一个 Angular 组件，当涉及到我们必须接触的 3 个第三方集成时 DOM。

首先，让我们创建我们想要的模板：

@Component({
  template: `<p-button (onClick)="deleted.emit(info.event)" icon="pi pi-trash"></p-button>`,
})
export class EventActionsComponent {
  info: any;
  @Output() deleted = new EventEmitter();
}

它是一个将动态创建并加载到 FullCalendar 事件模板中的组件。

为了实现这一点，我们需要使用低级 Angular API，其中涉及 ComponentFactoryResolver 和 ViewContainerRef:

你的-host.component.ts

export class AppComponent {
  // store all created ComponentRefs so that they can be successfully destroyed in eventDestroy 
  ngComponentsMap = new Map<HTMLElement, ComponentRef<EventActionsComponent>>();

  // get componentFactory of dynamic component only once
  eventActionsComponentFactory = this.resolver.resolveComponentFactory(
    EventActionsComponent
  );

  constructor(
    private resolver: ComponentFactoryResolver,
    private vcRef: ViewContainerRef
  ) {}

  ngOnInit(): void {
    this.options = {
      ...
      eventRender: (info: any) => {
        // use Promise here to avoid ExpressionChangedAfterItHasBeenCheckedError
        Promise.resolve().then(() => {
          const compRef = this.vcRef.createComponent(
            this.eventActionsComponentFactory
          );
          this.ngComponentsMap.set(info.el, compRef);
          const targetEl = info.el.querySelector('.fc-title');
          targetEl.innerHTML = '';
          // pass anything you want here
          compRef.instance.info = info;
          // handle all desired outputs here
          compRef.instance.deleted.subscribe((event) => {
            alert('Do smth with delete');
          });
          // port created ng component to the right destination
          targetEl.appendChild(compRef.location.nativeElement);
        });
      },
      eventDestroy: (info: any) => {
        // destroy ng component and clear ngComponentsMap
        const compRef = this.ngComponentsMap.get(info.el);
        if (compRef) {
          compRef.destroy();
          this.ngComponentsMap.delete(info.el);
        }
      },
    };
  }

  ...
}

您可以通读我的评论以基本了解这里发生的事情。

Forked Stackblitz Example

将按钮添加到全日历事件

Add Buttons to Fullcalendar Events

fullcalendar

primeng

angular