After successfully integrating Angular fullCalendar into my Angular project and displaying events that I can click on, I found myself stuck when trying to handle clicks on the next and prev buttons as well as view changes. Unfortunately, the official documentation didn't provide any guidance on how to achieve this.
Here's what I'm aiming for: When the user clicks on the next or prev buttons, I want to retrieve events corresponding to those specific days if they are in the timeGrid month view, and events related to the entire month if they are in the dayGridMonth view.
The calendar declaration in my TS file looks like this:
@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',
};
Below is the HTML code for the component:
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<full-calendar #calendar
[options]='calendarOptions'></full-calendar>
</div>
</div>
</div>
</div>