# Calendar Events

> Reuse the calendar from the previous challenge and give it events — render events on their days, support multiple events per day, select a day to see its events, and add/delete events while keeping them intact across month navigation.

- Difficulty: intermediate
- Tags: useState, date, state management
- Estimated time: 45 minutes
- Tests: 11
- Requires subscription: yes

## Overview

Build a calendar that renders events on their days, supports selecting a day, and lets you add and delete events — practicing state management and data transformation keyed by absolute date strings.


## Requirements

- Select a day by clicking it, highlighting the selected cell.
- Show the events of the selected day in a panel below the calendar, including a heading with the selected date.
- Add a new event to the selected day via a text input and an "Add" button; empty or whitespace-only titles are ignored.
- Delete an event from the selected day via its delete button.
- Show a "no events" message for a selected day without events.
- Keep events intact when navigating between months (events are keyed by absolute `YYYY-MM-DD` dates, independent of the visible month).
- Show an event dot on every day that has at least one event; a day with several events shows several dots.


## Notes

- `Components.tsx` and `utils.ts` are read-only — the calendar grid, the `Day` cells (which render the event dots from each cell's `eventCount`), and the month-grid logic are already wired.
- The starter `App.tsx` already handles month navigation. Your job is the events state: `events`, the selected day, filtering, and add/delete.
- `utils.ts` exports `buildMonthDays(date, events)` (returns cells with `date` and `eventCount`) and `toISODate(date)`. Pass your `events` state to `buildMonthDays` instead of `[]` — the dots then appear automatically.
- `EventsPanel` is a prop-driven component — its starter markup is hardcoded, so inspect it to figure out which props it needs.
- Filter events per day by comparing each event's `date` to the selected day; this keeps events stable across month navigation.
- Give each new event a unique `id` (e.g. `crypto.randomUUID()`).
- Some tests pass right away (empty state) — that's expected; the rest cover add, delete, selection, and persistence across months.

## Tests

01. does not show dots on a day without events
02. selecting a day highlights it
03. shows the selected date in the panel heading
04. adds a new event via the Add button
05. adds a new event when pressing Enter
06. ignores empty titles when adding
07. shows a dot on the day of a newly added event
08. supports multiple events on the same day
09. shows only the events of the selected day
10. deletes an event from the selected day
11. keeps events when navigating between months