react-ad-bs-calendar

react-ad-bs-calendar is a React package offering a bilingual calendar display supporting both AD and BS (Nepali) date systems, with seamless toggling between English and Nepali languages for enhanced user accessibility.

Installation

npm install react-ad-bs-calendar

Usage

Here's an example of basic usage:

import Calendar from 'react-ad-bs-calendar';
import 'react-ad-bs-calendar/dist/style.css';

function MyApp() {
  return (
    <div>
      <Calendar />
    </div>
  );
}

Custom styling

If you want to use default react-ad-bs-calendar styling to build upon it, you can import react-ad-bs-calendar's styles by using:

import 'react-ad-bs-calendar/dist/style.css';

User guide

Calendar

Displays a calendar in AD and BS.

Props

| Prop | Default Value | Description | Example Value | |---------------|-------------------------------------------|------------------------------------------------------------------|----------------------------------| | mode | "AD" | Calendar mode (AD or BS) | "AD" | | language | "EN" | Calendar language (English or Nepali) | "EN" | | value | "" | Initial selected date in "YYYY-MM-DD" format | "2024-01-17" | | onClickDate | (value, date_ad) => {} | Callback function on date click | - | | onChangeYear | (date_ad,start_date_ad,end_date_ad) => {} | Callback function on year change | - | | onChangeMonth | (date_ad,start_date_ad,end_date_ad) => {} | Callback function on month change | - | | maxDate | "" | Maximum allowed date in "YYYY-MM-DD" format | "2050-12-31" | | minDate | "" | Minimum allowed date in "YYYY-MM-DD" format | "2000-01-01" | | weekends | [0, 6] | Array of weekend days (0 = Sunday, 1 = Monday, ..., 6 = Saturday) | [0, 6] | | tileContent | (date_ad) => React.ReactNode | Custom content for a date tile | (date_ad) => {date_ad} | | events | [] | Array of {name?:string,date:Date,type='holiday']} | [{name?:"Dashain",type:"holiday",date:new Date()}] |

License

The MIT License.

Author

Araj Chalise