Calendar

Date-based event display.

August 2026
Mon	Tue	Wed	Thu	Fri	Sat	Sun
10	11	12	13	14	15	16
17	18	19	20	21	22	23

Tue 18 Aug, 9:30amDesign review
Wed 19 Aug, 2:00pmClient call
Fri 21 Aug, 11:00amSprint planning

html

<div class="calendar calendar--cozy" data-view="month" style="--accent:#E8A020;">
  <table class="cal-grid">
    <caption>August 2026</caption>
    <thead>
      <tr>
        <th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th><th scope="col">Thu</th><th scope="col">Fri</th>
        <th scope="col">Sat</th><th scope="col">Sun</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><time datetime="2026-08-10">10</time></td>
        <td><time datetime="2026-08-11">11</time></td>
        <td class="cal-grid__day--event"><time datetime="2026-08-12">12</time></td>
        <td><time datetime="2026-08-13">13</time></td>
        <td><time datetime="2026-08-14">14</time></td>
        <td><time datetime="2026-08-15">15</time></td><td><time datetime="2026-08-16">16</time></td>
      </tr>
      <tr>
        <td><time datetime="2026-08-17">17</time></td>
        <td class="cal-grid__day--today"><time datetime="2026-08-18">18</time></td>
        <td><time datetime="2026-08-19">19</time></td>
        <td><time datetime="2026-08-20">20</time></td>
        <td class="cal-grid__day--event"><time datetime="2026-08-21">21</time></td>
        <td><time datetime="2026-08-22">22</time></td><td><time datetime="2026-08-23">23</time></td>
      </tr>
    </tbody>
  </table>
  <ol class="cal-agenda">
    <li class="cal-agenda__item"><time datetime="2026-08-18T09:30:00Z">Tue 18 Aug, 9:30am</time><span class="cal-agenda__title">Design review</span></li>
    <li class="cal-agenda__item"><time datetime="2026-08-19T14:00:00Z">Wed 19 Aug, 2:00pm</time><span class="cal-agenda__title">Client call</span></li>
    <li class="cal-agenda__item"><time datetime="2026-08-21T11:00:00Z">Fri 21 Aug, 11:00am</time><span class="cal-agenda__title">Sprint planning</span></li>
  </ol>
