Angular 10 FullCalendar Rest Api No jQuery

Question

How i do to put the events in the calendar?

HTML

<full-calendar #calendar [options]="calendarOptions"></full-calendar>

TS

export class AppComponent implements OnInit {

  constructor(
    private vacationService: VacationService,
  ) {}

  ngOnInit(): void {
    this.loadEvents();
  }

   // references the #calendar in the template
   @ViewChild('calendar') calendarComponent: FullCalendarComponent;

  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    headerToolbar: { 
      left: '',
      center: 'title',
    },
    editable: true,   
  
  };

  loadEvents(): void {
      this.vacationService.getAll().subscribe((data) => {
        // My data
        console.log(data);
      })
  }
}

and this is my Api response

(1) [{…}] 0: date: "2018-03-29T13:34:00.000+0200" holidayGR: {id: 21, holiday: "First Event"} id: 7 proto: Object

Any help plz? or working example? Thx

Answer 1

The calendarOptions object has an events property where you can add events. Just try to add this to your AppComponent.

calendarOptions: CalendarOptions = {
  initialView: 'dayGridMonth',
  dateClick: this.handleDateClick.bind(this), // bind is important!
  events: [ // <= here
    { title: 'event 1', date: '2019-04-01' },
    { title: 'event 2', date: '2019-04-02' }
  ]
};

Copied from the FullCalendar Docs There is no need to access the @ViewChild in order to change events

Your load events could look something like this. I don't know how your data is defined.

loadEvents(): void {
  this.vacationService.getAll().subscribe((data) => {
    this.calendarOptions.events = data.map(
      evt => {
        return { date: evt.date, title: evt.holidayGR.holiday }
      })
  })
}