Calendar overview

NbCalendarComponent

Calendar component provides a capability to choose a date.

<nb-calendar [(date)]="date"></nb-calendar>
<nb-calendar [date]="date" (dateChange)="handleDateChange($event)"></nb-calendar>

Basic usage example

Installation

Import NbCalendarModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbCalendarModule,
  ],
})
export class PageModule { }

Usage

If you want to select ranges you can use NbCalendarRangeComponent.

<nb-calendar-range [(range)]="range"></nb-calendar-range>
<nb-calendar-range [range]="range" (rangeChange)="handleRangeChange($event)"></nb-calendar-range>

In order to use it, you have to import NbCalendarRangeModule.

The calendar component is supplied with a calendar navigation that contains navigate buttons. If you do not want to use it you can hide calendar navigation using showNavigation property.

As you can see in the basic usage example calendar contains previous and next month days which can be disabled using boundingMonth property.

You can define starting view of the calendar by setting startView property. Available values: year, month and date.

You can use a larger version of the calendar by defining size property. Available values: medium(which is default) and large.

Calendar supports min and max dates which disables values out of min-max range.

Also, you can define custom filter property that should be predicate which receives date and returns false if this date has to be disabled. In this example, we provide the filter which disables weekdays.

Week numbers column could be enabled via showWeekNumber binding:

If you need create custom cells you can easily provide custom components for calendar. For examples if you want to show any average price under each date you can just provide custom dayCellComponent. Custom cells for month and year can be provided the same way, check API reference.