4

The dateClick event is not working, I did exactly as stated in the documentation:

https://fullcalendar.io/docs/angular

html: 

    <full-calendar #calendar (dateClick)="alert('clicked')" defaultView="timeGridWeek"
        [nowIndicator]="true" [header]="header" [plugins]="calendarPlugins" [events]="[
          { title: 'event 1', start: '2019-05-22T13:00:00', textColor: 'white', end: '2019-05-22T14:00:00'  },
          { title: 'event 2', start: '2019-05-23T14:00:00', end: '2019-05-23T15:00:00' }
        ]"></full-calendar>

ts: 

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

  public calendarPlugins = [dayGridPlugin, timeGridPlugin, listPlugin];
Luiz Ricardo Cardoso
  • 1,554
  • 4
  • 16
  • 37

1 Answers1

17

To solve this problem I did the following steps:

npm install --save @fullcalendar/interaction

I added the plugin's import into the component:

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';

  public calendarPlugins = [dayGridPlugin, 
      timeGridPlugin, listPlugin , interactionPlugin];
Luiz Ricardo Cardoso
  • 1,554
  • 4
  • 16
  • 37
  • to anyone reading, the important point here is that you have to load the "interaction" plugin additionally for things like clicking to work. – ADyson May 23 '19 at 08:59