Calendar | Community Components - 21st | 21st

/Calendar /

Calendar

Here is Calendar component

Install

npx shadcn@latest add https://21st.dev/r/ShadcnStudio/calendar-1

Loading preview...

import CalendarDemo from "@/components/ui/calendar-1";

export default function DemoOne() {
  return <CalendarDemo />;
}

More examples

Calendar Two MonthsOpen page →

Loading preview...

Calendar With RangeOpen page →

Loading preview...

Calendar Multi month with range selection Open page →

Loading preview...

Calendar with minimum days selectionOpen page →

Loading preview...

Disable Day CalendarOpen page →

Loading preview...

Calendar Disabled weekend Open page →

Loading preview...

Variable Size CalendarOpen page →

Loading preview...

Calendar with Event ListOpen page →

Loading preview...

Multi Days SelectOpen page →

Loading preview...

Custom day select calendarOpen page →

Loading preview...

Custom Range Selection CalendarOpen page →

Loading preview...

Calendar Month Year NavigationOpen page →

Loading preview...

Calendar Left Side Navigation Open page →

Loading preview...

Week Number CalendarOpen page →

Loading preview...

Calendar Twenty TwoOpen page →

Loading preview...

Calendar Twenty ThreeOpen page →

Loading preview...

Calendar Book AppointmentOpen page →

Loading preview...

Published

10/14/2025

Install

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Install

Dependencies

Tags

Calendar

Install

More examples

Published

Similar components