Event Calendar

A React week and day calendar scheduler with events placed by time, side by side overlap layout, an all-day row, a live time line and click or keyboard to create events.

src/registry/ui/event-calendar.tsx/r/event-calendar.json

Installation#

bash
npx shadcn@latest add https://ui.minidev.pro/r/event-calendar.json

Usage#

tsx
import { EventCalendar } from "@/components/ui/event-calendar"

export function Example() {
  return <EventCalendar />
}

API reference#

EventCalendar props
PropTypeDefault
eventsCalendarEvent[]-
calendarsCalendarSource[]CALENDARS
viewCalendarView-
defaultViewCalendarView | "auto""auto"
onViewChange(view: CalendarView) => void-
defaultDateDate-
onDateChange(date: Date) => void-
weekStartsOn0 | 11
scrollToHournumber8
hourHeightnumber48
heightnumber520
slotMinutesnumber30
onCreate(range: { start: Date; end: Date }) => void-
onEventClick(event: CalendarEvent) => void-
localestring"en-US"
classNamestring-

Dependencies#

npm

lucide-react
All dashboard components