Design a Calendar / Scheduling Application

Designing a calendar and scheduling application is a complex frontend system design problem. It involves date/time handling, layout algorithms for overlapping events, drag interactions, and performance with dense event sets. Here's a structured approach.

Requirements Clarification

Functional Requirements

• Views: Day view (hourly slots), week view (7 columns), month view (grid of days with event pills).
• Event rendering: Display events with correct time placement; handle overlapping events with side-by-side or stacked layout.
• Drag to create: Click-and-drag on empty time to create a new event.
• Drag to resize: Drag event bottom edge to extend duration.
• Drag to move: Drag event to new time slot.
• Recurring events: Support daily, weekly, monthly patterns; show instances or expand in view.
• Timezone handling: Display events in user's local timezone; support multi-timezone calendars.
• Multi-calendar overlay: Toggle visibility of multiple calendars (work, personal); color-coding.
• Date navigation: Prev/next buttons, today shortcut, optional date picker jump.

Non-Functional Requirements

• Performance: Render 100+ events in week view without lag; virtualize month view if needed.
• Responsiveness: Week view scrolls horizontally on mobile; day view stacks.
• Accessibility: Keyboard navigation for creating, moving, resizing events; screen reader announcements for dates and events.
• Consistency: Use a single date library (date-fns, Day.js, or Luxon) to avoid timezone bugs.

High-Level Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│  CalendarApp                                                                 │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │ Toolbar: ViewSelector | NavControls | CalendarFilters | TimezonePicker │  │