Hijri Calendar

DayPicker supports the Hijri (Umm al-Qura) calendar via a dedicated build.

Install the React package and the Hijri calendar package:

npm

npm install @daypicker/react@next @daypicker/hijri@next

Yarn

yarn add @daypicker/react@next @daypicker/hijri@next

pnpm

pnpm add @daypicker/react@next @daypicker/hijri@next

Bun

bun add @daypicker/react@next @daypicker/hijri@next

Import DayPicker from @daypicker/hijri to render Hijri months and weekdays while keeping the usual DayPicker API.

import { DayPicker } from "@daypicker/hijri";

Basic usage (Arabic labels, RTL, Arabic-Indic digits)

import { DayPicker } from "@daypicker/hijri";

<DayPicker />;

View source

English labels, LTR, Latin digits

import { DayPicker, enUS } from "@daypicker/hijri";

<DayPicker locale={enUS} dir="ltr" numerals="latn" />;

View source

note

The Hijri build uses Umm al-Qura conversion tables with a supported Gregorian range of 1924-08-01 to 2077-11-16. Out-of-range date props are clamped to this interval.