How to update ng-fullcalendar to @fullcalendar/angular

[kiransalian91]

@irustm I already implemented ng-fullcalender and is working fine. Since ng-fullcalendar is deprecated now I want to update full calendar to @fullcalendar/angular. how can i achieve this ?

[kiransalian91]

@irustm I have already implemented ng-fullcalendar and website is live. Does ng-fullcalendar still works fine for future without any issues or we must upgrade it to @fullcalendar/angular ? since ng-fullcalendar is deprecated .

[irustm]

I recommend upgrading to @fullcalendar/angular

If you do not actively use jquery on your project, the update will be very easy

[kiransalian91]

@irustm Please check my below code which was implemented using ng fullcalendar

<ng-fullcalendar #ucCalendar [options]="calendarOptions" placement="bottom" [ngbPopover]="popContent" [autoClose]=false
triggers="manual" boundary="viewport" #p="ngbPopover" popoverClass="eventDetails-popover" (eventClick)="eventClick($event.detail, p)"
(eventDrop)="updateEvent($event.detail)" (eventRender)="eventrender($event.detail)" (eventResize)="updateEvent($event.detail)"
(clickButton)="clickButton($event.detail)">

in component.ts file

import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';

calendarOptions: Options;
@ViewChild(CalendarComponent) ucCalendar: CalendarComponent;

ngOnInit() {
this.calendarOptions = {
editable: false,
eventLimit: true,
header: false,
timezone: 'local',
timeFormat: 'h(:mm)a',
views: {
month: {
eventLimit: 4 // adjust to 6 only for agendaWeek/agendaDay
},
week: {
titleFormat: 'D MMMM YYYY',
columnFormat: 'ddd D/M'
}
},
events: this.calenderData ? this.calenderData : '',
eventTextColor: '#2B2B2B',
eventBackgroundColor: '#ffffff',
eventBorderColor: '#ffffff'
};
}

ngOnChanges() {
if (this.calenderData) {
const calanderDataLocal = JSON.parse(JSON.stringify(this.calenderData));
// this.ucCalendar.fullCalendar('refresh');
if (this.type === 'agendaDay' || this.type === 'agendaWeek') {
calanderDataLocal.push({
date: new Date(),
start: new Date(),
end: new Date(new Date().setMinutes(new Date().getMinutes() + 1)),
color: 'red'
// title: 'now'
});
}
if (this.type !== 'term' && this.type !== 'year') {
this.ucCalendar.fullCalendar('removeEvents');
this.ucCalendar.fullCalendar('addEventSource', calanderDataLocal, true);
this.ucCalendar.fullCalendar('changeView', this.type);
this.valueChanged = true;
}
}
}

How can i update above code to @fullcalendar/angular ? since Options , fullCalendar('removeEvents') and not supported.

[irustm]

please see this demo: https://stackblitz.com/edit/fullcalendar-angular-demo

[acerix]

Sorry for the delay in responding to your issue, I have just begun triaging on this repo.

Please refer to the support page and use Stack Overflow for help.