Skip to main content

Jalali (Persian) Calendar System

The Jalali (Persian/Solar Hijri) calendar system. Requires moment-jalaali.

Installation​

yarn add moment-jalaali
# or
yarn add moment-jalaali

Import​

import {
  jalaliSystem,
  createJalaliSystem,
  type JalaliDate,
  type JalaliSystemOptions,
  type JalaliConverter,
} from 'react-native-headless-calendar/systems/jalali';

Usage​

Default Instance​

<SingleDateProvider systems={[jalaliSystem]} />

With Custom Converter​

const customJalaliSystem = createJalaliSystem({
  converter: myJalaliConverter,
  label: 'Jalali',
});

<SingleDateProvider systems={[customJalaliSystem]} />;

Converter Interface​

Your converter must implement:

interface JalaliConverter {
  toJalali(date: Date): {
    jy: number; // Jalali year
    jm: number; // Jalali month (0-11)
    jd: number; // Jalali day
  };
  toGregorian(jy: number, jm: number, jd: number): Date;
}

Customization​

Labels​

const farsiJalaliSystem = createJalaliSystem({
  label: 'جلالی',
  monthLabels: [
    'فروردین',
    'اردیبهشت',
    'خرداد',
    'تیر',
    'مرداد',
    'شهریور',
    'مهر',
    'آبان',
    'آذر',
    'دی',
    'بهمن',
    'اسفند',
  ],
  weekdayLabels: [
    'شنبه',
    'یکشنبه',
    'دوشنبه',
    'سه‌شنبه',
    'چهارشنبه',
    'پنج‌شنبه',
    'جمعه',
  ],
});

Options​

interface JalaliSystemOptions {
  converter?: JalaliConverter;
  label?: string;
  monthLabels?: readonly string[];
  weekdayLabels?: readonly string[];
  formatDay?: (date: JalaliDate) => string;
  formatMonthYear?: (date: JalaliDate) => string;
}

Internal Representation​

interface JalaliDate {
  readonly jy: number; // Jalali year
  readonly jm: number; // Jalali month 0-11
  readonly jd: number; // Jalali day 1-31
}

Features​

  • 12 months
  • First 6 months: 31 days
  • Next 5 months: 30 days
  • Last month: 29 days (30 in leap years)

Multi-System Calendar​

import { gregorianSystem } from 'react-native-headless-calendar/systems/gregorian';
import { jalaliSystem } from 'react-native-headless-calendar/systems/jalali';

function PersianCalendar() {
  return (
    <SingleDateProvider
      systems={[jalaliSystem, gregorianSystem]}
      activeSystemId="jalali"
    >
      {/* render your own day grid with `useSingleCalendarSelector(selectSingleDays)` */}
    </SingleDateProvider>
  );
}