# `react-bootstrap-jalali-calendar` This package created specifically for `react-bootstrap` which will help you to easily add Jalali calendar in your project without any changing in the code. Enjoy coding ... - Required - How to make RTL with `react-bootstrap` - index.js - index.html - Installation - What return from the datepicker - Standalone Calendar - Simple datepicker input - Multiple inputs - Using datepicker in array - Calendar events - Datepicker Properties - Calendar Options --- # Version >= 0.2.1 Responsive setting for tablet, mobile and desktop --- `font-family: dana` | Desktop | Tablet & Mobile | ---------------- | ---------- | `window.innerWidth > 768` | `window.innerWidth <= 768` |

## Required This package created with ```text npm install react-bootstrap bootstrap npm install moment-jalaali ``` Please fill free If you encounter an issue using this product, be sure to notify us from issues part. _We will do our best to improve and cooperate with you_ ## index.js Make your project RTL ```js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; import 'bootstrap/dist/css/bootstrap.rtl.min.css'; import {ThemeProvider} from "react-bootstrap"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals(); ``` ## index.html Add `dir="rtl"` to your html ```html ... ``` ## Installation 🚀 In the project directory terminal, you can run: ```text npm install react-bootstrap-jalali-calendar ``` ## Output When you click on the day, you will get this json. _Event property default is `undefined`_ ```json { "date": "1400/2/14", "day": 14, "event": { "day": 8, "description": "۸ تیر عید سعید قربان", "isHoliday": true }, "gregorian": "2021-5-4", "month": 2, "name": "Tue", "year": 1400 } ``` ## Calendar ```js import Calendar from 'react-bootstrap-jalali-calendar/dist/calendar'; import react, {useState} from "react"; function App() { const options = { hideTodayButton: false, stopChangingYears: false, calendarHeaderColor: "primary", hideToolsBar: false, calendarToolsColor: "light", } const events = [ { year: 1402, data: [ { month: 4, data: [ { day: 8, isHoliday: true, description: '۸ تیر عید سعید قربان' }, { day: 16, isHoliday: true, description: '۱۶ تیر عید سعید غدیر خم [ ١٨ ذوالحجه ]' } ] }, { month: 5, data: [ { day: 5, isHoliday: true, description: '۵ اَمرداد تاسوعای حسینی [ ٩ محرم ]' }, { day: 6, isHoliday: true, description: '۶ اَمرداد عاشورای حسینی [ ١٠ محرم ]' } ] } ] } ]; const [date, setDate] = useState("1367/3/4"); const selectedDate = (day) => { console.log(day) setDate(day.date); } return ( <>

{date}

) } export default App; ``` ## Simple input Easy to use ```js import React from 'react'; import {useState} from "react"; import Datepicker from 'react-bootstrap-jalali-calendar'; const App = () => { //optional: with default value const options = { template: 'floating', formControlSize: "", hideFormControlLabel: false, hideTodayButton: false, stopChangingYears: false, calendarHeaderColor: "primary", hideToolsBar: false, calendarToolsColor: "light", } //you can remove it //with default value const [date, setDate] = useState("1367/3/4"); return ( <> setDate(day.date)}/> ) }; export default App; ``` ## Multiple inputs Multiple used ```js import React from 'react'; import {useState} from "react"; import Datepicker from 'react-bootstrap-jalali-calendar'; const App = () => { const [date, setDate] = useState(""); //with default value const [date2, setDate2] = useState("1367/3/10"); return (

setDate(day.date)}/>

setDate2(day.date)}/>

) }; export default App; ``` ## Array inputs Handle your array inputs ```js import React from 'react'; import {useState} from "react"; import Datepicker from 'react-bootstrap-jalali-calendar'; const App = () => { const data = [ { name: 'test3', value: "" }, { name: 'test4', value: "1400/2/14" } ]; const [items, handleItems] = useState(data); const setItemsValue = (item, date) => { const cloneItems = [...items]; const findItemByName = cloneItems.find(x => x.name === item.name); if (findItemByName) { findItemByName.value = date; } handleItems(cloneItems); } return (

{ items.map((item, index) => { return

setItemsValue(item, day.date)}/>

}) }

) }; export default App; ``` ## Calendar events Set your events on calendar easily ```js import React from 'react'; import {useState} from "react"; import Datepicker from 'react-bootstrap-jalali-calendar'; const App = () => { //with default value const [date, setDate] = useState("1367/3/4"); const events = [ { year: 1402, data: [ { month: 4, data: [ { day: 8, isHoliday: true, description: '۸ تیر عید سعید قربان' }, { day: 16, isHoliday: true, description: '۱۶ تیر عید سعید غدیر خم [ ١٨ ذوالحجه ]' } ] }, { month: 5, data: [ { day: 5, isHoliday: true, description: '۵ اَمرداد تاسوعای حسینی [ ٩ محرم ]' }, { day: 6, isHoliday: true, description: '۶ اَمرداد عاشورای حسینی [ ١٠ محرم ]' } ] } ] } ]; return ( <> setDate(day.date)}/> ) }; export default App; ``` ## `Datepicker` Properties 📄 | Name | Default | Required | Description | ------------- | ---------- | -------- | ----------- | `callback` | `null` | Yes | calendar method to pass the value | `value` | `null` | Yes | input value | `name` | `null` | Yes | input name | `id` | `{name}` | No | input id - default is {name} if empty | `label` | `{name}` | No | input id - default is {name} if empty | `placeholder` | `{name}` | No | input id - default is {name} if empty | `disabled` | `false` | No | disable input | `required` | `false` | No | required input | `events` | `[array]` | No | calendar events ## `Calendar` Options 📄 ###BootstrapMainColors ```json [ "danger", "primary", "dark", "info", "light", "secondary", "success", "warning" ] ``` | Name | Default | Options | Description | --------------------- | ---------- | ----------------------- | ----------- | `template` | `floating` | `floating` `formControl` | Bootstrap input type | `formControlSize` | `""` | `lg` `sm` `""` | Bootstrap input size if

`{template: "formControl"}`

| `hideFormControlLabel`| `false` | | Hide input label if

`{template: "formControl"}`