/** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ import { EventEmitter, Type } from '@angular/core'; import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode, NbCalendarSizeValues, NbCalendarViewModeValues } from '../calendar-kit/model'; import { NbBooleanInput } from '../helpers'; import * as i0 from "@angular/core"; /** * Calendar component provides a capability to choose a date. * * ```html * * * ``` * * Basic usage example * @stacked-example(Showcase, calendar/calendar-showcase.component) * * ### Installation * * Import `NbCalendarModule` to your feature module. * ```ts * @NgModule({ * imports: [ * // ... * NbCalendarModule, * ], * }) * export class PageModule { } * ``` * ### Usage * * If you want to select ranges you can use `NbCalendarRangeComponent`. * * ```html * * * ``` * * In order to use it, you have to import `NbCalendarRangeModule`. * @stacked-example(Range, calendar/calendar-range-showcase.component) * * 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. * @stacked-example(Without navigation, calendar/calendar-without-navigation.component) * * As you can see in the basic usage example calendar contains previous and next month days * which can be disabled using `boundingMonth` property. * @stacked-example(Bounding months, calendar/calendar-bounding-month.component) * * You can define starting view of the calendar by setting `startView` property. * Available values: year, month and date. * @stacked-example(Start view, calendar/calendar-start-view.component) * * You can use a larger version of the calendar by defining size property. * Available values: medium(which is default) and large. * @stacked-example(Size, calendar/calendar-size.component) * * Calendar supports min and max dates which disables values out of min-max range. * @stacked-example(Borders, calendar/calendar-min-max.component) * * 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. * @stacked-example(Filter, calendar/calendar-filter.component) * * Week numbers column could be enabled via `showWeekNumber` binding: * @stacked-example(Week number, calendar/calendar-week-number.component) * * 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. * @stacked-example(Custom day cell, calendar/calendar-custom-day-cell-showcase.component) * * @styles * * calendar-width: * calendar-background-color: * calendar-border-color: * calendar-border-style: * calendar-border-width: * calendar-border-radius: * calendar-text-color: * calendar-text-font-family: * calendar-text-font-size: * calendar-text-font-weight: * calendar-text-line-height: * calendar-picker-padding-top: * calendar-picker-padding-bottom: * calendar-picker-padding-start: * calendar-picker-padding-end: * calendar-navigation-text-color: * calendar-navigation-text-font-family: * calendar-navigation-title-text-font-size: * calendar-navigation-title-text-font-weight: * calendar-navigation-title-text-line-height: * calendar-navigation-padding: * calendar-cell-inactive-text-color: * calendar-cell-disabled-text-color: * calendar-cell-hover-background-color: * calendar-cell-hover-border-color: * calendar-cell-hover-text-color: * calendar-cell-hover-text-font-size: * calendar-cell-hover-text-font-weight: * calendar-cell-hover-text-line-height: * calendar-cell-active-background-color: * calendar-cell-active-border-color: * calendar-cell-active-text-color: * calendar-cell-active-text-font-size: * calendar-cell-active-text-font-weight: * calendar-cell-active-text-line-height: * calendar-cell-today-background-color: * calendar-cell-today-border-color: * calendar-cell-today-text-color: * calendar-cell-today-text-font-size: * calendar-cell-today-text-font-weight: * calendar-cell-today-text-line-height: * calendar-cell-today-hover-background-color: * calendar-cell-today-hover-border-color: * calendar-cell-today-active-background-color: * calendar-cell-today-active-border-color: * calendar-cell-today-disabled-border-color: * calendar-cell-today-selected-background-color: * calendar-cell-today-selected-border-color: * calendar-cell-today-selected-text-color: * calendar-cell-today-selected-hover-background-color: * calendar-cell-today-selected-hover-border-color: * calendar-cell-today-selected-active-background-color: * calendar-cell-today-selected-active-border-color: * calendar-cell-today-in-range-background-color: * calendar-cell-today-in-range-border-color: * calendar-cell-today-in-range-text-color: * calendar-cell-today-in-range-hover-background-color: * calendar-cell-today-in-range-hover-border-color: * calendar-cell-today-in-range-active-background-color: * calendar-cell-today-in-range-active-border-color: * calendar-cell-selected-background-color: * calendar-cell-selected-border-color: * calendar-cell-selected-text-color: * calendar-cell-selected-text-font-size: * calendar-cell-selected-text-font-weight: * calendar-cell-selected-text-line-height: * calendar-cell-selected-hover-background-color: * calendar-cell-selected-hover-border-color: * calendar-cell-selected-active-background-color: * calendar-cell-selected-active-border-color: * calendar-day-cell-width: * calendar-day-cell-height: * calendar-month-cell-width: * calendar-month-cell-height: * calendar-year-cell-width: * calendar-year-cell-height: * calendar-weekday-background: * calendar-weekday-divider-color: * calendar-weekday-divider-width: * calendar-weekday-text-color: * calendar-weekday-text-font-size: * calendar-weekday-text-font-weight: * calendar-weekday-text-line-height: * calendar-weekday-holiday-text-color: * calendar-weekday-height: * calendar-weekday-width: * calendar-weeknumber-background: * calendar-weeknumber-divider-color: * calendar-weeknumber-divider-width: * calendar-weeknumber-text-color: * calendar-weeknumber-text-font-size: * calendar-weeknumber-text-font-weight: * calendar-weeknumber-text-line-height: * calendar-weeknumber-height: * calendar-weeknumber-width: * calendar-large-width: * calendar-day-cell-large-width: * calendar-day-cell-large-height: * calendar-weekday-large-height: * calendar-weekday-large-width: * calendar-weeknumber-large-height: * calendar-weeknumber-large-width: * calendar-month-cell-large-width: * calendar-month-cell-large-height: * calendar-year-cell-large-width: * calendar-year-cell-large-height: * */ export declare class NbCalendarComponent { /** * Defines if we should render previous and next months * in the current month view. * */ boundingMonth: boolean; /** * Defines starting view for calendar. * */ startView: NbCalendarViewMode; static ngAcceptInputType_startView: NbCalendarViewModeValues; /** * Minimum available date for selection. * */ min: D; /** * Maximum available date for selection. * */ max: D; /** * Predicate that decides which cells will be disabled. * */ filter: (D: any) => boolean; /** * Custom day cell component. Have to implement `NbCalendarCell` interface. * */ dayCellComponent: Type>; /** * Custom month cell component. Have to implement `NbCalendarCell` interface. * */ monthCellComponent: Type>; /** * Custom year cell component. Have to implement `NbCalendarCell` interface. * */ yearCellComponent: Type>; /** * Size of the calendar and entire components. * Can be 'medium' which is default or 'large'. * */ size: NbCalendarSize; static ngAcceptInputType_size: NbCalendarSizeValues; visibleDate: D; /** * Determines should we show calendars navigation or not. * */ showNavigation: boolean; /** * Date which will be rendered as selected. * */ date: D; /** * Determines should we show week numbers column. * False by default. * */ get showWeekNumber(): boolean; set showWeekNumber(value: boolean); protected _showWeekNumber: boolean; static ngAcceptInputType_showWeekNumber: NbBooleanInput; /** * Sets symbol used as a header for week numbers column * */ weekNumberSymbol: string; /** * Sets first day of the week, it can be 1 if week starts from monday and 0 if from sunday and so on. * `undefined` means that default locale setting will be used. * */ firstDayOfWeek: number | undefined; /** * Emits date when selected. * */ dateChange: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "nb-calendar", never, { "boundingMonth": { "alias": "boundingMonth"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "dayCellComponent": { "alias": "dayCellComponent"; "required": false; }; "monthCellComponent": { "alias": "monthCellComponent"; "required": false; }; "yearCellComponent": { "alias": "yearCellComponent"; "required": false; }; "size": { "alias": "size"; "required": false; }; "visibleDate": { "alias": "visibleDate"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "date": { "alias": "date"; "required": false; }; "showWeekNumber": { "alias": "showWeekNumber"; "required": false; }; "weekNumberSymbol": { "alias": "weekNumberSymbol"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; }, { "dateChange": "dateChange"; }, never, never, false, never>; }