Calendar Dashboard
CalendarDashboard is fully encapsulated — modals, event editing, filtering and exporting are all handled internally, so the only thing you pass in is the seed data and the look.Calendar dashboard
Everything past the initial events is internal state.
- Seed
mockEvents - with a map of
"YYYY-M-D"to an array of event types ("pentest","kickoff"). Note the un-padded month and day. color- themes the active states, primary buttons and focus rings — a named key or a hex string.
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Calendar
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Step 1 installs these for you. Run them yourself only if you are adding Calendar to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component. @radix-ui/react-slot comes in with the components above rather than from Calendar directly.
select and ui-button are components, not packages — the shadcn CLI installs them as source files.
@radix-ui/react-slot, class-variance-authority and react-day-picker are npm packages.
Examples
Minimal
- Set
variant"minimal" - to drop the card chrome so the dashboard sits flush in your own layout.
Glass
- Set
variant"glass" - to go translucent — intended to sit on a coloured or photographic surface.
Liquid Glass
- Set
variant"liquid-glass" - for an authentic physical fluid glass distortion effect with layered refraction filters and specular bevels.
Features
Customizable
Easily adapt the component's styling and behavior to fit your application's unique design system.
Accessible
Built with accessibility in mind, ensuring all users can interact with your application effectively.
Responsive
Fully responsive design that looks and works great across desktop, tablet, and mobile devices.
Performant
Optimized for maximum performance with minimal re-renders and efficient state management.
Best Practices & Guidelines
Usage Guidelines
Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
mockEvents | Record<string, string[]> | {} | A dictionary mapping string dates ( "YYYY-M-D") to an
array of event types ("pentest" or "kickoff"
). |
variant | "default" | "minimal" | "glass" | "liquid-glass" | "default" | Applies overarching structural layouts, including borders, padding,
and grid-gaps. |
color | "primary" | "indigo" | "rose" | "emerald" | "blue" | "zinc" | string | "primary" | Applies global color themes to active states, primary buttons, and
focus rings. Accepts valid hex codes. |