Hijri calendars,
ready for your app.

Precise dates. Accessible interactions. A calendar that feels at home in your framework — and in Arabic.

Choose your framework. The examples follow you.

pnpm add @taqwim/vue-styledpnpm add @taqwim/react-styledpnpm add @taqwim/svelte-styledpnpm add @taqwim/solid-styledpnpm add @taqwim/angular-styled

Try the real componentتقويم

Theme Hijri calendar Size Language Text direction Select multiple dates Show Gregorian date Emphasize

Calendar for Jumada al-awwal 1448

Selectednothing yet

Tab into the grid, then use the arrow keys, Home/End, PageUp/PageDown (with Shift for years) and Enter to select. Under dir="rtl" the horizontal keys mirror.

ThemeHijri calendarSizeLanguageText direction Select multiple dates Show Gregorian dateEmphasize

Calendar for Jumada al-awwal 1448

Selectednothing yet

Tab into the grid, then use the arrow keys, Home/End, PageUp/PageDown (with Shift for years) and Enter to select. Under dir="rtl" the horizontal keys mirror.

Theme Hijri calendar Size Language Text direction Select multiple dates Show Gregorian date Emphasize

Calendar for Jumada al-awwal 1448

Selected nothing yet

Tab into the grid, then use the arrow keys, Home/End, PageUp/PageDown (with Shift for years) and Enter to select. Under dir="rtl" the horizontal keys mirror.

ThemeHijri calendarSizeLanguageText direction Select multiple dates Show Gregorian dateEmphasize

Calendar for Jumada al-awwal 1448

Selectednothing yet

Tab into the grid, then use the arrow keys, Home/End, PageUp/PageDown (with Shift for years) and Enter to select. Under dir="rtl" the horizontal keys mirror.

This documentation page does not embed an Angular calendar. The playground/angular app runs in the shared browser suite with the other four frameworks.

The adapter and playground also build with Angular's strictTemplates checks.

Change the language, theme, or calendar system. Use the arrow keys to explore.

Start with a date.

Conversions and arithmetic work on their own. No framework, no DOM, and no calendar component required.

Try the same Gregorian date with different systems. The rules you choose determine the result.

Work with date utilities

Gregorian date Calendar system

Hijri date21 Rabi' al-thani 144821 ربيع الثاني 1448

Umm al-Qura uses the bundled table, covering 1343–1500 AH.

toHijri('2026-10-02')
// {"hy":1448,"hm":4,"hd":21}

The calendar system matters.

Umm al-Qura is the default: a deterministic table covering 1343–1500 AH. Islamic Civil and Islamic TBLA use explicit arithmetic rules. The same Hijri fields can represent different absolute days.

Understand the three systems

Range modelUmm al-Qura is bounded by Taqwim's data. Civil and TBLA calculate dates in either direction.

Umm al-Qura: 1343–1500 AH
Islamic Civil: Proleptic arithmetic
Islamic TBLA: Proleptic arithmetic

Same fields, different epochCivil and TBLA use the same month and leap-year rules. Their starting day is different.

1 Muharram 1 AHTBLA · Thursday epoch18 July 622

1 Muharram 1 AHCivil · Friday epoch19 July 622

Gregorian dates are proleptic. For the same Hijri fields, TBLA resolves one day earlier than Civil.

One foundation.
Your framework.

Grid building, selection, paging, and keyboard navigation live in one shared state machine. Each adapter binds that behaviour to its framework.

Explore the calendar options

Headless: Behaviour and accessible attributes. Bring your own markup and styles.
Styled: Ready-to-use calendars and date pickers, built from the public headless components.
Shared themes: One CSS custom-property contract across frameworks. Choose a theme with an attribute.

Hijri calendars,ready for your app.

Start with a date.

The calendar system matters.

One foundation.Your framework.

Hijri calendars,
ready for your app.

One foundation.
Your framework.