import { Component } from '@angular/core';
import { WrCalendar } from 'ngwr/calendar';
@Component({ imports: [WrCalendar] })
export class MyComponent {}Calendar
A month calendar for picking a date or a date range.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Single date
Bind [(date)]. Click the header label to pick a month or a year.
<wr-calendar [(date)]="picked" />Date range
Set mode="range" and bind [(range)] to a [start, end] pair.
<wr-calendar mode="range" [(range)]="picked" />Bounds + filter
min and max limit the range. dateFilter turns single dates off, here weekends.
<wr-calendar
[(date)]="picked"
[min]="firstOfYear"
[max]="lastOfYear"
[dateFilter]="isWeekday"
/>Keyboard
The grid is one tab stop. The arrows move the cursor and skip dates that cannot be picked.
| Key | Does |
|---|---|
Previous / next day. Swapped under dir="rtl". | |
| Same weekday, one week back / forward. | |
| First / last day of the week, for the locale. | |
| Previous / next month. | |
| Previous / next year. | |
| Picks the day. |
| Key | Does |
|---|---|
Previous / next chip. Swapped under dir="rtl". | |
| One row up / down. | |
| First / last chip on the page. | |
| Picks the chip. |
API
| Name | Description | Type | Default |
|---|---|---|---|
mode | Selection mode. | WrCalendarMode | 'single' |
date | Two-way bindable single value (used when mode === 'single'). | Date | null | null |
range | Two-way bindable [start, end] (used when mode === 'range'). | WrCalendarRange | [null, null] |
min | Min selectable date (inclusive). | Date | null | null |
max | Max selectable date (inclusive). | Date | null | null |
dateFilter | Predicate — return false to disable specific dates (e.g. weekends only). | ((date: Date) => boolean) | null | null |
autoFocus | Move real focus onto the roving cell as soon as the grid is on screen. Off by default: a standalone <wr-calendar> sitting in a page must not steal focus on load. wr-date-picker turns it on for the popup it opens from its trigger, where the user asked to be taken to the calendar. | boolean | false |
disabled | Disable interaction entirely. | boolean | false |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/calendar's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-calendar-accent | var(--wr-color-primary) | .wr-calendar |
--wr-calendar-accent-contrast | var(--wr-color-primary-contrast) | .wr-calendar |
--wr-calendar-accent-ink | var(--wr-color-primary-ink) | .wr-calendar |
--wr-calendar-bg | var(--wr-color-surface) | .wr-calendar |
--wr-calendar-body-gap | var(--wr-space-sm) | .wr-calendar |
--wr-calendar-border | var(--wr-border-base) | .wr-calendar |
--wr-calendar-cell-size | 2rem | .wr-calendar |
--wr-calendar-chip-font-size | var(--wr-text-sm) | .wr-calendar |
--wr-calendar-chip-font-weight | var(--wr-font-weight-semibold) | .wr-calendar |
--wr-calendar-color | var(--wr-color-on-surface) | .wr-calendar |
--wr-calendar-day-font-size | var(--wr-text-sm) | .wr-calendar |
--wr-calendar-day-font-weight | var(--wr-font-weight-semibold) | .wr-calendar |
--wr-calendar-day-radius | var(--wr-border-radius-sm) | .wr-calendar |
--wr-calendar-font-family | var(--wr-font-family-base) | .wr-calendar |
--wr-calendar-gap | var(--wr-space-sm) | .wr-calendar |
--wr-calendar-grid-gap | var(--wr-space-xs) | .wr-calendar |
--wr-calendar-header-gap | var(--wr-space-sm) | .wr-calendar |
--wr-calendar-label-font-size | var(--wr-text-sm) | .wr-calendar |
--wr-calendar-label-font-weight | var(--wr-font-weight-semibold) | .wr-calendar |
--wr-calendar-label-line-height | var(--wr-text-base-leading) | .wr-calendar |
--wr-calendar-label-padding-x | var(--wr-space-sm) | .wr-calendar |
--wr-calendar-months-gap | var(--wr-space-xs) | .wr-calendar |
--wr-calendar-muted | var(--wr-color-on-surface-muted) | .wr-calendar |
--wr-calendar-padding | var(--wr-space-md) | .wr-calendar |
--wr-calendar-radius | var(--wr-border-radius-base) | .wr-calendar |
--wr-calendar-weekday-font-size | var(--wr-text-xs) | .wr-calendar |
--wr-calendar-weekday-font-weight | var(--wr-font-weight-semibold) | .wr-calendar |
--wr-calendar-weekday-letter-spacing | var(--wr-tracking-wider) | .wr-calendar |
--wr-calendar-weekday-line-height | var(--wr-text-base-leading) | .wr-calendar |
--wr-calendar-width | 17rem | .wr-calendar |
--wr-calendar-years-gap | var(--wr-space-xs) | .wr-calendar |
Dependencies
| Built on | ngwr/date |
|---|---|
| Used by | Date Picker |
See also
Component Date PickerA text field with a popup for picking a date, a time or both.Component Event calendarMonth, week and day views of events the user can move and resize.Component Calendar HeatmapA year of daily values as a grid of days.Pipe wrDateFormat a date with a named preset or a token string.Docs ConfigurationSet app-wide options at bootstrap.