ng-fullcalendar's Introduction

Angular fullcalendar module

Jquery fullcalendar module FullCalendar

This package fullcalendar module for Angular 2, 4

Demo project in Stackblitz DEMO

Demo src Demo

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">

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>

Callbacks

Output 7 EventEmitters

  clickButton
  eventClick
  eventDrop
  eventResize
  windowResize
  viewRender
  viewDestroy
  eventRender

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