AirbnbCalendar

You can find online running demo here.

Usage

Install or add via ng

ng add ngx-airbnb-calendar

Then add AirbnbCalendarModule into your AppModule

import { AirbnbCalendarModule } from 'ngx-airbnb-calendar';

@NgModule({
  imports: [BrowserModule, AirbnbCalendarModule],
  declarations: [AppComponent]
})
export class AppModule {}

Set options in your component:

import { Component } from '@angular/core';
import { CalendarOptions } from 'ngx-airbnb-calendar';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  options: CalendarOptions = {
    firstCalendarDay: 1,
    format: 'dd-LL-yyyy'
  };
}

And use airbnb-calendar directive on your <input />

<input type="text" [(ngModel)]="value" airbnb-calendar [options]="options" />

Available Options

| Option | Description | Value Type | Default Value | | ---------------- | --------------------------------------------------------------------------- | -------------- | ----------------- | | minDate | Minimum date available for selection | Date | null | | maxDate | Maximum date available for selection | Date | null | | minYear | Minimal shown year in calendar | number | null | | maxYear | Maximum shown year in calendar | number | null | | format | date-fns format used to generate ngModel value | string | yyyy/LL/dd | | formatTitle | date-fns format used to display month and year in calendar controls | string | MMMM uuuu | | formatDays | date-fns format used to display day names in calendar header | string | eeeeee | | firstCalendarDay | Options to configure first day in calendar, ie 0 for Sunday or 1 for Monday | number | 0 | | locale | date-fns locale for days and months translation | Locale | enUS | | closeOnSelected | Option enables auto close calendar on date range selection | boolean | false |

License

MIT