ngx-aircal v1.3.0

ngx-aircal

Description

ngx-aircal is a modern, configurable and lightweight Angular date range picker.

Notes

• When setting the dateFormat option, be aware that you must use Unicode tokens

How do I install the library?

To install this component to an external project, follow the procedure:

npm install ngx-aircal --save

How do I import the calendar?

Add 'NgxAircalModule' module to your imports array in your module

import { NgxAircalModule } from "ngx-aircal";

@NgModule({
  imports: [
     ...,
    NgxAircalModule
})

How do I use the calendar?

Add the following to your html template. ngx-aircal uses a data attribute selector to keep your HTML valid:

<div data-ngx-aircal [options]="calendarOptions" 
    name="dateRange" 
    [(ngModel)]="dateRange"
    (onDateRangeCommitted)="onDateRangeCommitted($event)" 
    (onDateRangeChanged)="onDateRangeChanged($event)"
    (onCalendarViewChanged)="onCalendarViewChanged($event)" 
    (onInputFieldChanged)="onInputFieldChanged($event)"
    (onDateRangeInitialised)="onDateRangeInitialised($event)"
    (onDateRangeCleared)="onDateRangeCleared($event)">
</div>

Options

Initialise an options object as a component property. Now, pass this to the calendar component:

import { AircalOptions } from "ngx-aircal";

export class AppComponent {
    ...
    public calendarOptions: AircalOptions = new AircalOptions();
    ...
}

You can update options by passing an object into the constructor:

export class AppComponent {
    ...
    public calendarOptions: AircalOptions = new AircalOptions({
      inlineMode: true,
      daysSelectedCounterVisible: false
    });
    ...
}

Models

You can use ngModel or a reactive form to work with the calendar.

ngModel

Define an object with 2 props, startDate, and endDate. Both properties must be of type 'Date'.

ngOnInit() {
	this.dateRange = {
    startDate: new Date(
      2018,
      6,
      27
    ), 
    endDate: new Date(
      2018,
      8,
      27
    )
  };
}

Your should pass in the object into the ngModel box of bananas on your template:

<div data-ngx-aircal [options]="calendarOptions" [(ngModel)]="dateRange"></div>

Reactive forms

ngOnInit() {
  this.form = this._FormBuilder.group({
    dateRange: [{
      startDate: new Date(
        2018,
        6,
        27
      ),
      endDate: new Date(
        2018,
        8,
        27
      )
    }, Validators.required]
  }); 
}

Add the following inside your template:

<form [formGroup]="myForm">
    <div data-ngx-aircal [options]="calendarOptions" formControlName="dateRange"></div>
</form>

Events, callbacks & responses

There are many callbacks you can use to communicate with your parent component. A full list of callbacks is below.

<div data-ngx-aircal [options]="calendarOptions" 
    name="dateRange" 
    [(ngModel)]="dateRange"
    (onDateRangeCommitted)="onDateRangeCommitted($event)" 
    (onDateRangeChanged)="onDateRangeChanged($event)"
    (onCalendarViewChanged)="onCalendarViewChanged($event)" 
    (onInputFieldChanged)="onInputFieldChanged($event)"
    (onDateRangeInitialised)="onDateRangeInitialised($event)"
    (onDateRangeCleared)="onDateRangeCleared($event)">
</div>

Note the event name, and the provided callback function, which takes in $event as a parameter:

(onDateRangeCommitted)="onDateRangeCommitted($event)"

The plugin will respond with a specific set of properties - either:

class AircalResponse {
    public startDate: Date;
    public endDate: Date;
    public formattedStartDate: string;
    public formattedEndDate: string;
}

class AircalInputResponse {
    public startDate: Date;
    public endDate: Date;
    public formattedStartDate: string;
    public formattedEndDate: string;
    public isRangeValid: boolean;
}

Example usage:

public onDateRangeChanged(event: AircalResponse) {
	this.updatePageResults(event.startDate, event.endDate);
}

List of callbacks

All callbacks will return AircalResponse or AircalInputResponse type. AircalInputResponse has an extra boolean value to show you if the date is valid.

Author

• Author: Chris Swarbrick (chrisswarb)

Credit

• Icons by Dave Gandy and Lyolya from www.flaticon.com