tuo-light-calendar (react)

light calendar

Screenshot

light-calendar

npm install
yarn install

npm run dev
yarn dev

npm install tuo-light-calendar
yarn add tuo-light-calendar

const [date, setDate] = useState<Date>(new Date());

return (
  <LightCalendar
    selectedDate={date}
    onDateChange={setDate}
  />
)

name	description	type	defalut
language	language of header and day text	'en' / 'ko'	'en'
selectedDate	currently selected date	Date
onDateChange	changing selectedDate when selecting a date	(date:Date) => void
disableDateClick	disable selecting a date	boolean	false
disableFuture	disable moving to future months from the current month	boolean	false
containerSize	size of the container including the header and calendar	{width: string, height: string}	{width: '100%', height: '100%'}
cellSize	width and height of the selection area and today's date area (px)	number	40
cellColor	background color of each of the selection area and today's date area	{today: stirng, selected: string}	{today: '#EDEDED', selected: '#ADD8E6'}
selectedFontColor	font color of the selected date	string	'#333333'
classNames	additional css class of calendar container and the text for day and date	{contanier: stirng, day?: string, current?: string, date?: string, differentMonth?: string, sunday?: string}
customHeader	customize the header	(dateText: string, handleMonth: (direction: 'prev'	'next') => void, clickToday: () => void, futureDisabled: boolean) => JSX.Element