Calendar Components

Dev Design Library indexes 181 calendar components from 46 open-source UI libraries, with the most coming from ReUI, Watermelon UI, Origin UI, Shadcn Space and OpenSourceUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Calendar components belong to the Data display group.

Showing 120 of 181, a mix from every library. Open a library to see all of its components.

• Calendarshadcn/ui · ReactMonth grid date picker (react-day-picker): pick a single day, several days or a range with a start and an end date…
• CalendardaisyUI · CSS (Tailwind)
• CalendarChakra UI · ReactUsed to display an inline calendar for selecting dates or date ranges.
• CalendarHeroUI · ReactComposable date picker with month grid, navigation, and year picker support built on React Aria Calendar
• CalendarReact Spectrum · ReactCalendars display a grid of days in one or more months and allow users to select a single date.
• Calendarcoss ui · ReactA date picker component with range and multi-select support.
• CalendarOrigin UI · ReactA date picker component with range and multi-select support.
• Date PickerArk UI · ReactA component that allows users to select a date from a calendar.
• CalendarTremor · React
• Basic calendarReUI · ReactBasic calendar
• Date PickerPark UI · ReactAn input component for selecting dates with a calendar interface.
• AI ScheduleKokonut UI · ReactMeeting times the assistant found, each with a strip of both calendars so you can see why it is free. Booking folds…
• calendarIntent UI · Reactcalendar
• Date PickerUntitled UI React · React
• Availability SchedulerbeUI · ReactWeekly availability editor where each day springs between available and unavailable, time ranges add and remove with…
• CalendarTailGrids · ReactA calendar component with internationalization support.
• Event CalendarSpectrum UI · Reactcomponent for the Event Calendar
• CalendarVengeance UI · React
• CalendarFluid Functionalism · ReactMonth grid on DayPicker v10 for a single day or a range: one fluid hover highlight across one or two months that…
• CalendarPanel UI · React NativeA month of days, for picking one, several, or a range.
• Calendar 01 - Standard calendarShadcn Space · ReactCalendar component
• Booking Slot CalendarOpenSourceUI · React
• MedicalBoardUI · React
• CalendarTremor Blocks · React
• CalendarShadcn Dashboard · React
• Date StripSwiftPieces · SwiftUIA week of dates in a row from the user's calendar: the red pill flows to the day you tap, and swiping pages by week.
• CalendarObsidianUI · React
• calendarBaseLayer · ReactA calendar displays one or more date grids and allows users to select either a single date or a contiguous range of…
• CalendarShark UI · ReactSelect a date or a range of dates.
• AvailabilityWatermelon UI · React
• CalendarArc Library · ReactBrowse dates in a clear, compact month view.
• Glass Calendarglasscn · ReactGlass Calendar with five variants: clear, frosted, subtle, liquid, and liquid-refract
• Date Range PickerUI Lab · ReactPaints the range as you hover, then commits it on the second click.
• CalendarHextaUI · ReactA date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.
• CalendarCojeev UI · ReactChoose one appointment day, a continuous date range, or separate days in an accessible month grid.
• CalendarROI UI · ReactA date picker calendar component.
• CalendarHalaska UI · React
• CalendarMetal UI · React + SwiftUIA calendar for single dates, inclusive ranges and independent dates. Localized segmented date entry, eligibility and…
• CalendarSpaceUI · ReactDisplays an interactive month grid that lets users browse dates, select individual days, or choose date ranges for…
• Aria CalendarReScript shadcn · ReScript
• Cell To Card Calendar ExpansionCue Foundations · React
• CalendarOUI · ReactReact aria components Calendar with shadcn characteristics.
• CalendarD2Studio UI · ReactA date field component that allows users to enter and edit a date.
• Glass Date PickerOpaline · ReactGlass calendar with a gliding day bubble, and a capsule date picker.
• CalendarFibo · ReactA month grid for picking a day or a range, with full keyboard use; pages side by side, scrolls on phones, or fills a…
• Date Pickerark-cn · ReactA shadcn-style date picker component built with Ark UI primitives.
• Sidebar 12shadcn/ui · ReactA sidebar with a calendar.
• Date PickerHeroUI · ReactComposable date picker built on React Aria DatePicker with DateField and Calendar composition
• Range CalendarReact Spectrum · ReactRangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
• Calendar RacOrigin UI · React
• Display week numbersReUI · ReactDisplay week numbers
• range-calendarIntent UI · Reactrange-calendar
• Heat CalendarbeUI · ReactCompose Grid, Tooltip and Legend, or omit children for the complete chart.
• Date PickerTailGrids · ReactA component to select a date.
• Nothing ScheduledSpectrum UI · ReactA day rail with a now marker where any hour opens an inline composer.
• Week StripPanel UI · React NativeOne row of days to pick from, with marks for what is on each.
• Calendar 02 - Style calendarShadcn Space · ReactCalendar component
• Daily Activity Calendar WidgetOpenSourceUI · React
• CalendarWatermelon UI · React
• Calendarglasscn · React
• Mini CalendarUI Lab · ReactMonths slide past in the direction you travel.
• Date pickerHextaUI · ReactA button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.
• Event CalendarSpaceUI · ReactDisplays scheduled events across day, week, and month views, making it easy for users to create and manage appointments.
• Base CalendarReScript shadcn · ReScript
• Calendar WidgetOpaline · ReactCalendar widget showing today, what's next and a month at a glance.
• Date Range PickerHeroUI · ReactComposable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition
• Tailwind CalendarReact Spectrum · React
• Comp 41Origin UI · React
• Current month buttonReUI · ReactCurrent month button
• Returns CalendarbeUI · ReactCompose Grid and Tooltip, or omit children for the complete chart.
• Range CalendarTailGrids · ReactA calendar component for selecting a range of dates.
• Calendar 03 - Time calendarShadcn Space · ReactCalendar component
• Ios Calender WidgetOpenSourceUI · React
• Calendar 1Watermelon UI · React
• Tear Off CalendarUI Lab · ReactTear a day off to move forward, pull one back to go back.
• Range CalendarHeroUI · ReactComposable date range picker with month grid, navigation, and year picker support built on React Aria RangeCalendar
• Tailwind Range CalendarReact Spectrum · React
• Comp 42Origin UI · React
• Today buttonReUI · ReactToday button
• Calendar 04 - Dialog calendarShadcn Space · ReactCalendar component
• Minimal Agenda WidgetOpenSourceUI · React
• Calendar 10Watermelon UI · React
• Vanilla CalendarReact Spectrum · React
• Comp 487Origin UI · React
• Custom navigation with year viewReUI · ReactCustom navigation with year view
• Calendar 06 - Disable WeekendsShadcn Space · ReactCalendar component
• Month Picker CalendarOpenSourceUI · React
• Calendar 11Watermelon UI · React
• Vanilla Range CalendarReact Spectrum · React
• Comp 488Origin UI · React
• Preset time selectionReUI · ReactPreset time selection
• Calendar 07 - Variable SizeShadcn Space · ReactCalendar component
• Week Strip CalendarOpenSourceUI · React
• Calendar 12Watermelon UI · React
• Comp 489Origin UI · React
• Calendar with presetsReUI · ReactCalendar with presets
• Calendar 14 - Range SelectionShadcn Space · ReactCalendar component
• Calendar 13Watermelon UI · React
• Comp 490Origin UI · React
• Range calendar with presetsReUI · ReactRange calendar with presets
• Calendar 16 - Date Time SchedulerShadcn Space · ReactA responsive calendar component with date selection, controlled time range inputs, and duration presets.
• Calendar 14Watermelon UI · React
• Comp 491Origin UI · React
• Calendar with pricingReUI · ReactCalendar with pricing
• Calendar 15Watermelon UI · React
• Comp 492Origin UI · React
• Calendar with presetsReUI · ReactCalendar with presets
• Calendar 16Watermelon UI · React
• Comp 493Origin UI · React
• Appointment calendarReUI · ReactAppointment calendar
• Calendar 17Watermelon UI · React
• Comp 494Origin UI · React
• Range calendarReUI · ReactRange calendar
• Calendar 18Watermelon UI · React
• Comp 495Origin UI · React
• Display 2 monthsReUI · ReactDisplay 2 months
• Calendar 19Watermelon UI · React
• Comp 496Origin UI · React
• Display 2 months with range pickerReUI · ReactDisplay 2 months with range picker
• Calendar 2Watermelon UI · React

Libraries with calendar components

• ReUI
• Watermelon UI
• Origin UI
• Shadcn Space
• OpenSourceUI

Related categories

• React Calendar Components
• Tailwind CSS Calendar Components
• Animated Calendar Components
• shadcn/ui Calendar Components
• Data Display Components
• Card Components
• Chart Components
• Table Components
• Avatar Components
• List Components
• Stat Components
• Accordion Components
• Data Table Components
• Carousel Components
• Collapsible Components
• Avatar Group Components
• Stat Card Components
• Bar Chart Components
• Tree View Components
• Card Stack Components