Fullcalendar with Angular，触发 ViewRender答案

【问题标题】：Fullcalendar with Angular, triggering ViewRenderFullcalendar with Angular，触发 ViewRender
【发布时间】：2020-08-07 10:53:52
【问题描述】：

问题是在 Fullcalendar 的当前视图发生变化时触发事件。例如，当月份更改为上一个或下一个时。使用 ViewRender 没有帮助。在多个资源中，推荐的解决方案是 ViewRender，但是我找不到角度实现，因此，我的实现可能是错误的。此外，在函数中使用视图和元素参数也无济于事。

我的功能如下：

eventViewRender() {
  console.log("Working here");
}

我的 HTML 标记如下：

<full-calendar
      defaultView="dayGridMonth"
      [weekends]="options.calendarWeekends"
      [events]="eventsModel"
      (select)="multiSelected($event)"
      (eventDrop)="eventDragStop($event)"
      [plugins]="options.plugins"
      (viewRender)="eventViewRender()"
></full-calendar>

【问题讨论】：

为什么视图变化时需要触发事件？当这种情况发生时，你希望做什么？（我之所以这么问，是因为很多人出于错误的原因尝试这样做，而且通常存在更好的实现方式）。
无论如何，您没有提到您使用的是哪个版本的 fullCalendar？在最新版本 (v5) 中， viewRender 不存在 - 请查看此文档：fullcalendar.io/docs/view-render-hooks
在 v4 中将改为：fullcalendar.io/docs/v4/viewSkeletonRender。 “viewRender”自 v3 以来不存在。在线查找示例时，请检查它们是否与您的版本相关，如果不相关，请阅读您的版本的文档，因为它很可能会告诉您该怎么做。
嘿，感谢您的反应！我使用 4.4 版，我希望获取与所选月份相关的数据。 viewSkeletonRender 仅在日历的初始绘制时有效，而在月份更改时无效。我可以通过使用对按钮点击做出反应的方法来实现我的目标，但我相信应该有更好的方法来实现。
“我的愿望是获取与所选月份相关的数据”...您不需要任何类型的 viewRender 回调。相反，正确配置您的事件源，fullCalendar 将自动为您处理它 - 请参阅fullcalendar.io/docs/events-json-feed（或fullcalendar.io/docs/events-function，如果您需要更多灵活性）。如果您告诉 fullCalendar 在哪里查找新事件，那么只要视图或日期发生变化，它就会为您请求这些事件。

标签： angular typescript fullcalendar fullcalendar-4

【解决方案1】：

这是我的日历组件的一个示例。返回新事件列表的部分委托给指向函数的@Input。这不是最漂亮的解决方案，我希望比我更有经验的人了解如何改进它

 export class CalendarComponent implements OnInit, OnChanges {
  @Input() id: string
  @Input() ariaLabel: string
  @Input() height: string
  @Input() locale: string
  @Input() tabIndex: number
  @Input() callBack: (e, s, f) => {} = (e, s, f) => []
  @Input() view: 'timeGridWeek' | 'dayGridMonth' | 'dayGridWeek'
  @Input() events: QuixCalendarEvent[] = []
  @Input() header: { [key: string]: any }
  @Input() footer: { [key: string]: any }
  @Input() buttonsIcons: { [key: string]: any } = {
    close: 'fas fa-times',
    prev: 'fas fa-chevron-left',
    next: 'fas fa-chevron-right',
    prevYear: 'fas fa-angle-double-left',
    nextYear: 'fas fa-angle-double-right'
  }
  @Output() onEventClick = new EventEmitter<any>()
  @Output() onDateClick = new EventEmitter<any>()
  @Output() onViewChange = new EventEmitter<any>()
  calendarOptions: CalendarOptions = {
    initialView: this.view,
    themeSystem: 'bootstrap',
    events: this.viewChange.bind(this),
    height: '',
    eventClick: this.eventClick.bind(this),
    dateClick: this.dateClick.bind(this),
    headerToolbar: this.header,
    footerToolbar: this.footer,
    buttonIcons: this.buttonsIcons,
    locale: '',
  };

  constructor() {
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges
  ) {
    if (changes.height?.currentValue) {
      this.calendarOptions.height = changes.height.currentValue
    }
    if (changes.view?.currentValue) {
      this.calendarOptions.initialView = changes.view?.currentValue
    }
    if (changes.header?.currentValue) {
      this.calendarOptions.headerToolbar = changes.header?.currentValue
    }
    if (changes.footer?.currentValue) {
      this.calendarOptions.footerToolbar = changes.footer?.currentValue
    }
    if (changes.locale?.currentValue) {
      this.calendarOptions.locale = changes.locale?.currentValue
    }
  }

  eventClick(event: any) {
    this.onEventClick.emit(event)
  }

  dateClick(event: any) {
    this.onDateClick.emit(event)
  }

  viewChange(event: any, successCallback, failureCallback) {
    this.onViewChange.emit(event)
    this.callBack(event, successCallback, failureCallback)
  }

}

【讨论】：