🚀 New React Challenge: Calendar Events

🧩 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-DD dates.
• 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

1. Does not show dots on a day without events
2. Selecting a day highlights it
3. Shows the selected date in the panel heading
4. Adds a new event via the Add button
5. Adds a new event when pressing Enter
6. Ignores empty titles when adding
7. Shows a dot on the day of a newly added event
8. Supports multiple events on the same day
9. Shows only the events of the selected day
10. Deletes an event from the selected day
11. 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.

🔥 Start the Challenge Now