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