向 Fullcalendar 事件添加按钮答案

【问题标题】：Add Buttons to Fullcalendar Events向 Fullcalendar 事件添加按钮
【发布时间】：2021-10-13 19:59:21
【问题描述】：

我想在我的 Fullcalendar 事件中添加按钮。例如：删除、对齐到上一个。事件，捕捉到后续事件。我是否有开箱即用的可能性？

如果没有，我该如何使用 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>';
      }

我正在使用 Fullcalendar v4 和primeng。

【问题讨论】：

@MauricioGraciaGutierrez 将按钮添加到 fullCalendar 标题，而不是单个事件。
@MauricioGraciaGutierrez 这是我在上面的示例中使用的。
@jussi 你能用你需要的所有依赖项准备 stackblitz，我会解决它吗？
@yurzui stackblitz.com/edit/angular-ivy-pt9j99?file=src/app/… 感谢您的帮助！
@jussi 我添加了我的答案。不客气！

标签： angular fullcalendar primeng

【解决方案1】：

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

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

@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 事件模板中的组件。

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

your-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);
        }
      },
    };
  }

  ...
}

你可以通读我的 cmets 来基本了解这里发生了什么。

Forked Stackblitz Example

【讨论】：