@laruz7476/react-butty-persian-calendar NPM

Getting start with TSDX and Typescript

This package is published on npm and can be accessed and installed. react-butty-persian-calendar.

How do I used id ?

You must first install the package from the npm repository.

npm i @laruz7476/react-butty-persian-calendar

Calendar base options

Option	Usage	Default Value	Required	Sample	args
onChange	get data from calendar	now date timestamp	true	`onChange={yourFunc(date){console.log(date)}`	null
defaultValue	set your default date	now date timestamp	false	`defaultValue={now Date()}`	string date or timestamp
icon	jsx calendar icon element	null	true	`icon={<AiFillCalendar />}`	jsx icon

Calendar custom options

Option	Usage	Default Value
iconSize	change calendar icon size	`{width:'20px',height:'20px'}`
sidebarBG	sidebar background color	`#f7f7f7`
sidebarColor	sidebar text color	`#212121`
containerBG	container background color	`#ffffff`
containerColor	container text color	`#212121`
selectMonthBG	background month selector	`#ffffff`
selectMonthColor	text color month selector	`#212121`
accessBtnType	change submit btn style	`success` `primary` `warning` `danger` `default`
cancelBtnType	change cancel btn style	`success` `primary` `warning` `danger` `default`
showType	input box show type	`pretty` `default`
activeColor	the color of the day selected	`#3f51b5`

Example code

...
import {ButtyCalendar} from "@laruz7476/react-butty-persian-calendar";

function App(){
  function onChangeCalendar(date){
    console.log(date)
  }
  return (
    <ButtyCalendar onChange={onChangeCalendar} icon={<AiFillCalendar />} />
  )
}

export default App;