ngx-fullcalendar

An Angular wrapper for the https://fullcalendar.io module

View the Project on GitHub StickNitro/ngx-fullcalendar

ngx-fullcalendar

GitHub issues GitHub forks GitHub stars GitHub license

latest npm

This package wraps the fullcalendar module for Angular v6 and above.

Access to the latest changes for fullcalendar v4 alpha 3 (fullcalendar and scheduler) can be found in the upgrade-v4-alpha branch and can be installed from NPM

Installation

Install via NPM

First install the peer dependencies, this is currently based around the fullcalendar v4 package which is in alpha, so install this version

npm install fullcalendar@4.0.0-alpha
npm install fullcalendar-scheduler@4.0.0-alpha.2

We also need to include moment and dragula

foo@bar:~$ npm install moment dragula

Modify your angular.json to import the relevant scripts and styles, it should look like this:

"styles": [
  ...
  "node_modules/dragula/dist/dragula.min.css",
  "node_modules/fullcalendar/dist/fullcalendar.min.css",
  "node_modules/fullcalendar-scheduler/dist/scheduler.min.css",
  ...
],
"scripts": [
  ...
  "./node_modules/moment/moment.js",
  "./node_modules/dragula/dist/dragula.min.js",
  "./node_modules/fullcalendar/dist/fullcalendar.min.js",
  "./node_modules/fullcalendar/dist/dragula.min.js",
  "./node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
]

Finally, install ngx-fullcalendar

foo@bar:~$ npm install ngx-fullcalendar

Getting Started

Import the NgxFullCalendarModule (see test application).

import { NgxFullCalendarModule } from 'ngx-fullcalendar';

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

Use ngx-fullcalendar in your app-component.html template.

<ngx-fullcalendar defaultView="month" [events]="events" [options]="options"></ngx-fullcalendar>

And in your app-component.ts component class:

import { FullCalendarOptions, EventObject } from 'ngx-fullcalendar';

@Component({
  selector: 'app-root',
  templateUrl: './app-component.html'
})
export class AppComponent implements OnInit {
  options: FullCalendarOptions;
  events: EventObject[];

  ngOnInit() {
    this.options = {
      defaultDate: '2018-07-26',
      editable: true,
      ...
    };

    this.events = [
      { id: 'a', title: 'My Birthday', allDay: true },
      { id: 'b', title: 'Friends coming round', start: '2018-07-26T18:00:00', end: '2018-07-26T23:00:00' }
    ]
  }
}

Inputs and Outputs

You can initialize the ngx-fullcalendar with the FullCalendarOptions object or by specify the various options directly on the component, all properties in the FullCalendarOptions can be set directly on the component itself.

export interface FullCalendarOptions {
  header?: any;
  isRTL?: boolean;
  weekends?: boolean;
  hiddenDays?: number[];
  fixedWeekCount?: boolean;
  weekNumbers?: boolean;
  businessHours?: any;
  height?: any;
  contentHeight?: any;
  aspectRatio?: number;
  eventLimit?: any;
  defaultDate?: any;
  locale?: string;
  timezone?: boolean | string;
  timeFormat?: string | null;
  editable?: boolean;
  droppable?: boolean;
  eventStartEditable?: boolean;
  eventDurationEditable?: boolean;
  defaultView?: string;
  allDaySlot?: boolean;
  allDayText?: string;
  slotDuration?: any;
  slotLabelInterval?: any;
  snapDuration?: any;
  scrollTime?: any;
  minTime?: any;
  maxTime?: any;
  slotEventOverlap?: boolean;
  nowIndicator?: boolean;
  dragRevertDuration?: number;
  dragOpacity?: number;
  dragScroll?: boolean;
  eventOverlap?: any;
  eventConstraint?: any;
  dayRender?: Function;
  navLinks?: boolean;
}

There are also the following events that can be bound:

API

View the Official fullcalendar docs for full details of the API.

TODO

License

MIT