Docs

Calendar

A container that displays data in calendar form.

January 2025

Usage

Example Code

1import { Calendar } from "inc-design-system/calendar";

Example Code

1const [date, setDate] = React.useState<Date | undefined>(new Date());
2  
3return <Calendar mode="single" selected={date} onSelect={setDate} />;

Props

Prop	Type	Description	Default
className	string	The class name of the calendar.	-
classNames	object	The class names for the calendar.	-
showOutsideDays	boolean	Whether to show outside days or not.	true
today	Date	The current date.	new Date()
selected	Date \| Date[] \| CalendarDateRange \| undefined	The selected date. Type `Date` for 'single' mode, `Date[]` for 'multiple' mode, and `CalendarDateRange` for 'range' mode.	-
onSelect	(selected: Date \| Date[] \| CalendarDateRange \| undefined) => void	Callback function that is called when a date or a range of dates is selected.	-
onDayClick	(date: Date) => void	The function to call when a day is clicked.	-
disabled	Date[]	The dates that should be disabled.	[]
hidden	Date[]	The dates that should be hidden.	[]
mode	'single' \| 'multiple' \| 'range'	The selection mode. Default is 'single'.	'single'
props	object	The other props for the DayPicker component by React Day Picker.	-