React Coding Challenge : Meeting Calendar

import "./styles.css";
import { useMemo } from "react";

const HOUR_HEIGHT = 60; // px per hour
const DAY_START_HOUR = 8;
const DAY_END_HOUR = 18;

const meetingsMock = [
  {
    id: 1,
    title: "Daily Standup",
    start: "09:15",
    end: "09:45",
    color: "#4CAF50",
  },
  {
    id: 2,
    title: "Design Review",
    start: "10:00",
    end: "11:30",
    color: "#0EE9F4",
  },
  { id: 3, title: "1:1", start: "13:00", end: "13:30", color: "#FF9800" },
  {
    id: 4,
    title: "Project Sync",
    start: "10:30",
    end: "11:00",
    color: "#E91E63",
  }, // overlaps with #2
  {
    id: 5,
    title: "Customer Call",
    start: "11:00",
    end: "12:00",
    color: "#9C27B0",
  }, // overlaps with #2
  {
    id: 6,
    title: "Lunch & Learn",
    start: "12:30",
    end: "13:30",
    color: "#607D8B",
  },
];

function toMinutes(hhmm) {
  const [h, m] = hhmm.split(":").map(Number);
  return h * 60 + m;
}

function buildLayout(meetings) {
  const startOfDayMin = DAY_START_HOUR * 60;
  const minuteHeight = HOUR_HEIGHT / 60;

  // Enrich with numeric times and sort by start time
  const enriched = meetings
    .map((m) => ({
      ...m,
      startMin: toMinutes(m.start),
      endMin: toMinutes(m.end),
    }))
    .sort((a, b) => a.startMin - b.startMin);

  // Assign positions for partial overlap (approx 50% offset for overlapping events)
  const laidOut = [];
  for (const event of enriched) {
    // Find active (overlapping) events at the start time of the current event
    const active = laidOut.filter(
      (e) => e.startMin <= event.startMin && e.endMin > event.startMin
    );
    // Assign a level (similar to column) for horizontal offset
    const usedLevels = new Set(active.map((e) => e.level));
    let level = 0;
    while (usedLevels.has(level)) level++;
    event.level = level;

    // Set z-index for stacking if needed
    event.zIndex = level + 1;

    laidOut.push(event);
  }

  // Calculate styles with partial overlap
  laidOut.forEach((event) => {
    // Find all events that overlap with this one to determine max overlapping count
    const overlapping = laidOut.filter(
      (e) =>
        (e.startMin <= event.startMin && e.endMin > event.startMin) ||
        (event.startMin <= e.startMin && event.endMin > e.startMin)
    );
    const maxLevel = Math.max(...overlapping.map((e) => e.level));
    const overlapCount = maxLevel + 1;

    // Calculate style with top, height, and partial horizontal overlap
    const top = (event.startMin - startOfDayMin) * minuteHeight;
    const height = Math.max((event.endMin - event.startMin) * minuteHeight, 1);

    // Width and left for ~50% overlap effect
    // Base width is reduced based on overlap count, offset by ~50% per level
    const baseWidth = overlapCount > 1 ? 80 / overlapCount : 100; // Shrink width if overlapping
    const offsetPerLevel = baseWidth * 0.5; // Approx 50% overlap
    const left = event.level * offsetPerLevel;

    event.style = {
      top: `${top}px`,
      height: `${height}px`,
      left: `${left}%`,
      width: `${baseWidth}%`,
      zIndex: event.zIndex,
    };
  });

  return laidOut;
}

