Day View

Calendar showing a day.

html

<table class="dayview" data-density="Comfortable">
  <caption class="dayview__caption"><time datetime="2026-08-18">Tuesday 18 August</time></caption>
  <thead>
    <tr><th scope="col">Time</th><th scope="col">Event</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">9:00</th><td></td></tr>
    <tr><th scope="row">10:00</th><td class="dayview__busy" style="background:#A8E6C1;">Design review</td></tr>
    <tr><th scope="row">11:00</th><td></td></tr>
    <tr><th scope="row">12:00</th><td></td></tr>
  </tbody>
</table>
<style>
.dayview { border-collapse: collapse; width: 340px; font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; }
.dayview__caption { text-align: left; font-weight: 700; padding-bottom: 10px; }
.dayview th, .dayview td { border-bottom: 1px solid #24143020; padding: 10px 12px; text-align: left; }
.dayview th[scope="row"] { font-weight: 500; color: #24143099; width: 70px; font-variant-numeric: tabular-nums; }
.dayview__busy { border-radius: 6px; font-weight: 600; color: #14351f; }
.dayview[data-density="Compact"] th, .dayview[data-density="Compact"] td { padding: 5px 12px; }
</style>

tailwind

<table class="border-collapse w-[340px] font-sans text-sm text-[#241430] bg-[#FAF7F2] dayview-tw" data-density="Comfortable">
  <caption class="text-left font-bold pb-2.5"><time datetime="2026-08-18">Tuesday 18 August</time></caption>
  <thead>
    <tr><th scope="col" class="text-left border-b border-[#24143020] p-3">Time</th><th scope="col" class="text-left border-b border-[#24143020] p-3">Event</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row" class="text-left font-normal text-[#241430]/60 w-[70px] tabular-nums border-b border-[#24143020] p-3">9:00</th><td class="border-b border-[#24143020] p-3"></td></tr>
    <tr><th scope="row" class="text-left font-normal text-[#241430]/60 w-[70px] tabular-nums border-b border-[#24143020] p-3">10:00</th><td class="border-b border-[#24143020] p-3"><span class="rounded-md font-semibold text-[#14351f] px-2 py-1" style="background:#A8E6C1">Design review</span></td></tr>
    <tr><th scope="row" class="text-left font-normal text-[#241430]/60 w-[70px] tabular-nums border-b border-[#24143020] p-3">11:00</th><td class="border-b border-[#24143020] p-3"></td></tr>
    <tr><th scope="row" class="text-left font-normal text-[#241430]/60 w-[70px] tabular-nums p-3">12:00</th><td class="p-3"></td></tr>
  </tbody>
</table>
<style>
.dayview-tw[data-density="Compact"] th, .dayview-tw[data-density="Compact"] td { padding-top: 5px; padding-bottom: 5px; }
</style>

react

export function DayView({
  dateLabel = "Tuesday 18 August",
  date = "2026-08-18",
  eventTitle = "Design review",
  density = "Comfortable",
  accent = "#A8E6C1",
}) {
  const pad = density === "Compact" ? "5px 12px" : "10px 12px";
  const rows = [
    { hour: "9:00", event: null },
    { hour: "10:00", event: eventTitle },
    { hour: "11:00", event: null },
    { hour: "12:00", event: null },
  ];
  return (
    <table style={{ borderCollapse: "collapse", width: 340, font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
      <caption style={{ textAlign: "left", fontWeight: 700, paddingBottom: 10 }}><time dateTime={date}>{dateLabel}</time></caption>
      <thead>
        <tr><th scope="col" style={{ textAlign: "left", padding: pad, borderBottom: "1px solid #24143020" }}>Time</th><th scope="col" style={{ textAlign: "left", padding: pad, borderBottom: "1px solid #24143020" }}>Event</th></tr>
      </thead>
      <tbody>
        {rows.map((r) => (
          <tr key={r.hour}>
            <th scope="row" style={{ fontWeight: 500, color: "#24143099", width: 70, fontVariantNumeric: "tabular-nums", textAlign: "left", padding: pad, borderBottom: "1px solid #24143020" }}>{r.hour}</th>
            <td style={{ padding: pad, borderBottom: "1px solid #24143020" }}>
              {r.event && <span style={{ borderRadius: 6, fontWeight: 600, color: "#14351f", background: accent, padding: "2px 8px" }}>{r.event}</span>}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}