Components
Loading preview...
This Monthly Heatmap Calendar component is a fully interactive scheduling tool built entirely with shadcn/ui. It allows users to navigate across different months and years using clean dropdown selectors while still displaying a structured grid view of the month. Each day cell supports adding events through a popover form, where users can enter a title and select a specific time. Scheduled events are visually marked with a badge indicator, and event details can be viewed, edited, or deleted directly within the popover. The calendar layout is spaced for clarity, making it easy to scan through days while still keeping event management compact and intuitive. This component is particularly useful for task planning, booking systems, or productivity dashboards, offering a more feature-rich and customizable experience compared to traditional date pickers.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/monthly-heatmap-calendarimport MonthlyHeatmapCalendar from "@/components/ui/monthly-heatmap-calendar";
export default function DemoOne() {
return <MonthlyHeatmapCalendar />;
}