angular2 fullcalender events are not updated when fetched from service . Http


I'm using the <strong><em>fullcalendar</em></strong> in Angular4 with help of <strong>npm install ap-angular2-fullcalendar --save</strong> . The events which are hard coded in the component are instantly shown in the calendar. but when I fetch from service method i.e HTTP call. after receiving events I'm updating calendar events like

template : <angular2-fullcalendar [options]=getCalendarOptions()>{{options | json}}></angular2-fullcalendar>

getCalendarOptions() { let calendarOptions = { header: { left: '', center: 'title', right: 'month,agendaWeek,agendaDay,today,listYear prev,next ' }, dayClick: (date, jsEvent, view) => { }, slotDuration: '00:20:00', color: '#456778', height: 650, defaultView: 'agendaDay', slotLabelFormat: 'h(:mm)a', businessHours: { start: '11:00', end: '12:00', dow: [1, 2, 3, 4, 5] }, minTime: "09:00:00", maxTime: "20:00:00", fixedWeekCount: false, defaultDate: new Date(), editable: true, eventLimit: true, selectable: true, nowIndicator :true, selectHelper: true, viewRender:( view, element )=>{ console.log("ViewRender: "+view.start +" ele:" +view.end) }, select: (start, end, allDay) => { }, views: { agenda: { eventLimit: 2 } }, eventClick: (calEvent, jsEvent, view) => { }, hiddenDays: [], events: (start, end, timezone, callback)=>{ //**This place Service is being called to fetch events from server.** this.appointmentService.getMonthEvents(start,end,'view').subscribe( res=>{ this.events=res // this.myCalendar.fullCalendar('refetchEventSources', this.events); this.myCalendar.fullCalendar('renderEvents', this.events, 'stick') console.log("Cal")} ) } }; return (calendarOptions); }

But events are not getting updated in full calendar. They are appearing after clicking other calendar views. How to update events instantly after they are available.


Using callback function should work for you:


<angular2-fullcalendar [options]="calendarOptions" ></angular2-fullcalendar>


export class App { @ViewChild(CalendarComponent) myCalendar: CalendarComponent; calendarOptions: any; constructor(private appointmentService: CalendarService) {} ngOnInit() { this.calendarOptions = { height: '1000', fixedWeekCount : false, header: { left: '', center: 'title', right: 'month,agendaWeek,agendaDay,today,listYear prev,next ' }, defaultDate: '2016-09-12', editable: true, eventLimit: true, events: (start, end, timezone, callback)=> { this.appointmentService.getMonthEvents() .subscribe(res => callback(res)); // just call callback } }; } }

<strong><a href="https://plnkr.co/edit/kFDOMBSlZC2TDU5cDXtp?p=preview" rel="nofollow">Plunker Example</a></strong>


  • Making bootstrap calendar render when data change in meteor
  • AnguralUI Calendar initialising issue: TypeError: Cannot read property 'length' of undefin
  • Filter events by adding and removing multiple event sources
  • FullCalendar - prompt on dayClick only in certain views
  • Issue loading events Fullcalendar.io
  • Using $popover service in Angular with Fullcalendar
  • Passing FullCalendar date to my dialog box modal form
  • jQuery Custom Radio Buttons not working as radio buttons
  • Index 1 is either negative or above rows count
  • Bootstrap Carousel Next/Prev not working
  • Change day number color on click - not background
  • How to mock current date?
  • Get count of created entries for each day
  • Webpack-dev-server and isomorphic react-node application
  • Different Datacontext for Command and CommandParameter
  • angular2 http.post() to local json file
  • undefined reference error due to use of static variables [duplicate]
  • Cannot style mat-tab without ::ng-deep and !important
  • richtextbox to string
  • Best HTML5 structure for a layout where the title/header is outside the article tag
  • How to align an image side by side with a heading element?
  • Formatting a text in a table cell with PHPWord e.g. bold, font, size e.t.c
  • Send emails through VB6 if no email client
  • How to use animated gif in Firemonkey?
  • Creating a C++ function that calls other Lua function
  • incomplete type 'struct' error in C
  • Check for zero lines output from command over SSH
  • saving file generated by TCPDF
  • How to view images from protected folder with php?
  • Textfile Structure (tables)
  • Installing iPhone App to iPhone
  • Illegal mix of collations for operation for date/time comparison
  • How to check if every primary key value is being referenced as foreign key in another table
  • vba code to select only visible cells in specific column except heading
  • Release, debug version and Authorization Google?
  • What do the 'size' numbers mean in the windbg !heap output?
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • python regex in pyparsing
  • Hits per day in Google Big Query
  • JTable with a ScrollPane misbehaving