@fullcalendar/angular - Events not working

Question

i've added @fullcalendar/angular in my angular application but my [events] doesn't work.

in my app.module.ts:

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  interactionPlugin,
  timeGridPlugin
])

imports: [
    ...
    ...
    FullCalendarModule
  
  ]

//.ts file

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

import { ActivatedRoute, Router } from '@angular/router';

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import { CalendarOptions, FullCalendarComponent } from '@fullcalendar/angular';
import { EventInput } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import { title } from 'process';
import { event } from '../common/models/event';

@Component({
  selector: 'app-my-profile',
  templateUrl: './my-profile.component.html',
  styleUrls: ['./my-profile.component.css']
})
export class MyProfileComponent implements OnInit {
posts =[]; 
  //full calendar specified , static : true is obligatory
  @ViewChild("fullcalendar", { static: true })
  calendarComponent: FullCalendarComponent;
 ngOnInit(): void {
    
  
  
  this.service.getEvents(this.username).subscribe(
    (data) => {
     
      for(let i = 0; i <= Object.keys(data).length; i++){
          const e = new event;
          if(data[i]!=undefined){
          
          e.setTitle(data[i].title);
          e.setStart(data[i].start);
          e.setEnd(data[i].end);
          e.setColor(data[i].color);
          this.posts.push(e);
          }
      }
      
      console.log(" my events " + JSON.stringify(this.posts));
      
      
    }
  )
    
        
        
      }
   

}

in my .html file

i have this error Can't bind to 'events' since it isn't a known property of 'full-calendar'.

i also tried an other solution to set myEvents fetched from database to calendarOptions but it doesn't work.

calendarOptions: CalendarOptions = {
  initialView: 'timeGridWeek',
  dateClick: this.handleDateClick.bind(this), // bind is important!
  locale: 'fr',
  events: this.posts
}

user_6518546 · Answer

You will just need to use full-calendar exactly like what's in the documentation.
First you create your calendarOptions inside your component's Typescript file:

  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    dateClick: this.handleDateClick.bind(this), // bind is important!
    events: posts // here you should put your events data and it should be an array
  };

Then you append calendarOptions to full-calendar's "options" property:

user_1992916 · Answer

One thing I noticed is that the value of 'this' in the event-handlers (the js click events like dateClick & dateSelect) is the FullCalendar, and not the angular component!

This means that to dynamically add an event you can do this:

public selectDate(event: DateClickArg) {
  console.log(event);
  this.addEvent({
    start: event.date,
    title: "Dentist",
  });
}

I had the same issue, now that I'm looking more into this, I notice this in the angular plugin's documentation:

calendarOptions: CalendarOptions = {
  initialView: 'dayGridMonth',
  dateClick: this.handleDateClick.bind(this), // bind is important!

This binding is indeed important! Adding the binding allows me the access the calendarOptions in the eventHandler again:

public selectDate(event: DateClickArg) {
    console.log(event);

    this.calendarOptions.events = this.calendarEvents.concat({
      start: event.date,
      title: "Dentist",
    });
  }

@fullcalendar/angular - Events not working

2 Answers