81773

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

Question:

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.

Answer1:

Using callback function should work for you:

<strong>view.html</strong>

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

<strong>component.ts</strong>

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>

Recommend

  • 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