Command Palette

Search for a command to run...

Docs
Monthly Heatmap Calendar

Monthly Heatmap Calendar

A monthly calendar with event heatmap visualization

Loading...

Installation

Features

  • Month/Year Selection: Navigate through months and years with dropdowns
  • Event Heatmap: Visual indicators for days with events
  • Add Events: Create events with title, date, and time
  • Event Management: View and delete events per day
  • Event Storage: Keyed by date string for efficient lookup
  • Popover Interface: Clean UI for event interaction

Props

PropTypeDefaultDescription
initialMonthDatenew Date()Starting month to display
initialEvents{ [key: string]: Event[] }{}Initial events by date
startYearnumber2015Earliest selectable year
endYearnumberCurrent year + 5Latest selectable year
onEventAdd(dateKey: string, event: Event) => void-Callback when event added
onEventDelete(dateKey: string, index: number) => void-Callback when event deleted