# Calendar > Month-view calendar — standalone widget for picking a single date or a date range. Built on the `WrDateAdapter` abstraction. Click the header label to zoom into month / year quick-pick views. Source: https://ngwr.dev/reference/components/calendar Kind: a11y ## Installation ```angular-ts import { WrCalendar } from 'ngwr/calendar'; import { provideWrDateAdapter } from 'ngwr/date'; // In main.ts bootstrapApplication(AppComponent, { providers: [provideWrDateAdapter()], }); // In any component @Component({ imports: [WrCalendar] }) export class MyComponent { protected readonly picked = signal(new Date()); } ``` ## Single date Default mode. Two-way bind a `Date` (or `null`). ```angular-html ``` ## Date range Set `mode="range"` and bind `[(range)]` to a `[start, end]` tuple. Hovering after picking the start previews the would-be selection. ```angular-html ``` ## Bounds + filter `min` / `max` clamp the selectable range; `dateFilter` is a predicate that disables individual dates (here: only weekdays). ```angular-html ``` ## Keyboard The grid is a SINGLE tab stop with a roving cursor — tabbing through a month is not 42 stops — so exactly one cell is tabbable at a time and the arrows move it. The header's `‹` / `›` buttons and the month/year label are separate, ordinary tab stops before it. | Key | Does | | --- | --- | | ArrowLeftArrowRight | Previous / next day. The pair swaps under `dir="rtl"` — these name a side of the screen. | | ArrowUpArrowDown | Same weekday, one week back / forward. | | HomeEnd | First / last day of the current week — which respects the adapter's first day of the week, not Sunday. | | PageUpPageDown | Previous / next month, scrolling the view with it. | | Shift + PageUpShift + PageDown | Previous / next year. | | EnterSpace | Picks the day under the cursor — the same commit as a click, including the second click of a range. | | Key | Does | | --- | --- | | ArrowLeftArrowRight | Previous / next chip, mirrored under `dir="rtl"`. | | ArrowUpArrowDown | One full row: three chips in the month view, four in the year view. | | HomeEnd | First / last chip on the page. The list does not wrap or spill into the next twelve — the header's `‹` / `›` are what change which twelve. | | EnterSpace | Left to the browser: each chip is a real `