PrimeNG: Why clicking on a FullCalendar date the dateclick event is not emitted? How can I handle the click on a specific date on my calendar?

Question

I am pretty new in Angular and moreover in PrimeNG and I am finding the following difficulties trying to use FullCalendar component, this one: https://primefaces.org/primeng/showcase/#/fullcalendar

The problem is that I want to handle an event when the user click on a specific date inside my calendar (referring to the previous link example: when the user click on the square rapresenting a day into the Calendar, I have to perform a callback method).

So I know that this PrimeNG component should be based on the https://fullcalendar.io/

I tried in this way but it is not working:

1) This is 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>

As you can see I added:

(dateClick)="handleDateClick($event)"

in order to handle the date click event on a specific date of my rendered calendar.

2) Then I have this "backend" code for this Angular component, defined into 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 !!!");
  }

}

As you can see I imported some plugin for this component, in particular I have installed it as explained into the official documentation, by this statement:

npm install @fullcalendar/interaction --save

Then I created the handleDateClick() method to handle this click in date event and I inserted the interactionPlugin into the calendarPlugins array used by my component, as explained here: dateClick not emitted in fullcalendar angular

The previous links referer to the https://fullcalendar.io/docs/angular on which the PrimeNg Full Calendar is based on.

But it is not working: my application compile, the calendar is shown in my page but clicking on a specific date on my displayed calendar nothing happens.

Why? What is wrong? What am I missing? How can I fix my code and correctly handle this event?

ruth · Accepted Answer · 2020-05-15T18:43:26.953

From the PrimeNG fullcalendar docs:

Callbacks of the FullCalendar are also defined with the options property.

So try the following

Option 1

this.options = {
  plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
  defaultDate: '2017-02-01',
  header: {
      left: 'prev,next',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  editable: true,
  dateClick: (dateClickEvent) =>  {         // <-- add the callback here as one of the properties of `options`
    console.log("DATE CLICKED !!!");
  }
};

Option 2

Or to access the member variables and functions from the callback function, bind the callback function with the argument this. (Untested - might not work as expected)

ngOnInit() {
  this.options = {
    plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
    defaultDate: '2017-02-01',
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    editable: true,
    dateClick: this.handleDateClick.bind(this)     // <-- bind the callback with argument `this`
  };
}

handleDateClick(dateClickEvent) {
  console.log("DATE CLICKED !!!");

  // access member variables and functions using `this` keyword
}

It works fine, thank you. Just another clarification. I noticed that I can remove the (dateClick) event definition from the html page. Why in this case I have not to define the event and the related handler method in my html page and the method implementation as a simple method in my "backend" .ts class? — AndreaNobili, May 15 '20 at 18:41
Looking at the PrimeNG fullcalendar [source](https://github.com/primefaces/primeng/blob/master/src/app/components/calendar/calendar.ts), I don't see an explicit event emitter `dateClick`. So most probably it is inherited from the `fullcalendar` and bound to the HTML tag. So I assume the event is always handled nevertheless, the only difference being if an handler is supplied or not. — ruth, May 15 '20 at 18:44
And that must also be the reason why it is supplied as one of the property in the `options` and not handled explicitly. — ruth, May 15 '20 at 18:48

PrimeNG: Why clicking on a FullCalendar date the dateclick event is not emitted? How can I handle the click on a specific date on my calendar?

1 Answers1