I am new to using Angular and PrimeNG, and I am facing challenges while trying to implement the FullCalendar component. The specific component I am referring to can be found here:
The issue arises when I attempt to trigger an event when a user clicks on a particular date within the calendar (similar to the example provided in the link above). My goal is to execute a callback method upon clicking a day square on the Calendar.
I understand that this PrimeNG component is built upon https://fullcalendar.io/
Here is what I have tried so far:
1) This is the content of my fullcalendard.component.html page:
fullcalendar works!
<div class="content-section implementation">
<p-fullCalendar #calendar (dateClick)="handleDateClick($event)"
[events]="events"
[options]="options">
</p-fullCalendar>
</div>
In this code snippet, you can see that I have added:
(dateClick)="handleDateClick($event)"
To handle the event of clicking a date on the rendered calendar.
2) Moving on to the "backend" logic, defined in my fullcalendar.component.ts file:
import { Component, OnInit } from '@angular/core';
import { EventService } from '../event.service';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
@Component({
selector: 'app-fullcalendar',
templateUrl: './fullcalendar.component.html',
styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements OnInit {
events: any[];
options: any;
header: any;
constructor(private eventService: EventService) {}
ngOnInit() {
this.eventService.getEvents().then(events => {this.events = events;});
this.options = {
plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
defaultDate: '2017-02-01',
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true
};
}
handleDateClick(dateClickEvent) {
console.log("DATE CLICKED !!!");
}
}
In this part, you can see that I imported various plugins for this component as instructed in the official documentation. I have also created the handleDateClick() method to manage the click event on a date, and included the interactionPlugin in the calendarPlugins array used by my component as suggested in this resource: dateClick not emitted in fullcalendar angular
Although my application compiles without errors and displays the calendar on the page, nothing happens when I click on a specific date. Why is this happening? What could be wrong? What am I overlooking? How can I rectify my code to successfully handle this event?