🧩 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.
👉 https://www.reactchallenges.com/challenges/calendar-events
✅ 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 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-DDdates. - Show an event dot on every day that has at least one event.
💡 Notes
- Components and the month-grid logic are already wired — your job is the events state: events, the selected day, filtering, and add/delete.
- Pass your events to
buildMonthDays(date, events)and the dots appear automatically. - Filter events per day by comparing each event's date to the selected day; this keeps events stable across month navigation.
🧪 Tests
- Does not show dots on a day without events
- Selecting a day highlights it
- Shows the selected date in the panel heading
- Adds a new event via the Add button
- Adds a new event when pressing Enter
- Ignores empty titles when adding
- Shows a dot on the day of a newly added event
- Supports multiple events on the same day
- Shows only the events of the selected day
- Deletes an event from the selected day
- Keeps events when navigating between months
Whether you're prepping for interviews or sharpening your state skills, this is a compact, satisfying build — the calendar is already done, so you can focus entirely on managing events like a pro.
