Icons

Icons by @ng-icons/tabler-icons

The component library does not provide icons.

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Calendar

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

01 Hero Preview

Grid: 8px · Scale: 1:1

02 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" />

03 Examples

Basic

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

Component Sheet

Grid: 8px · Scale: 1:1

Range Calendar

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

Component Sheet

Grid: 8px · Scale: 1:1

Month and Year Selector

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

Component Sheet

Grid: 8px · Scale: 1:1

June 2026

Presets

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

Component Sheet

Grid: 8px · Scale: 1:1

Date and Time Picker

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

Component Sheet

Grid: 8px · Scale: 1:1

Start Time

End Time

Disabled dates

Pass disabledDates to prevent selection and style unavailable dates.

Component Sheet

Grid: 8px · Scale: 1:1

Custom Cell Size

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

Component Sheet

Grid: 8px · Scale: 1:1

December 2026

Open from select

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

Component Sheet

Grid: 8px · Scale: 1:1

Week Numbers

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

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

Time zone: UTC

RTL support

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

Component Sheet

Grid: 8px · Scale: 1:1

يوليو ٢٠٢٦

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

04 Custom Styling

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

Component Sheet

Grid: 8px · Scale: 1:1

December 2026

05 Token Inspector

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

06 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-width: fit-content;
  --frame-calendar-padding: 0.875rem;
  --frame-calendar-gap: 1rem;
  --frame-calendar-cell-size: 2.25rem;
  --frame-calendar-effective-cell-size: var(--frame-calendar-cell-size);
  --frame-calendar-cell-gap-block: 0.125rem;
  --frame-calendar-cell-gap-inline: 0.125rem;
  --frame-calendar-column-count: 7;
  --frame-calendar-month-flex: 0 0 calc(var(--frame-calendar-effective-cell-size) * var(--frame-calendar-column-count));
  --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;
  --frame-calendar-select-min-width: 5rem;
  --frame-calendar-select-padding-inline: 0.75rem;