Event Calendar

Full-featured event calendar built on react-big-calendar with month, week, day, and agenda views, click-to-add events, per-event color support, and a custom dark-themed toolbar.

Code

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

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

Installation

$npx particleui-cli add event-calendar

Usage

TSX

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

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

Props

Prop	Type	Default	Required
date	Date	—	yes
view	CalendarView	—	yes
onNavigate	(action: "PREV" \| "NEXT" \| "TODAY") => void	—	yes
onView	(view: CalendarView) => void	—	yes
events	CalendarEvent[]	—	no
className	string	—	no
defaultView	CalendarView	—	no

Details

Source filecomponents/ui/event-calendar.tsx

Typeui

Categoriesforms, blocks

npm dependenciesreact-big-calendar, date-fns

Registry deps

Claude skill—