React-bootstrap-jalali-calendar NPM

`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

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

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(
    <ThemeProvider dir="rtl">
        <App/>
    </ThemeProvider>
);

reportWebVitals();

index.html

Add dir="rtl" to your html

<!DOCTYPE html>
<html lang="en" dir="rtl">
...
</html>

Installation 🚀

In the project directory terminal, you can run:

npm install react-bootstrap-jalali-calendar

Output

When you click on the day, you will get this json.

Event property default is undefined

{
  "date": "1400/2/14",
  "day": 14,
  "event": {
    "day": 8,
    "description": "۸ تیر عید سعید قربان",
    "isHoliday": true
  },
  "gregorian": "2021-5-4",
  "month": 2,
  "name": "Tue",
  "year": 1400
}

Calendar

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 (
        <>
            <div className={"container pt-5"}>
                <div className={"row"}>
                    <div className={"col-3 mx-auto"}>
                        <Calendar events={events} callback={selectedDate} value={date} options={options}/>
                    </div>
                </div>
                <div className={"row mt-5"}>
                    <div className={"col-4 mx-auto text-center"}>
                        <h3>{date}</h3>
                    </div>
                </div>
            </div>
        </>
    )
}

export default App;

Simple input

Easy to use

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 (
        <>
            <Datepicker name={'test'}
                        options={options}
                        value={date}
                        callback={(day) => setDate(day.date)}/>
        </>
    )
};

export default App;

Multiple inputs

Multiple used

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 (
        <div className={"row"}>
            <div className={'col-12 col-lg-6 mb-3 mb-lg-0'}>
                <Datepicker name={'test'}
                            value={date}
                            callback={(day) => setDate(day.date)}/>
            </div>

            <div className={'col-12 col-lg-6 mb-3 mb-lg-0'}>
                <Datepicker name={'test2'}
                            value={date2}
                            callback={(day) => setDate2(day.date)}/>
            </div>
        </div>
    )
};

export default App;

Array inputs

Handle your array inputs

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 (
        <div className={"row"}>
            {
                items.map((item, index) => {
                    return <React.Fragment key={index}>
                        <div className={'col-12 col-lg-6 mb-3 mb-lg-0'}>
                            <Datepicker name={item.name}
                                        value={item.value}
                                        callback={(day) => setItemsValue(item, day.date)}/>
                        </div>
                    </React.Fragment>
                })
            }
        </div>
    )
};

export default App;

Calendar events

Set your events on calendar easily

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 (
        <>
            <Datepicker name={'test'}
                        events={events}
                        value={date}
                        callback={(day) => 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

[
  "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"}`
`hideTodayButton`	`false`		Hide today button from the calendar
`stopChangingMonths`	`false`		Disable changing month, it will effect years
`stopChangingYears`	`false`		Disable changing years
`hideToolsBar`	`false`		Hide calendar toolbar include: `change years`, `change month`
`calendarHeaderColor`	`primary`	BootstrapMainColors	Select from bootstrap main colors
`calendarToolsColor`	`light`	BootstrapMainColors	Select from bootstrap main colors