Display events to angular angular full calendar

Question

calendar.html

<full-calendar 
  defaultView="dayGridMonth"
  [plugins]="calendarPlugins"
  [weekends]="true"
   [events]="[
        { title: 'event 1', date: '2019-06-07' },
    { title: 'event 2', date: '2019-06-12' }
  ]"
 ></full-calendar>

and this how look

everything is fine but ı want load event from json instead of “[events]” array and ı made service

schedule.ts

export class ScheduleProvider {

  constructor(public http: HttpClient) {
    console.log('Hello ScheduleProvider Provider');
  }

  getData():Observable<any[]>{
    return this.http.get<any[]>('url/events');

  }

}

this my json url/events

{“data”:[{“id”:1,“name”:"subject 1"“start_time”:“2019-07-21 00:00:00”},{“id”:2,“name”:"subject 2"“start_time”:“2019-07-28 00:00:00”},{“id”:3,“name”:"subject 3"“start_time”:“2019-07-30 00:00:00”}]}

calendar.ts

jsonEvents:any=[];

 ngOnInit(){

    this.svc.getData().subscribe(data=>this.jsonEvents=data);

  }

ı dont know how to display jsonEvents in calendar instead of events array . So please help me.

Answer 1

I know this is old, in case you cannot change in the API to return the data in the format accepted by FullCalendar, could you try transforming the data, I've done it in the OnInit, following way:

1.call service to get the date 2.map the data to return only events from the response 3.simple loop to map data to the ones accepted by FullCalendar

ngOnInit(): void {
  this.eventService.getEvents(1000, 1).pipe(map(data=>data.events)).subscribe(
    data => {
      for(let d of data) {
        const date = new Date(d.dateStart)
        const simpleDate = date.toISOString().split('T')[0]
        this.currentEvents.push({title: d.title, start: simpleDate, url: d.slug, end: d.dateEnd, allDay: true})
      }

      this.calendarOptions = {
        headerToolbar: {
          left: 'prev,next',
          center: 'title',
          right: 'dayGridMonth,listWeek,listYear'
        },
        initialView: 'dayGridMonth',
        events: this.currentEvents,// alternatively, use the `events` setting to fetch from a feed
        eventColor: '#3F51B5',
        eventDisplay: 'auto',
        eventTextColor: '#FFFFFF',
        weekends: true,
        editable: false,
        selectable: false,
        selectMirror: true,
        dayMaxEvents: true,
        firstDay: 1,
        eventClick: this.handleEventClick.bind(this),
        eventsSet: this.handleEvents.bind(this)
      };
    }
  );