</div>
<style>
.calendar { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; border-radius: 12px; max-width: 320px; box-sizing: border-box; }
.calendar[data-view="month"] .cal-agenda { display: none; }
.calendar[data-view="agenda"] .cal-grid { display: none; }
.cal-grid { border-collapse: collapse; width: 100%; }
.cal-grid caption { text-align: left; font-weight: 600; margin-bottom: 8px; }
.cal-grid th, .cal-grid td { text-align: center; padding: 8px 4px; font-size: 12px; }
.cal-grid th { font-weight: 600; color: #24143099; font-size: 11px; }
.calendar--compact .cal-grid th, .calendar--compact .cal-grid td { padding: 4px 2px; }
.cal-grid td time { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; }
.cal-grid__day--today time { background: var(--accent); font-weight: 700; }
.cal-grid__day--event time { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.calendar--compact .cal-agenda { gap: 6px; }
.cal-agenda__item { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid var(--accent); }
.cal-agenda__item time { font-size: 11px; color: #24143099; }
.cal-agenda__title { font-weight: 600; }
</style>

tailwind

<div class="calendar-tw calendar-tw--cozy font-sans text-[13px] leading-snug text-[#241430] bg-[#FAF7F2] p-3.5 rounded-xl max-w-[320px] box-border" data-view="month" style="--accent:#E8A020;">
  <table class="cal-grid-tw border-collapse w-full">
    <caption class="text-left font-semibold mb-2">August 2026</caption>
    <thead>
      <tr>
        <th scope="col" class="font-semibold text-[#24143099] text-[11px] text-center py-2 px-1">Mon</th>
        <th scope="col" class="font-semibold text-[#24143099] text-[11px] text-center py-2 px-1">Tue</th>
        <th scope="col" class="font-semibold text-[#24143099] text-[11px] text-center py-2 px-1">Wed</th>
        <th scope="col" class="font-semibold text-[#24143099] text-[11px] text-center py-2 px-1">Thu</th>
        <th scope="col" class="font-semibold text-[#24143099] text-[11px] text-center py-2 px-1">Fri</th>
        <th scope="col" class="font-semibold text-[#24143099] text-[11px] text-center py-2 px-1">Sat</th><th scope="col" class="font-semibold text-[#24143099] text-[11px] text-center py-2 px-1">Sun</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-10">10</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-11">11</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="cal-grid-tw__event inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-12">12</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-13">13</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-14">14</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-15">15</time></td><td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-16">16</time></td>
      </tr>
      <tr>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-17">17</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="cal-grid-tw__today inline-flex items-center justify-center w-[22px] h-[22px] rounded-md font-bold" datetime="2026-08-18">18</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-19">19</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-20">20</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="cal-grid-tw__event inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-21">21</time></td>
        <td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-22">22</time></td><td class="text-center py-2 px-1 text-[12px]"><time class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-md" datetime="2026-08-23">23</time></td>
      </tr>
    </tbody>
  </table>
  <ol class="cal-agenda-tw list-none m-0 p-0 flex flex-col gap-2.5">
    <li class="flex flex-col gap-0.5 pl-2.5" style="border-left:3px solid var(--accent);"><time class="text-[11px] text-[#24143099]" datetime="2026-08-18T09:30:00Z">Tue 18 Aug, 9:30am</time><span class="font-semibold">Design review</span></li>
    <li class="flex flex-col gap-0.5 pl-2.5" style="border-left:3px solid var(--accent);"><time class="text-[11px] text-[#24143099]" datetime="2026-08-19T14:00:00Z">Wed 19 Aug, 2:00pm</time><span class="font-semibold">Client call</span></li>
    <li class="flex flex-col gap-0.5 pl-2.5" style="border-left:3px solid var(--accent);"><time class="text-[11px] text-[#24143099]" datetime="2026-08-21T11:00:00Z">Fri 21 Aug, 11:00am</time><span class="font-semibold">Sprint planning</span></li>
  </ol>
</div>
<style>
.calendar-tw[data-view="month"] .cal-agenda-tw { display: none; }
.calendar-tw[data-view="agenda"] .cal-grid-tw { display: none; }
.calendar-tw--compact .cal-grid-tw td, .calendar-tw--compact .cal-grid-tw th { padding-top: 4px; padding-bottom: 4px; }
.calendar-tw--compact .cal-agenda-tw { gap: 6px; }
.cal-grid-tw__today { background: var(--accent); }
.cal-grid-tw__event { box-shadow: inset 0 0 0 2px var(--accent); }
</style>

react

export function Calendar({
  monthLabel = "August 2026",
  view = "month",
  accent = "#E8A020",
  showWeekend = true,
  size = "cozy",
}) {
  const weekdays = showWeekend ? ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] : ["Mon", "Tue", "Wed", "Thu", "Fri"];
  const week1 = [
    { day: 10, date: "2026-08-10" },
    { day: 11, date: "2026-08-11" },
    { day: 12, date: "2026-08-12", event: true },
    { day: 13, date: "2026-08-13" },
    { day: 14, date: "2026-08-14" },
    { day: 15, date: "2026-08-15" },
    { day: 16, date: "2026-08-16" },
  ].slice(0, showWeekend ? 7 : 5);
  const week2 = [
    { day: 17, date: "2026-08-17" },
    { day: 18, date: "2026-08-18", today: true },
    { day: 19, date: "2026-08-19" },
    { day: 20, date: "2026-08-20" },
    { day: 21, date: "2026-08-21", event: true },
    { day: 22, date: "2026-08-22" },
    { day: 23, date: "2026-08-23" },
  ].slice(0, showWeekend ? 7 : 5);
  const agenda = [
    { date: "2026-08-18T09:30:00Z", label: "Tue 18 Aug, 9:30am", title: "Design review" },
    { date: "2026-08-19T14:00:00Z", label: "Wed 19 Aug, 2:00pm", title: "Client call" },
    { date: "2026-08-21T11:00:00Z", label: "Fri 21 Aug, 11:00am", title: "Sprint planning" },
  ];
  const pad = size === "compact" ? 4 : 8;
  const cellStyle = (day) => ({
    display: "inline-flex", alignItems: "center", justifyContent: "center", width: 22, height: 22, borderRadius: 6,
    background: day.today ? accent : "transparent",
    boxShadow: day.event ? `inset 0 0 0 2px ${accent}` : "none",
    fontWeight: day.today ? 700 : 400,
  });
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 13, lineHeight: 1.4, color: "#241430", background: "#FAF7F2", padding: 14, borderRadius: 12, maxWidth: 320, boxSizing: "border-box" }}>
      {view === "month" ? (
        <table style={{ borderCollapse: "collapse", width: "100%" }}>
          <caption style={{ textAlign: "left", fontWeight: 600, marginBottom: 8 }}>{monthLabel}</caption>
          <thead>
            <tr>
              {weekdays.map((w) => (
                <th key={w} scope="col" style={{ fontWeight: 600, color: "#24143099", fontSize: 11, textAlign: "center", padding: `${pad}px 4px` }}>{w}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr>{week1.map((d) => <td key={d.date} style={{ textAlign: "center", padding: `${pad}px 4px`, fontSize: 12 }}><time dateTime={d.date} style={cellStyle(d)}>{d.day}</time></td>)}</tr>
            <tr>{week2.map((d) => <td key={d.date} style={{ textAlign: "center", padding: `${pad}px 4px`, fontSize: 12 }}><time dateTime={d.date} style={cellStyle(d)}>{d.day}</time></td>)}</tr>
          </tbody>
        </table>
      ) : (
        <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: size === "compact" ? 6 : 10 }}>
          {agenda.map((item) => (
            <li key={item.date} style={{ display: "flex", flexDirection: "column", gap: 2, paddingLeft: 10, borderLeft: `3px solid ${accent}` }}>
              <time dateTime={item.date} style={{ fontSize: 11, color: "#24143099" }}>{item.label}</time>
              <span style={{ fontWeight: 600 }}>{item.title}</span>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}