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.