@react-shamsi-salmanfood/calendar
TypeScript icon, indicating that this package has built-in type declarations

2.0.5 • Public • Published

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";

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

Readme

Keywords

none

Package Sidebar

Install

npm i @react-shamsi-salmanfood/calendar

Weekly Downloads

2

Version

2.0.5

License

MIT

Unpacked Size

542 kB

Total Files

16

Last publish

Collaborators

  • aminthemar