React-ad-bs-calendar NPM

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()}