jalali-js

English

فارسی

English

فارسی

Appearance

Documentation / @jalali-js/ui-react

@jalali-js/ui-react ​

npm versionLicense: MITDocs

Higher-level React UI on @jalali-js/react: RangePicker, InlineCalendar, EventCalendar, and TimeRangePicker, plus extra themes.

Start here: Live demo · Documentation

npm ecosystem: jalali-js · @jalali-js/i18n · @jalali-js/nlp · @jalali-js/holidays · @jalali-js/react · @jalali-js/vue · @jalali-js/web · @jalali-js/ui-react · @jalali-js/ui-vue · @jalali-js/ui-web

Contents ​

Install ​

sh
npm install @jalali-js/ui-react @jalali-js/react
ts
import '@jalali-js/react/date-picker.css';

Compatibility ​

ItemSupport
React18 and 19 (CI matrix)
Peersreact and react-dom >=18
Node22 and 24 (CI matrix)

Quick start ​

tsx
import '@jalali-js/react/date-picker.css';
import { RangePicker, InlineCalendar } from '@jalali-js/ui-react';

<RangePicker system="jalali" locale="fa" onChange={(value, range) => {}} />;
<InlineCalendar system="jalali" locale="fa" onSelect={setDay} />;

Components ​

ComponentRole
RangePickerStart and end dates, one storage value per end
InlineCalendarAlways-visible month grid
EventCalendarMonth / week / day / timeline views over your events
TimeRangePickerStart and end times

You own the event list and editing UI for EventCalendar. Expand recurring rules before pass-in. Layout helpers live in jalali-js.

Options ​

Key RangePicker props:

PropTypeDefaultNotes
systemCalendarSystem'jalali'Display calendar
localeLocaleCode'en'UI language
valueFormatValueFormat'gregorian-iso'Storage shape for ends
rulesSelectionRules-Day and range limits
showHolidaysbooleanfalseMark holidays

EventCalendar: view (month / week / day / timeline), events, timeline.layout (single / alternating / roadmap), onEventClick.

Full tables: React guide and Event calendar.

Theming ​

Same --jalali-* tokens as @jalali-js/react. Extra theme stylesheets ship under this package when you need a preset look.

css
[data-jalali-datepicker-root] {
  --jalali-primary: #0f766e;
  --jalali-radius: 12px;
}

See Theming.

License ​

MIT

Interfaces ​

Functions ​