Calendar Scheduler

Build a week-view scheduler: a 7-day by 10-hour grid (8:00 to 17:00) where events show up as colored blocks in their time slot. It looks like a lot of moving parts, but the whole thing is driven by one array of events plus a rule for which cell each event belongs to.

Task

The starter App.tsx renders the grid with four seeded events, but nothing is clickable yet. Make it interactive:

1. Hold the events in state. Track the event list with useState so the grid re-renders when it changes.
2. Click an empty slot to add. Clicking an empty cell adds a 1-hour event at that day and hour with a fresh id and the title Meeting.
3. Click an event to remove. Clicking a colored block drops that event from the list.

Examples

• The page loads with Standup on Mon 9:00, 1:1 on Tue 14:00, Design on Thu 11:00, and Review on Fri 16:00. Every other cell is an empty slot button.
• Clicking the empty Wed 10:00 slot drops a green Meeting block into that cell.
• Clicking the Standup block removes it, and Mon 9:00 becomes an empty slot again.

Notes

• One source of truth. The grid is a pure function of the events array. Add or remove an item and let React re-render; never poke a cell directly.
• A cell is either a slot or an event. For each [day, hour], look up whether an event lives there. If one does, render the block; otherwise render a clickable slot.
• Colors cycle. The e0 through e3 classes rotate four colors by the event's position — you never pick a color by hand.
• The grid layout and dark theme already live in styles.css; focus on the state and the click handlers.