Calendar Overlay

Calendar displayed alongside another calendar.

My calendar Team calendar
9–10am Standup
9:30–11am Planning

html

<div class="overlay" data-mode="Overlay">
  <div class="overlay__legend">
    <span class="overlay__chip"><span class="overlay__dot" style="background:#A8E6C1;"></span>My calendar</span>
    <span class="overlay__chip"><span class="overlay__dot" style="background:#BFD9F2;"></span>Team calendar</span>
  </div>
  <div class="overlay__track">
    <div class="overlay__event overlay__event--a" style="background:#A8E6C1;">9&ndash;10am Standup</div>
    <div class="overlay__event overlay__event--b" style="background:#BFD9F2;">9:30&ndash;11am Planning</div>
  </div>
</div>
<style>
.overlay { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 420px; padding: 18px; border-radius: 12px; box-sizing: border-box; }
.overlay__legend { display: flex; gap: 16px; margin-bottom: 14px; }
.overlay__chip { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.overlay__dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.overlay__track { position: relative; height: 64px; background: #24143010; border-radius: 8px; }
.overlay__event { position: absolute; top: 8px; height: 24px; border-radius: 6px; padding: 3px 8px; font-weight: 600; color: #14351f; box-sizing: border-box; white-space: nowrap; overflow: hidden; }
.overlay__event--a { left: 4%; width: 44%; }
.overlay__event--b { left: 24%; width: 44%; top: 34px; }
.overlay[data-mode="Side by side"] .overlay__event--a { left: 2%; width: 46%; top: 8px; }
.overlay[data-mode="Side by side"] .overlay__event--b { left: 52%; width: 46%; top: 8px; }
</style>

tailwind

<div class="w-[420px] p-[18px] rounded-xl box-border font-sans text-[13px] text-[#241430] bg-[#FAF7F2] overlay-tw" data-mode="Overlay">
  <div class="flex gap-4 mb-3.5">
    <span class="flex items-center gap-1.5 font-semibold"><span class="w-[9px] h-[9px] rounded-full inline-block" style="background:#A8E6C1"></span>My calendar</span>
    <span class="flex items-center gap-1.5 font-semibold"><span class="w-[9px] h-[9px] rounded-full inline-block" style="background:#BFD9F2"></span>Team calendar</span>
  </div>
  <div class="relative h-16 bg-[#24143010] rounded-lg">
    <div class="overlay-tw-a absolute top-2 h-6 left-[4%] w-[44%] rounded-md px-2 py-0.5 font-semibold text-[#14351f] box-border whitespace-nowrap overflow-hidden" style="background:#A8E6C1">9&ndash;10am Standup</div>
    <div class="overlay-tw-b absolute top-[34px] h-6 left-[24%] w-[44%] rounded-md px-2 py-0.5 font-semibold text-[#14351f] box-border whitespace-nowrap overflow-hidden" style="background:#BFD9F2">9:30&ndash;11am Planning</div>
  </div>
</div>
<style>
.overlay-tw[data-mode="Side by side"] .overlay-tw-a { left: 2%; width: 46%; top: 8px; }
.overlay-tw[data-mode="Side by side"] .overlay-tw-b { left: 52%; width: 46%; top: 8px; }
</style>

react

export function CalendarOverlay({
  primaryLabel = "My calendar",
  secondaryLabel = "Team calendar",
  mode = "Overlay",
  primaryAccent = "#A8E6C1",
  secondaryAccent = "#BFD9F2",
}) {
  const side = mode === "Side by side";
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 420, padding: 18, borderRadius: 12, boxSizing: "border-box" }}>
      <div style={{ display: "flex", gap: 16, marginBottom: 14 }}>
        <span style={{ display: "flex", alignItems: "center", gap: 6, fontWeight: 600 }}><span style={{ width: 9, height: 9, borderRadius: 999, display: "inline-block", background: primaryAccent }} />{primaryLabel}</span>
        <span style={{ display: "flex", alignItems: "center", gap: 6, fontWeight: 600 }}><span style={{ width: 9, height: 9, borderRadius: 999, display: "inline-block", background: secondaryAccent }} />{secondaryLabel}</span>
      </div>
      <div style={{ position: "relative", height: 64, background: "#24143010", borderRadius: 8 }}>
        <div style={{ position: "absolute", top: 8, height: 24, left: side ? "2%" : "4%", width: side ? "46%" : "44%", borderRadius: 6, padding: "3px 8px", fontWeight: 600, color: "#14351f", boxSizing: "border-box", whiteSpace: "nowrap", overflow: "hidden", background: primaryAccent }}>9&ndash;10am Standup</div>
        <div style={{ position: "absolute", top: side ? 8 : 34, height: 24, left: side ? "52%" : "24%", width: side ? "46%" : "44%", borderRadius: 6, padding: "3px 8px", fontWeight: 600, color: "#14351f", boxSizing: "border-box", whiteSpace: "nowrap", overflow: "hidden", background: secondaryAccent }}>9:30&ndash;11am Planning</div>
      </div>
    </div>
  );
}