Calendar | Community Components | 21st

/Calendar /

Calendar

Here is Calendar component

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

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Calendar

More examples

Published

Similar components