Resource Calendar

Calendar organised around resources/people.

html

<table class="rc" data-density="Comfortable">
  <caption class="rc__caption"><time datetime="2026-08-18">2026-08-18</time></caption>
  <thead>
    <tr><th scope="col">Time</th><th scope="col">Room A</th><th scope="col">Room B</th><th scope="col">Room C</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">9:00</th><td class="rc__booked" style="background:#F5C2E0;">Booked</td><td>Free</td><td>Free</td></tr>
    <tr><th scope="row">10:00</th><td>Free</td><td class="rc__booked" style="background:#F5C2E0;">Booked</td><td>Free</td></tr>
    <tr><th scope="row">11:00</th><td>Free</td><td>Free</td><td class="rc__booked" style="background:#F5C2E0;">Booked</td></tr>
  </tbody>
</table>
<style>
.rc { border-collapse: collapse; width: 460px; font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; }
.rc__caption { text-align: left; font-weight: 700; padding-bottom: 10px; }
.rc th, .rc td { border: 1px solid #24143018; padding: 9px 10px; text-align: left; }
.rc th[scope="col"] { background: #24143008; font-weight: 700; }
.rc th[scope="row"] { font-weight: 500; color: #24143099; font-variant-numeric: tabular-nums; }
.rc__booked { font-weight: 700; color: #241430; }
.rc[data-density="Compact"] th, .rc[data-density="Compact"] td { padding: 4px 10px; }
</style>

tailwind

<table class="border-collapse w-[460px] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] rc-tw" data-density="Comfortable">
  <caption class="text-left font-bold pb-2.5"><time datetime="2026-08-18">2026-08-18</time></caption>
  <thead>
    <tr>
      <th scope="col" class="bg-[#24143008] font-bold border border-[#24143018] p-2.5 text-left">Time</th>
      <th scope="col" class="bg-[#24143008] font-bold border border-[#24143018] p-2.5 text-left">Room A</th>
      <th scope="col" class="bg-[#24143008] font-bold border border-[#24143018] p-2.5 text-left">Room B</th>
      <th scope="col" class="bg-[#24143008] font-bold border border-[#24143018] p-2.5 text-left">Room C</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row" class="font-normal text-[#241430]/60 tabular-nums border border-[#24143018] p-2.5 text-left">9:00</th><td class="font-bold border border-[#24143018] p-2.5" style="background:#F5C2E0">Booked</td><td class="border border-[#24143018] p-2.5">Free</td><td class="border border-[#24143018] p-2.5">Free</td></tr>
    <tr><th scope="row" class="font-normal text-[#241430]/60 tabular-nums border border-[#24143018] p-2.5 text-left">10:00</th><td class="border border-[#24143018] p-2.5">Free</td><td class="font-bold border border-[#24143018] p-2.5" style="background:#F5C2E0">Booked</td><td class="border border-[#24143018] p-2.5">Free</td></tr>
    <tr><th scope="row" class="font-normal text-[#241430]/60 tabular-nums border border-[#24143018] p-2.5 text-left">11:00</th><td class="border border-[#24143018] p-2.5">Free</td><td class="border border-[#24143018] p-2.5">Free</td><td class="font-bold border border-[#24143018] p-2.5" style="background:#F5C2E0">Booked</td></tr>
  </tbody>
</table>
<style>
.rc-tw[data-density="Compact"] th, .rc-tw[data-density="Compact"] td { padding-top: 4px; padding-bottom: 4px; }
</style>

react

export function ResourceCalendar({
  date = "2026-08-18",
  resource1 = "Room A",
  resource2 = "Room B",
  density = "Comfortable",
  accent = "#F5C2E0",
}) {
  const pad = density === "Compact" ? "4px 10px" : "9px 10px";
  const cellStyle = { border: "1px solid #24143018", padding: pad, textAlign: "left" };
  const rows = [
    { time: "9:00", booked: 0 },
    { time: "10:00", booked: 1 },
    { time: "11:00", booked: 2 },
  ];
  const resources = [resource1, resource2, "Room C"];
  return (
    <table style={{ borderCollapse: "collapse", width: 460, font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
      <caption style={{ textAlign: "left", fontWeight: 700, paddingBottom: 10 }}><time dateTime={date}>{date}</time></caption>
      <thead>
        <tr>
          <th scope="col" style={{ ...cellStyle, background: "#24143008", fontWeight: 700 }}>Time</th>
          {resources.map((r) => <th key={r} scope="col" style={{ ...cellStyle, background: "#24143008", fontWeight: 700 }}>{r}</th>)}
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => (
          <tr key={row.time}>
            <th scope="row" style={{ ...cellStyle, fontWeight: 500, color: "#24143099", fontVariantNumeric: "tabular-nums" }}>{row.time}</th>
            {resources.map((r, i) => (
              <td key={r} style={i === row.booked ? { ...cellStyle, fontWeight: 700, background: accent } : cellStyle}>
                {i === row.booked ? "Booked" : "Free"}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}