Angular fullcalendar module

Jquery fullcalendar module FullCalendar

This package fullcalendar module for Angular 2, 4, 5

Demo project in Stackblitz DEMO

Demo src Demo

Getting started

Install via npm :

npm install ng-fullcalendar
npm install fullcalendar@3.6.1

Then include the FullCalendarModule module in your module.

import { FullCalendarModule } from 'ng-fullcalendar';

@NgModule({
  imports: [
    BrowserModule,
    FullCalendarModule,
    ...
  ]
  ...
})
export class AppModule {}

For index.html style urls

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css">

Or you can add this in your SCSS pipe

@import "~/fullcalendar/dist/fullcalendar.css";

Import CalendarComponent in your component :

import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  calendarOptions: Options;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
  constructor() {}
  ngOnInit() {
     this.calendarOptions = {
        editable: true,
        eventLimit: false,
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listMonth'
        },
        events: data
      };
  }

}

then your app.component.html

<div *ngIf="calendarOptions">
    <ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
        (eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
</div>

Events binging

From 1.5.0 version new feature [(eventsModel)]="events" two events binding

<div *ngIf="calendarOptions">
    <ng-fullcalendar #ucCalendar [options]="calendarOptions" [(eventsModel)]="events"></ng-fullcalendar>
</div>

ngOnInit() {
  this.eventService.getEvents().subscribe(data => {
    this.calendarOptions = {
      editable: true,
      eventLimit: false,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
      },
      selectable: true,
      events: [],
      };
  });
}
clearEvents() {
  this.events = [];
}
loadEvents() {
  this.eventService.getEvents().subscribe(data => {
    this.events = data;
  });
}

Callbacks

Output 14 EventEmitters

  clickButton
  eventClick
  eventDrop
  eventResize
  eventRender
  windowResize
  viewRender
  viewDestroy
  initialized
  select
  unselect
  dayClick
  navLinkDayClick
  navLinkWeekClick

API

More api docs: Official fullcalendar docs

Example render new event

 let el = {
   title: 'New event'
   start: '2017-10-07',
   end: '2017-10-10',
   ...
 }
 this.ucCalendar.fullCalendar('renderEvent', el);
 this.ucCalendar.fullCalendar('rerenderEvents');

TODO

• Support of all events
• Add CustomButtons property

Thanks

• Aleksandr Sobakar (@xaosaki)
• Mario Mol (@mariohmol)

License

MIT