If you are enjoying react-shamsi and want to see it improve, please consider giving it a star. Thank you in advance!

What is react-shamsi?

React-shamsi is a set of React components that help you create utilities related to jalali dates such as calendars and date pickers and (coming in a future update) time pickers.

Demo: https://react-jalali-demo.vercel.app/

Installation

npm install @react-shamsi/calendar npm install @react-shamsi/datepicker

or if using Yarn: yarn add @react-shamsi/calendar yarn add @react-shamsi/datepicker

Jalali calendar

Let’s start by displaying a very simple Jalali calendar using react-shamsi. We do it by import the styles and the component itself like so:

import { Calendar } from "@react-shamsi/calendar";
import "@react-shamsi/calendar/dist/styles.css";
// If you want to use the time picker
import "@react-shamsi/timepicker/dist/styles.css";

export default function Example() {
  return <Calendar />;
}

Configuration

Now we are going to explore every single prop that could be passed to Calendar.

Prop name Description Default value
highlightToday Highlights the current day that is displayed in the calendar. true
onChange Function that is called when the user selects a date n/a
activeDate Controls the active date in the calendar n/a
defaultActiveDate Sets the default date in the calendar without explicitly controlling it. n/a
theme Customizes how the calendar looks. Has 3 pre-built themes that are dark, darkRed and light and also could have a completely customized theme. For more information on how to customize the calendar’s appearance, please visit the following section. light
showGoToToday When enabled, it shows the go to today button which is written as: برو به امروز true
minDate When you pass a date to this prop, the user can’t select any date older than the minDate. n/a
maxDate When you pass a date to this prop, the user can’t select any date newer than the maxDate. n/a
disabledDates When a list of dates is passed to this prop, those dates will become unselectable []
showFooter Controls whether or not the footer should be shown true
disableTransitions When set to true, it disables all the transitions across the calendar. false
bodyTransition Can be set to either of these options: zoomIn, zoomOut and fade zoomIn
showFridaysAsRed When set to true, any friday appearing on the calendar will appear as red/selected color in the theme. true
months Names of the 12 months as an array. [“فروردین”,”اردیبهشت”,”خرداد”,”تیر”,”مرداد”,”شهریور”,”مهر”,”آبان”,”آذر”,”دی”,”بهمن”,”اسفند”,]
onConfirm Function that gets called when the user clicks the confirm button n/a
onCancel Function that gets called when the user clicks the cancel button n/a

Jalali date picker

Let’s start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:

import { DatePicker } from "@react-shamsi/datepicker";
import "@react-shamsi/calendar/dist/styles.css";
import "@react-shamsi/datepicker/dist/styles.css";
// If you want to use the time picker
import "@react-shamsi/timepicker/dist/styles.css";

export default function Example() {
  return <DatePicker />;
}

Configuration

Now we are going to explore every single prop that could be passed to DatePicker.

Prop name Description Default value
autoUpdate Automatically updates the input whenever the user changes the active date. This means that the confirm button won’t be needed for saving the date anymore. false
defaultDate The date that will be displayed on the input by default n/a
calendarProps Every prop for configuring the calendar component n/a
date Changes the date in a controlled manner n/a
dateFormat The format that the date will be displayed in “yyyy/MM/dd”
onChange Function that gets called whenever the user selects a date. The new date will be passed as it’s argument n/a
persianDigits Will convert the input’s date to persian digits false
…Input element props Every other prop that can be passed to an input can be also passed to this component. n/a

Credits

Design credit goes to https://dribbble.com/eanlami for their awesome design: https://www.figma.com/file/tuXbhHlGs8eQpL1l0NAHHe/Calender?node-id=0%3A1

Todo

  • Time Picker
  • Ranged dates

React-shamsi is used in:

Horoofun – https://horoofun.ir

Issues and contribution

Every single issue is welcomed and so is every contribution. I would be glad to hear your suggestions/requests for future updates.

GitHub

View Github