CODEWITHSUNDEEP
angularfullcalendar
Avinash Raj
Avinash Raj

Reputation: 174696

Angular2 Full Calender adding events dynamically

I want to add calender events dynamically. Currently I'm using angular2-fullcalender package.

calender.ts

calendarOptions: Object = {
    editable: false,
    eventLimit: true,
    header: {
      left: 'title',
      center: 'month,agendaWeek,agendaDay',
      right: 'prev,next,today'
    },
    defaultDate: new Date(),
    selectable: false,
    selectHelper: false,
    views: {
      month: { // name of view
        titleFormat: 'MMMM YYYY'
        // other view-specific options here
      },
      week: {
        titleFormat: " MMMM D YYYY"
      },
      day: {
        titleFormat: 'D MMM, YYYY'
      }
    },
    events: []
  };

I have tried the below code to add events to the calender from the service response.

// call to the backend service
getEvents() {
   events = backend.events;
   this.calendarOptions.events = events;
}

But typescript shows error on the above line. If I do so, then I also want to render the calender once events are added. All other answers shown on SO are regarding angular1.5 and not for angular2.

Update:

I have tried all the available options given below . But no one works.

addEvents() {
    let myCalendar: any = jQuery('angular2-fullcalendar');
    myCalendar.fullCalendar();
    myCalendar.fullCalendar('removeEvents');
    for (let event of this.events) {
      myCalendar.fullCalendar( 'renderEvent', event, true);
    }
    // jQuery('angular2-fullcalendar').fullCalendar('addEventSource', this.events);

    // jQuery('angular2-fullcalendar').fullCalendar('renderEvents');
  }

Upvotes: 1

Views: 10253

Answers (1)

Kyrsberg
Kyrsberg

Reputation: 440

I can't see any methods in that package for rendering new events.

I think you have to go mad and use jquery inside angular, which you should avoid.

getEvents() {
   events = backend.events;
   this.calendarOptions.events = events;
   $('#myCalendar').fullCalendar('renderEvents', events, true);
}

https://fullcalendar.io/docs/event_rendering/renderEvents/

Update/edit

Okay so I created a new project with angular CLI just to test that. This is what i have to get it working

template

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

Component

import { Component } from '@angular/core';

import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  calendarOptions = {
    height: 'auto',
    contentHeight: 'auto',
    fixedWeekCount: false,
    editable: true,
    eventLimit: true,
    defaultView: 'agendaWeek',
    slotDuration: '01:00:00',
    firstDay: 1,
    header: {
      right: 'today prev,next'
    },
    events: [
    ]
  };

  constructor() {

  }

  ngOnInit() {
    let newEvents = [
      {
        id: 1,
        title: 'name a',
        start: '2017-02-20T09:00',
        end: '2017-02-20T11:00'
      },
      {
        id: 2,
        title: 'name b',
        start: '2017-02-20T12:00',
        end: '2017-02-20T13:00'
      },
      {
        id: 3,
        title: 'name c',
        start: '2017-02-20T14:00',
        end: '2017-02-20T16:00'
      },
      {
        id: 4,
        title: 'name d',
        start: '2017-02-20T18:00',
        end: '2017-02-20T23:00'
      }
    ];
    this.calendarOptions.events = newEvents;
    $('#myCalendar').fullCalendar('renderEvents', newEvents, true);
  }
}

Upvotes: 4

Related Questions