Calendar

Date and range selection with dropdown captions, week numbers, disabled dates, timezone formatting, and RTL support.

Preview

Usage

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { FrCalendarModule } from '@frame-ui-ng/components/calendar';

date = new FormControl<Date | null>(new Date());

HTML

<frame-calendar [formControl]="date" />

Examples

Basic

A single-date calendar with native button cells and month navigation.

Range Calendar

Set mode="range" and optionally render multiple months for start and end date selection.

Month and Year Selector

Use captionLayout="dropdown" with fromYear and toYear to expose month and year selects.

June 2026

Presets

Compose preset buttons around the calendar and update the selected date from application state.

Date and Time Picker

Pair the calendar with native time inputs when the flow needs a date and time range.

Start Time

End Time

Disabled dates

Pass disabledDates to prevent selection and style unavailable dates.

Custom Cell Size

Use --frame-calendar-cell-size to resize the day grid, including custom date labels.

December 2026

Open from select

Use the select trigger and panel primitives to present a compact date-picker style calendar.

Week Numbers

Use showWeekNumber to display ISO week numbers at the start of each row.

Wk	Sun	Mon	Tue	Wed	Thu	Fri	Sat
05
06
07
08
09
10

Selected Date With Time Zone

Pass timeZone when date labels and selected dates should be formatted for a specific zone.

Time zone: UTC

RTL support

Pass dir="rtl" and an RTL locale to mirror layout and localize month and weekday labels.

يونيو ٢٠٢٦

الأحد	الاثنين	الثلاثاء	الأربعاء	الخميس	الجمعة	السبت

Custom Styling

Override calendar tokens locally to tune the surface, selected day color, focus ring, navigation controls, or cell size.

December 2026

Token Inspector

Inspect the calendar shell, navigation, caption, weekday labels, day cells, selected state, and range state.

Design Tokens

Use these CSS custom properties to tune calendar surface, navigation, cells, selected dates, ranges, disabled dates, and focus treatment.

SCSS


  --frame-calendar-bg: var(--frame-surface);
  --frame-calendar-color: var(--frame-surface-foreground);
  --frame-calendar-border: var(--frame-border);
  --frame-calendar-radius: var(--frame-radius-lg);
  --frame-calendar-padding: 0.875rem;
  --frame-calendar-gap: 1rem;
  --frame-calendar-cell-size: 2.25rem;
  --frame-calendar-cell-radius: var(--frame-radius-md);
  --frame-calendar-muted-color: var(--frame-muted-foreground);
  --frame-calendar-day-hover-bg: var(--frame-muted);
  --frame-calendar-day-selected-bg: var(--frame-primary);
  --frame-calendar-day-selected-color: var(--frame-primary-foreground);
  --frame-calendar-day-range-bg: color-mix(in srgb, var(--frame-primary) 14%, transparent);
  --frame-calendar-day-today-border: color-mix(in srgb, var(--frame-primary) 55%, var(--frame-border));
  --frame-calendar-day-disabled-opacity: 0.38;