While incorporating full-calendar from fullcalendar.io into my Angular project, I made sure to install all necessary plugins like dayGrid, timeGrid, and interaction. Utilizing navLinks functionality, I came across this resource -> https://fullcalendar.io/docs/navLinks, and also found a similar solution here: https://stackblitz.com/edit/angular-7chhen?file=src%2Fapp%2Fapp.component.html. However, in the latter example, navLinks seemed to be functioning correctly.
Here's a snippet of my code:
HTML code ->
<full-calendar
#calendar
...
[navLinks]="true"
(navLinkDayClick)="navLinkDayClick($event)"
(navLinkWeekClick)="navLinkDayClick($event)"
></full-calendar>
In the component class ->
...
calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin, bootstrap];
...
navLinkDayClick(date){
console.log('day');
}
navLinkWeekClick(date){
console.log('week');
}
When clicking on a date, I encounter the following error ->
ERROR TypeError: Cannot read property 'emit' of undefined
at options.<computed> (fullcalendar-angular.js:303)
at HTMLAnchorElement.<anonymous> (main.esm.js:6622)
at HTMLElement.realHandler (main.esm.js:379)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:32819)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
at invokeTask (zone-evergreen.js:1603)
at HTMLElement.globalZoneAwareCallback (zone-evergreen.js:1629) defaultErrorLogger @ core.js:4799 handleError @ core.js:4851 next @ core.js:33552 schedulerFn @ core.js:29522
__tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122
_next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.js:29484 (anonymous) @ core.js:32877 invoke @ zone-evergreen.js:359 run @ zone-evergreen.js:124 runOutsideAngular @ core.js:32764 onHandleError @ core.js:32874 handleError @ zone-evergreen.js:363 runTask @ zone-evergreen.js:171 invokeTask @ zone-evergreen.js:465 invokeTask @ zone-evergreen.js:1603 globalZoneAwareCallback @ zone-evergreen.js:1629
Additionally, here are the dependencies in package.json ->
"@fullcalendar/angular": "^4.3.1",
"@fullcalendar/bootstrap": "^4.3.0",
"@fullcalendar/core": "^4.3.1",
"@fullcalendar/daygrid": "^4.3.0",
"@fullcalendar/interaction": "^4.3.0",
"@fullcalendar/list": "^4.3.0",
"@fullcalendar/luxon": "^4.3.0",
"@fullcalendar/moment": "^4.3.0",
"@fullcalendar/moment-timezone": "^4.3.0",
"@fullcalendar/timegrid": "^4.3.0",
module ->
@NgModule({
imports: [
...
FullCalendarModule
],
declarations: [
...
UsersWorkCalendarComponent,
],
entryComponents: [
...
UsersWorkCalendarComponent,
]
})
export class DashboardModule { }