export default function App() {
  const hours = useMemo(() => {
    const arr = [];
    for (let h = DAY_START_HOUR; h <= DAY_END_HOUR; h++) arr.push(h);
    return arr;
  }, []);

  const meetings = useMemo(() => buildLayout(meetingsMock), []);

  const totalHours = DAY_END_HOUR - DAY_START_HOUR;
  const timelineHeight = totalHours * HOUR_HEIGHT;

  return (
    <div className="App">
      <h1>Day Timeline</h1>
      <div className="calendar">
        <div className="time-column">
          {hours.map((h, i) => (
            <div
              key={h}
              className="time-label"
              style={{
                height: HOUR_HEIGHT,
              }}
            >
              {h}:00
            </div>
          ))}
        </div>

        <div className="grid-column" style={{ height: timelineHeight }}>
          {hours.map((h, i) => (
            <div
              key={h}
              className="grid-hour"
              style={{
                height: HOUR_HEIGHT,
              }}
            />
          ))}

          {meetings.map((m) => (
            <div
              key={m.id}
              className="event"
              style={{
                top: m.style.top,
                height: m.style.height,
                left: m.style.left,
                width: m.style.width,
                background: m.color,
                zIndex: m.style.zIndex,
              }}
              title={`${m.title} (${m.start} - ${m.end})`}
            >
              <div className="event-title">{m.title}</div>
              <div className="event-time">
                {m.start} - {m.end}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

.p {
  font-family: sans-serif;
  padding: 16px;
  color: #1f1f1f;
}

h1 {
  margin-bottom: 12px;
  font-size: 18px;
}

.calendar {
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.time-column {
  width: 72px;
  background: #fafafa;
  border-right: 1px solid #e0e0e0;
}

.time-label {
  height: 60px;
  box-sizing: border-box;
  padding: 4px 8px;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.grid-column {
  position: relative; /* Ensure absolute positioning of events works */
  flex: 1;
  background: #fff;
  min-width: 200px;
}

.grid-hour {
  height: 60px;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}

.event {
  position: absolute;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 6px;
  color: white;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.event-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.event-time {
  font-size: 11px;
  opacity: 0.85;
}

// Function to layout meetings in a calendar with partial overlap
FUNCTION buildLayout(meetings):
    // Initialize constants for time calculations
    startOfDayMinutes = DAY_START_HOUR * 60
    minuteHeight = HOUR_HEIGHT / 60  // Height per minute for positioning

    // Step 1: Convert meeting start/end times to minutes and sort by start time
    enrichedMeetings = []
    FOR each meeting in meetings:
        meeting.startMin = convertToMinutes(meeting.start)  // e.g., "09:15" -> 555 minutes
        meeting.endMin = convertToMinutes(meeting.end)
        ADD meeting to enrichedMeetings
    SORT enrichedMeetings by startMin

    // Step 2: Assign a "level" to each meeting for handling overlaps
    laidOutMeetings = []
    FOR each event in enrichedMeetings:
        // Find events that are active (overlapping) when this event starts
        activeEvents = FILTER laidOutMeetings WHERE event.startMin is between active.startMin and active.endMin
        // Assign the smallest available level (like a column) not used by active events
        usedLevels = SET of levels from activeEvents
        level = 0
        WHILE level is in usedLevels:
            INCREMENT level
        event.level = level
        event.zIndex = level + 1  // For visual stacking if needed
        ADD event to laidOutMeetings

    // Step 3: Calculate visual styles (position and size) for each meeting
    FOR each event in laidOutMeetings:
        // Find all events that overlap with this event (before or after)
        overlappingEvents = FILTER laidOutMeetings WHERE time ranges overlap with event
        maxLevel = MAXIMUM level among overlappingEvents
        overlapCount = maxLevel + 1  // Total number of overlapping slots

        // Calculate vertical position and height based on time
        top = (event.startMin - startOfDayMinutes) * minuteHeight  // Position from top
        height = (event.endMin - event.startMin) * minuteHeight OR minimum 1px

        // Calculate horizontal position and width for ~50% overlap
        IF overlapCount > 1:
            baseWidth = 80 / overlapCount  // Shrink width if overlapping
        ELSE:
            baseWidth = 100  // Full width if no overlap
        offsetPerLevel = baseWidth * 0.5  // Offset by ~50% of width per level
        left = event.level * offsetPerLevel  // Horizontal position based on level

        // Assign style properties for rendering
        event.style = {
            top: top in pixels,
            height: height in pixels,
            left: left as percentage,
            width: baseWidth as percentage,
            zIndex: event.zIndex
        }

    RETURN laidOutMeetings

function buildLayout(meetings) {
  const startOfDayMin = DAY_START_HOUR * 60; // e.g., 8 * 60 = 480 minutes (8:00 AM)
  const minuteHeight = HOUR_HEIGHT / 60; // e.g., 60px/hour / 60 = 1px per minute

  // Step 1: Convert times to minutes and sort by start time
  // This ensures we process events in chronological order
  const enriched = meetings
    .map((m) => ({
      ...m,
      startMin: toMinutes(m.start), // Convert "HH:MM" to minutes
      endMin: toMinutes(m.end),
    }))
    .sort((a, b) => a.startMin - b.startMin);

  // Step 2: Assign levels for overlap handling
  const laidOut = [];
  for (const event of enriched) {
    // Find events that are still active (overlapping) when this event starts
    const active = laidOut.filter(
      (e) => e.startMin <= event.startMin && e.endMin > event.startMin
    );
    // Assign the smallest unused level (like a column) among active events
    const usedLevels = new Set(active.map((e) => e.level));
    let level = 0;
    while (usedLevels.has(level)) level++;
    event.level = level;

    // Set z-index based on level for visual stacking (higher level = on top)
    event.zIndex = level + 1;

    laidOut.push(event);
  }

  // Step 3: Calculate styles for rendering with partial overlap
  laidOut.forEach((event) => {
    // Find all events that overlap with this event (to determine total overlap count)
    const overlapping = laidOut.filter(
      (e) =>
        (e.startMin <= event.startMin && e.endMin > event.startMin) ||
        (event.startMin <= e.startMin && event.endMin > e.startMin)
    );
    const maxLevel = Math.max(...overlapping.map((e) => e.level));
    const overlapCount = maxLevel + 1; // Total number of overlapping slots

    // Calculate vertical position (top) and height based on time
    const top = (event.startMin - startOfDayMin) * minuteHeight;
    const height = Math.max((event.endMin - event.startMin) * minuteHeight, 1);

    // Calculate horizontal position and width for ~50% overlap
    // If overlapping, shrink width; if not, use full width
    const baseWidth = overlapCount > 1 ? 80 / overlapCount : 100;
    const offsetPerLevel = baseWidth * 0.5; // Offset by ~50% of width per level
    const left = event.level * offsetPerLevel; // Position based on level

    // Assign style object for CSS properties
    event.style = {
      top: `${top}px`,
      height: `${height}px`,
      left: `${left}%`,
      width: `${baseWidth}%`,
      zIndex: event.zIndex,
    };
  });

  return laidOut;
}