# Calendar components

> Find 78 versatile calendar components for React, styled with Tailwind CSS and designed for seamless scheduling and date-picking in Next.js.

200 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/calendar.

- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/appointment-picker.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/advanced-selection.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/range-calendar-with-presets.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/pricing-calendar.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/monthly-yearly-selects.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/date-range-picker.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/range-calendar.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/yearly-select-nav.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/two-months-calendar.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/with-time-input.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/calendar-with-presets.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/three-months-calendar.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/custom-select-day-style.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/with-date-input.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/with-button.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/multiple-day-selection.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/weekly-numbers.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/right-navigation.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/disabled-dates.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/with-today-button.md) — by Origin UI
- [Fullscreen Calendar](https://21st.dev/@ahmedmayara/components/fullscreen-calendar.md) — by Ahmed Mayara
- [Calendar](https://21st.dev/@designali-in/components/calendar.md) — by Ali Imam
- [Glass Calendar](https://21st.dev/@ravikatiyar162/components/glass-calendar.md) — by Ravi Katiyar
- [Event Manager](https://21st.dev/@vaib215/components/event-manager.md) — by Vaibhav Kumar Singh
- [Calendar with time pressets](https://21st.dev/@shadcn/components/calendar-with-time-pressets.md) — by shadcn
- [Calendar](https://21st.dev/@shugar/components/calendar.md) — by tigran tumasov
- [Calendar](https://21st.dev/@shugar/components/calendar/horizontal-layout.md) — by tigran tumasov
- [Calendar](https://21st.dev/@shugar/components/calendar/compact.md) — by tigran tumasov
- [Calendar](https://21st.dev/@shugar/components/calendar/presets.md) — by tigran tumasov
- [Calendar](https://21st.dev/@shugar/components/calendar/min-and-max-dates.md) — by tigran tumasov
- [Calendar](https://21st.dev/@shugar/components/calendar/stacked.md) — by tigran tumasov
- [Calendar](https://21st.dev/@shugar/components/calendar/presets-with-default-value.md) — by tigran tumasov
- [Calendar with booked days](https://21st.dev/@shadcn/components/calendar-with-booked-days.md) — by shadcn
- [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac.md) — by Origin UI
- [Visualize Booking](https://21st.dev/@ln-dev7/components/visualize-booking.md) — by LN
- [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac/range-calendar.md) — by Origin UI
- [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac/disabled-dates.md) — by Origin UI
- [Calendar](https://21st.dev/@coss.com/components/calendar.md) — by coss
- [Calendar](https://21st.dev/@shadcn/components/calendar.md) — by shadcn
- [Calendar](https://21st.dev/@coss.com/components/calendar/dropdown.md) — by coss
- [Calendar](https://21st.dev/@coss.com/components/calendar/range.md) — by coss
- [Calendar With Presets](https://21st.dev/@ruixen.ui/components/calendar-with-presets.md) — by Ruixen UI
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-book-appointment.md) — by ShadcnStudio
- [Range selection calendar](https://21st.dev/@shadcn/components/range-selection-calendar.md) — by shadcn
- [Economic Calendar](https://21st.dev/@ravikatiyar162/components/economic-calendar.md) — by Ravi Katiyar
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-with-event-list.md) — by ShadcnStudio
- [ThreeD Wall Calendar](https://21st.dev/@ruixen.ui/components/three-dwall-calendar.md) — by Ruixen UI
- [Calendar with event slots](https://21st.dev/@shadcn/components/calendar-with-event-slots.md) — by shadcn
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-left-side-navigation.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-twenty-two.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-month-year-navigation.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/variable-size-calendar.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-twenty-three.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/custom-day-select-calendar.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-with-range.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-two-months.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/week-number-calendar.md) — by ShadcnStudio
- [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/custom-range-selection-calendar.md) — by ShadcnStudio

Full component directory: https://21st.dev/llms.txt