The Ply calendar is a signal-driven month grid for a single date or a range. Copy it in with the CLI; keyboard arrows move between days. Pair it with the Pro datepicker overlay when you need an input that opens a popover instead of an inline grid.
Install with npx ply-ui-cli add calendar.
Need a compact field that opens this grid in an overlay? That is Pro datepicker (and date-range-picker). Set showTime on either field for a datetime. Time of day only is time-picker.
Default mode allowing selection of a single date.
October 2026
<ply-calendar
[selectedDate]="singleDate"
(dateSelected)="handleDateSelected($event)">
</ply-calendar>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add calendar
// Paths are relative to aliases.components (default: src/app/components)
import { CalendarComponent, CalendarDate } from './calendar/calendar.component';
@Component({
selector: 'app-calendar-example',
imports: [
CalendarComponent
],
template: `...`
})
export class CalendarExampleComponent {}Install
npx ply-ui-cli add calendar
Set mode="range" to enable selecting a start and end date.
October 2026
<ply-calendar
mode="range"
[rangeStart]="rangeStart"
[rangeEnd]="rangeEnd"
(rangeSelected)="handleRangeSelected($event)">
</ply-calendar>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add calendar
// Paths are relative to aliases.components (default: src/app/components)
import { CalendarComponent, CalendarDate } from './calendar/calendar.component';
@Component({
selector: 'app-calendar-example',
imports: [
CalendarComponent
],
template: `...`
})
export class CalendarExampleComponent {}Install
npx ply-ui-cli add calendar
Site-wide VPAT-style notes live on the accessibility report.
Run the following command to add this component to your project:
npx ply-ui-cli add calendar
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add calendar
// Paths are relative to aliases.components (default: src/app/components)
import { CalendarComponent, CalendarDate } from './calendar/calendar.component';
@Component({
selector: 'app-your-component',
imports: [
CalendarComponent
],
template: `...`
})
export class YourComponent {} API for calendar — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
CalendarDate | date | Date | — | — |
CalendarDate | isToday | boolean | — | — |
CalendarDate | isCurrentMonth | boolean | — | — |
CalendarDate | isSelected | boolean | — | — |
CalendarDate | isInRange | boolean | — | — |
CalendarDate | isRangeStart | boolean | — | — |
CalendarDate | isRangeEnd | boolean | — | — |
ply-calendar | class | string | '' | Additional CSS classes to merge into the host element. |
ply-calendar | panelId | unknown | `ply-calendar-grid-${++calendarIdCounter}` | ID for the calendar grid, used by combobox aria-controls on date pickers. |
ply-calendar | mode | 'single' | 'range' | 'single' | The selection mode. 'single' allows picking one day, 'range' allows picking start and end dates. |
ply-calendar | selectedDate | Date | null | null | The currently selected date (only used in 'single' mode). |
ply-calendar | rangeStart | Date | null | null | The start date of the selected range (only used in 'range' mode). |
ply-calendar | rangeEnd | Date | null | null | The end date of the selected range (only used in 'range' mode). |
ply-calendar | (dateSelected) | Date | — | Emits the selected Date when mode is 'single' and a day is clicked. |
ply-calendar | (rangeSelected) | { start: Date | null; end: Date | null; } | — | Emits an object containing start and end Dates when mode is 'range' and a day is clicked. |
Content