Angular fullcalendar module

Jquery fullcalendar module FullCalendar

This package wraps the fullcalendar module for Angular.

Demo project in Stackblitz DEMO

Demo src Demo

This package support Angular 6, see please demo src.

TODO

• Upgrate this package to fullcalendar version 4! Stop Jquery!

Getting started

Install via npm :

npm install ng-fullcalendar
npm install [email protected]

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 27 EventEmitters

    eventDrop
    eventResize
    eventResizeStart
    eventResizeStop
    eventClick
    clickButton
    windowResize
    viewRender
    eventAfterRender
    eventAfterAllRender
    viewDestroy
    eventRender
    eventDestroy
    eventMouseOver
    eventMouseOut
    initialized
    select
    unselect
    dayClick
    navLinkDayClick
    navLinkWeekClick
    eventDragStart
    eventDragStop
    drop
    eventReceive
    dayRender
    resourceRender

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');

Thanks

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

License

MIT