Components
Loading preview...
The Radial Week View component is a visually engaging calendar that displays a week in a circular, radial layout. Each hour of the day is represented as a marker around the circle, and events are positioned as arcs or points corresponding to their specific hour. Users can interact with events by clicking them to view details in a popover, add new events for a selected hour, or remove existing events using a Lucide trash icon. The component leverages Shadcn UI components—such as Card, Popover, Button, and Input—to ensure consistent styling, responsiveness, and light/dark mode support. This layout is particularly useful for visualizing time-based events intuitively, giving users a unique perspective of their weekly schedule.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/radial-week-view"use client"
import * as React from "react"
import { RadialWeekView, CalendarEvent } from "@/components/ui/radial-week-view"
export default function RadialWeekViewDemo() {
const [events, setEvents] = React.useState<CalendarEvent[]>([])
const handleAddEvent = (event: CalendarEvent) => {
setEvents((prev) => [...prev, event])
}
const handleRemoveEvent = (id: string) => {
setEvents((prev) => prev.filter((e) => e.id !== id))
}
return (
<div className="p-4">
<h2 className="text-lg font-semibold mb-4">Radial Week View Demo</h2>
<RadialWeekView
events={events}
onAddEvent={handleAddEvent}
onRemoveEvent={handleRemoveEvent}
/>
</div>
)
}