How would you implement a calendar component with event scheduling in React?

🧩 Scenario

Your team wants a Google Calendar–style UI with:

• Day / Week / Month views
• Add, edit, delete events
• Drag-to-resize events (change duration)
• Drag-and-drop to move events
• Recurring events
• Conflict detection
• Event persistence (local or server)
• Timezone-safe rendering

This requires UI design + data modeling + interaction logic.

---

🧠 Answer (Design Overview)

Core Concepts

1. Data Model

{
  id: string,
  title: string,
  start: ISOString,
  end: ISOString,
  color: string,
  recurring?: {
    rule: 'daily' | 'weekly' | 'monthly',
    interval?: number,
  }
}

2. Views

• Month View: grid of 7×5 cells, events grouped per day.
• Week View: vertical timeline (24h) × 7 days.
• Day View: detailed hourly layout with overlapping events stacked.

3. Event Rendering Logic

• Convert events to blocks with top, height using minutes-to-pixels.
• Overlapping events get horizontal stacking.

4. Interaction Model

• Click → Create event at specific time.
• Drag → Move event.
• Drag bottom edge → Resize.
• Resize calculations: round to nearest 5–15 minutes.

5. Conflict Detection

Events conflict if:

startA < endB && startB < endA;

Highlight conflicts visually.

6. Timezone-Safe Handling

• Convert everything to UTC internally.
• Render using user's local timezone.

Tradeoffs:

• Rich interactions require precise math and pointer event handling.
• Recurring events can explode in number — expand only visible ranges.

---

🎯 Live Demo

Conceptual only, not full UI. You will add the actual UI component later.

---

🔍 Real-World Tips

• Use libraries like date-fns, luxon, or dayjs for time math.
• Use pointer events for smoother drag interactions.
• Only expand recurring events in the visible week/month range.
• Large apps split calendar logic into: layout engine, recurrence engine, interaction engine.

---

Quick Practice

1. Add drag-to-resize interaction.
2. Implement recurring weekly events.
3. Add conflict highlighting.
4. Add event color categories and filtering.

---

Summary

• Calendar scheduling requires strong time math and conflict checks.
• Use UTC internally and local timezone for display.
• Implement interactive features: create, move, resize events.
• Recurring events and conflict logic are key to production-ready calendars.