CODEWITHSUNDEEP
angulartypescriptfullcalendarfullcalendar-5
Habchi
Habchi

Reputation: 1971

How to handle actions on next, prev and view changes in Angular FullCalendar

I integrated Angular fullCalendar to my Angular project and was able to display events and handle click on them, however I couldn't find anything in the official documentation about how to handle click upon next, prev buttons and on view changes.

My scenario exection is: On next, prev buttons I want to retrieve events related to these days if I'm on timeGrid month and retrieve events related to the whole month if I'm on dayGridMonth.

The calendar declaration in the TS file is as follow:

@ViewChild('calendar')
  calendarComponent: FullCalendarComponent;
  private eventToEdit: EventClickArg;


  // other properties
  private subscriptions: Subscription[] = [];
  calendarOptions: CalendarOptions = {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridDay,listWeek'
    },
    initialView: 'timeGridDay',
    themeSystem: 'bootstrap',
    weekends: false,
    locale: 'fr',
    buttonText: {
      today: 'Aujourd\'hui',
      month: 'Mois',
      day: 'Jour',
      week: 'Semaine'
    },
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    slotDuration: '00:15:00',
    select: this.handleDateSelect.bind(this),
    slotMinTime: '08:00:00',
    slotMaxTime: '22:00:00',
    eventClick: this.handleEventClick.bind(this),
    eventBackgroundColor: '#089bab',
    eventBorderColor: '#089bab',
  };

The component html is below:

<div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <full-calendar #calendar
                             [options]='calendarOptions'></full-calendar>
            </div>
          </div>
        </div>
      </div>

Upvotes: 1

Views: 1396

Answers (1)

Habchi
Habchi

Reputation: 1971

For those who may concern, I found a property called datesSet that I bind to a handler method, it triggers the handler each time a date is changed. This is the new TS file:

calendarOptions: CalendarOptions = {
    // ... same properties in the question
    datesSet: this.handleDateChanged.bind(this)   };

  handleDateChanged(arg) {
    this.logger.debug('your view is:', this.calendarComponent.getApi().view);
    this.calendarComponent.getApi().removeAllEvents();
    if (this.calendarComponent.getApi().view.type === 'timeGridDay') {
      this.retrieveAllAppointments(this.calendarComponent.getApi().getDate(), this.calendarComponent.getApi().getDate(), null);
    } else if (this.calendarComponent.getApi().view.type === 'dayGridMonth') {
      this.retrieveAllAppointments(arg.start, arg.end, null);

    } else if (this.calendarComponent.getApi().view.type === 'listWeek'){
      this.retrieveAllAppointments(arg.start, arg.end, null);
    }   
}

retrieveAllAppointments is the method where I call my Rest API

Upvotes: 2

Related Questions