Calendar

Elegant dark-themed calendar component with date selection and navigation.

Basic Calendar

January 2025

S
M
T
W
T
F
S
1<Calendar
2 month={0}
3 year={2025}

With Navigation

January 2025

S
M
T
W
T
F
S
1<CalendarWithNavigation
2 initialMonth={0}
3 initialYear={2025}

Different Months

February 2025

S
M
T
W
T
F
S

December 2024

S
M
T
W
T
F
S
1<Calendar month={1} year={2025} selectedDay={14} />
2<Calendar month={11} year={2024} selectedDay={25} />

Installation

npx zeroui@latest add calendar

Props

nametypedefaultdescription
monthnumber (0-11)0-
yearnumber2025-
selectedDaynumber11-
onDateSelect(day: number) => voidundefined-