# @react-shamsi/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: Latest version **0.2.5** (published 2024-08-11) · MIT license · 0 weekly downloads ## Install ```sh npm install @react-shamsi/calendar pnpm add @react-shamsi/calendar yarn add @react-shamsi/calendar bun add @react-shamsi/calendar ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.5 | | Published | 2024-08-11 | | First published | 2022-10-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 539.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | kasraghoreyshi | ## Links - npm: https://www.npmjs.com/package/@react-shamsi/calendar - npm.io page: https://npm.io/package/@react-shamsi/calendar ## Dependencies (6) - [classnames](https://npm.io/package/classnames.md) ^2.3.2 - [date-fns-jalali](https://npm.io/package/date-fns-jalali.md) ^2.29.3-0 - [persian-helpers](https://npm.io/package/persian-helpers.md) ^0.1.2 - [@headlessui/react](https://npm.io/package/@headlessui/react.md) ^1.7.3 - [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.5 - [@react-shamsi/timepicker](https://npm.io/package/@react-shamsi/timepicker.md) * ## Recent versions - 0.2.5 (latest) — 2024-08-11 - 0.2.4 — 2024-08-11 - 0.2.3 — 2024-08-11 - 0.2.2 — 2024-08-11 - 0.2.1 — 2024-08-10 - 0.2.0 — 2024-08-10 - 0.1.1 — 2022-10-28 - 0.1.0 — 2022-10-28 - 0.0.2 — 2022-10-27 - 0.0.1 — 2022-10-27 - 0.0.0 — 2022-10-27 ## README ## 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: ```jsx import { Calendar } from "@react-shamsi/calendar"; import "@react-shamsi/calendar/dist/styles.css"; export default function Example() { return ; } ``` ### 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 | --- _Source: https://npm.io/package/@react-shamsi/calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._