npm package: @react-shamsi-salmanfood/calendar
Description: 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: 2.1.6

## 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 <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                                                                                           |