Components
TaskOrbitCalendar
The Task Orbit Calendar is a visually engaging Shadcn UI component that organizes events around a central “Today” circle. Each event orbits the center, with upcoming events moving closer as their scheduled time approaches, providing an intuitive sense of urgency and timeline. Users can easily add new events within a restricted range of ±7 days from the current date using the Shadcn UI Input and Button components, and view or remove existing events via interactive popovers. The orbiting layout, combined with color-coded event markers and popover details, offers a compact yet informative overview of upcoming tasks, making it ideal for task management and time-sensitive planning.
Loading preview...
"use client"
import * as React from "react"
import { TaskOrbitCalendar, CalendarEvent } from "@/components/ui/task-orbit-calendar"
import { v4 as uuidv4 } from "uuid"
export default function TaskOrbitCalendarDemo() {
const [events, setEvents] = React.useState<CalendarEvent[]>([
{ id: uuidv4(), title: "Morning Meeting", date: new Date().toISOString() },
{ id: uuidv4(), title: "Code Review", date: new Date(new Date().getTime() + 2 * 60 * 60 * 1000).toISOString() },
])
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">
<h1 className="text-lg font-semibold mb-4">Task Orbit Calendar Demo</h1>
<TaskOrbitCalendar
events={events}
onAddEvent={handleAddEvent}
onRemoveEvent={handleRemoveEvent}
/>
</div>
)
}