Fullcalendar with Angular, triggering ViewRender

user_7435899 0
Viewed 1993

The issue is triggering an event when the current view of Fullcalendar changes. For instance, when the month changes to previous or the next one. Using ViewRender did not help. In multiple resources, the recommended solution was ViewRender, however I could not find the angular implementation, therefore, my implementation might be mistaken. Furthermore, using view and element parameters with the function did not help either.

My function is as following:

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

My HTML markup is as following:

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

this is an example of my calendar component. The part where you return the list of new events is delegated to an @Input that points to a function. It is not the most beautiful solution and I expect to understand from those who are more experienced than me how to improve it

 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)
  }

}
user_117252820
Related