0.1.1 • Published 2 years ago
@react-shamsi/calendar v0.1.1
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 |