CODEWITHSUNDEEP
javascriptangularfullcalendarangular8fullcalendar-4
smoczyna
smoczyna

Reputation: 519

Angular8 and Full Calendar component

I am trying to make full calendar working in my Angular8 application. I tried few different ways of implementation but all let me down so far. Most tutorials and examples suggests to use "jquery approach" but I think it is outdated, when I tried it, something like this:

$("#calendar").fullCalendar(
            this.defaultConfigurations
        );

I have an runtime error that fullCalendar is not a function.

The only way I could make calendar to work is this approach:

export class EventCalendarViewComponent extends BaseClass implements OnInit {

@ViewChild('calendar', null) calendar: FullCalendarComponent;

calendarPlugins = [dayGridPlugin];
calendarEvents = [];
addDialogRef: MatDialogRef<AddEventComponent>;
editDialogRef: MatDialogRef<EditEventComponent>;

constructor(private dialog: MatDialog, protected snackBar: MatSnackBar, private eventService: EventService) {
    super(snackBar);
}

protected getData() {
    this.eventService.getAllEvents().subscribe(res => {
        res.forEach(event => {
            const calendarEvent: CalendarEvent = this.schoolEventToCalendarEvent(event);
            this.calendarEvents.push(calendarEvent);
        });
    });
}

ngOnInit(): void {
    this.getData();
}

private schoolEventToCalendarEvent(event: SchoolEvent): CalendarEvent {
    return {
        id: event.id,
        title: event.title,
        start: moment(event.startDate).format('YYYY-MM-DD'),
        end: moment(event.endDate).format('YYYY-MM-DD')
    }
} ...

and html looks like this then:

<full-calendar #calendar
               defaultView="dayGridMonth"
               [plugins]="calendarPlugins"
               [events]="calendarEvents"
               [editable]="true"
               [allDayDefault]="true"
               [timeZone]="'local'"
></full-calendar>

However events populates with getData() method do not show on the calendar. The only way to see any events is static population of its variable:

calendarEvents = [{id: 1, title: 'static entry', start: '2019-09-05'}];

What is the trick here? I cannot find the way to refresh the calendar after db call is comleted.

Upvotes: 0

Views: 886

Answers (1)

smoczyna
smoczyna

Reputation: 519

Well the trick is (at least in my case) to declare the component like this:

<full-calendar #calendar
               defaultView="dayGridMonth"
               deepChangeDetection="true"
               [plugins]="calendarPlugins"
               [events]="calendarEvents"
               [refetchResourcesOnNavigate]="true"
               [editable]="true"
               [allDayDefault]="true"
               [timeZone]="'local'"
></full-calendar>

So I think that

deepChangeDetection="true"

is the the property which make the difference. refetchResourcesOnNavigate which is there as well do not change anything. Since my data comes from the the database another property:

rerenderDelay

might be useful here, especially that deepChangeDetection might affect the performance.

Upvotes: 1

Related Questions