Open demo

CSS code

HTML 
<div class="dcal">
  <h2>September 2026</h2>
  <div class="cal">
      <table class="g">
        <caption class="sr-only">September 2026. Days with events can be selected.</caption>
        <thead><tr><th scope="col"><span aria-hidden="true">M</span><span class="sr-only">Monday</span></th><th scope="col"><span aria-hidden="true">T</span><span class="sr-only">Tuesday</span></th><th scope="col"><span aria-hidden="true">W</span><span class="sr-only">Wednesday</span></th><th scope="col"><span aria-hidden="true">T</span><span class="sr-only">Thursday</span></th><th scope="col"><span aria-hidden="true">F</span><span class="sr-only">Friday</span></th><th scope="col"><span aria-hidden="true">S</span><span class="sr-only">Saturday</span></th><th scope="col"><span aria-hidden="true">S</span><span class="sr-only">Sunday</span></th></tr></thead>
        <tbody>
          <tr><td><span class="d out">31</span></td><td><span class="d">1</span></td><td><span class="d">2</span></td><td><span class="d">3</span></td><td><span class="d">4</span></td><td><span class="d">5</span></td><td><span class="d">6</span></td></tr>
          <tr><td><span class="d">7</span></td><td><span class="d">8</span></td><td><label><input type="radio" name="dcal-day" id="dc-9" value="2026-09-09" aria-label="Wednesday 9 September, 1 event">9<i style="background:#0ea5e9" aria-hidden="true"></i></label></td><td><span class="d">10</span></td><td><span class="d">11</span></td><td><span class="d">12</span></td><td><span class="d">13</span></td></tr>
          <tr><td><label><input type="radio" name="dcal-day" id="dc-14" value="2026-09-14" aria-label="Monday 14 September, 3 events" checked>14<i style="background:#6d28d9" aria-hidden="true"></i></label></td><td><span class="d">15</span></td><td><span class="d">16</span></td><td><span class="d">17</span></td><td><span class="d">18</span></td><td><span class="d">19</span></td><td><span class="d">20</span></td></tr>
          <tr><td><span class="d">21</span></td><td><label><input type="radio" name="dcal-day" id="dc-22" value="2026-09-22" aria-label="Tuesday 22 September, 1 event">22<i style="background:#16a34a" aria-hidden="true"></i></label></td><td><span class="d">23</span></td><td><span class="d">24</span></td><td><span class="d">25</span></td><td><span class="d">26</span></td><td><span class="d">27</span></td></tr>
          <tr><td><span class="d">28</span></td><td><span class="d">29</span></td><td><span class="d">30</span></td><td><span class="d out">1</span></td><td><span class="d out">2</span></td><td><span class="d out">3</span></td><td><span class="d out">4</span></td></tr>
        </tbody>
      </table>
  </div>
  <div class="panel" aria-live="polite">
    <div class="pane" data-pane="9">
      <p class="dt">Wed 9 September</p><h3>One event</h3>
      <ul class="list">
        <li class="item"><i style="background:#0ea5e9" aria-hidden="true"></i><span><b>Design review</b><span>11:00 – 13:00 · Boardroom</span></span></li>
      </ul>
    </div>
    <div class="pane" data-pane="14">
      <p class="dt">Mon 14 September</p><h3>Three events</h3>
      <ul class="list">
        <li class="item"><i style="background:#6d28d9" aria-hidden="true"></i><span><b>Standup</b><span>09:00 – 09:15</span></span></li>
        <li class="item"><i style="background:#f59e0b" aria-hidden="true"></i><span><b>1:1 with Rosa</b><span>11:30 – 12:30</span></span></li>
        <li class="item"><i style="background:#16a34a" aria-hidden="true"></i><span><b>Q4 planning</b><span>14:00 – 15:30 · Boardroom</span></span></li>
      </ul>
    </div>
    <div class="pane" data-pane="22">
      <p class="dt">Tue 22 September</p><h3>One event</h3>
      <ul class="list">
        <li class="item"><i style="background:#16a34a" aria-hidden="true"></i><span><b>Studio photo shoot</b><span>All day · Studio A</span></span></li>
      </ul>
    </div>
  </div>
</div>
CSS 
/* Month + detail panel, no JavaScript: days with events are radio inputs inside the table,
   and :has() on the wrapper shows the pane whose data-pane matches the checked day. */
.dcal{--dc-accent:#6d28d9;--dc-muted:#5f6b7c;--dc-line:#eef1f5;
  box-sizing:border-box;width:100%;max-width:760px;padding:22px 24px 24px;background:#fff;border-radius:16px;
  box-shadow:0 14px 34px -18px rgba(18,24,40,.25);display:grid;grid-template-columns:1fr 240px;gap:24px}
.dcal h2{font-size:.98rem;margin:0 0 -12px;grid-column:1 / -1}
.dcal table{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed}
.dcal th{font-size:.62rem;font-weight:800;color:var(--dc-muted);text-transform:uppercase;padding:6px 0;text-align:center}
.dcal td{padding:0}
.dcal .d,.dcal label{aspect-ratio:1.15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.8rem;font-weight:600;border-radius:9px;color:#2c3546}
.dcal .out{color:#667284;font-weight:400}
.dcal label{position:relative;cursor:pointer;box-shadow:inset 0 0 0 1px #dbe1ea;transition:background .12s}
.dcal label:hover{background:#eef2f8}
.dcal label input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.dcal label i{width:5px;height:5px;border-radius:50%}
.dcal label:has(:checked){background:var(--dc-accent);color:#fff;box-shadow:none}
.dcal label:has(:checked) i{box-shadow:0 0 0 1.5px #fff}
.dcal label:has(:focus-visible){outline:2px solid var(--dc-accent);outline-offset:2px}
.dcal .panel{border-left:1px solid var(--dc-line);padding-left:22px}
.dcal .pane{display:none}
.dcal:has(#dc-9:checked) [data-pane="9"],
.dcal:has(#dc-14:checked) [data-pane="14"],
.dcal:has(#dc-22:checked) [data-pane="22"]{display:block}
.dcal .dt{font-size:.72rem;color:var(--dc-muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:0 0 3px}
.dcal h3{font-size:.86rem;margin:0 0 12px}
.dcal .list{list-style:none;margin:0;padding:0}
.dcal .item{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid #f2f4f8;font-size:.79rem}
.dcal .item:last-child{border-bottom:0}
.dcal .item i{width:4px;border-radius:3px;flex-shrink:0}
.dcal .item b{display:block;font-size:.81rem}
.dcal .item span span{color:var(--dc-muted)}
@media (max-width:680px){.dcal{grid-template-columns:1fr}.dcal .panel{border-left:0;padding-left:0;border-top:1px solid var(--dc-line);padding-top:18px}}
@media (prefers-reduced-motion:reduce){.dcal label{transition:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="dcal card w-100">
  <h2 class="fw-bold" style="font-size:.98rem">September 2026</h2>
  <div class="cal">
      <table class="table text-center mb-0">
        <caption class="visually-hidden">September 2026. Days with events can be selected.</caption>
        <thead><tr><th scope="col"><span aria-hidden="true">M</span><span class="visually-hidden">Monday</span></th><th scope="col"><span aria-hidden="true">T</span><span class="visually-hidden">Tuesday</span></th><th scope="col"><span aria-hidden="true">W</span><span class="visually-hidden">Wednesday</span></th><th scope="col"><span aria-hidden="true">T</span><span class="visually-hidden">Thursday</span></th><th scope="col"><span aria-hidden="true">F</span><span class="visually-hidden">Friday</span></th><th scope="col"><span aria-hidden="true">S</span><span class="visually-hidden">Saturday</span></th><th scope="col"><span aria-hidden="true">S</span><span class="visually-hidden">Sunday</span></th></tr></thead>
        <tbody>
          <tr><td><span class="d out">31</span></td><td><span class="d">1</span></td><td><span class="d">2</span></td><td><span class="d">3</span></td><td><span class="d">4</span></td><td><span class="d">5</span></td><td><span class="d">6</span></td></tr>
          <tr><td><span class="d">7</span></td><td><span class="d">8</span></td><td><label><input type="radio" name="dcal-day" id="dc-9" value="2026-09-09" class="visually-hidden" aria-label="Wednesday 9 September, 1 event">9<i style="background:#0ea5e9" aria-hidden="true"></i></label></td><td><span class="d">10</span></td><td><span class="d">11</span></td><td><span class="d">12</span></td><td><span class="d">13</span></td></tr>
          <tr><td><label><input type="radio" name="dcal-day" id="dc-14" value="2026-09-14" class="visually-hidden" aria-label="Monday 14 September, 3 events" checked>14<i style="background:#6d28d9" aria-hidden="true"></i></label></td><td><span class="d">15</span></td><td><span class="d">16</span></td><td><span class="d">17</span></td><td><span class="d">18</span></td><td><span class="d">19</span></td><td><span class="d">20</span></td></tr>
          <tr><td><span class="d">21</span></td><td><label><input type="radio" name="dcal-day" id="dc-22" value="2026-09-22" class="visually-hidden" aria-label="Tuesday 22 September, 1 event">22<i style="background:#16a34a" aria-hidden="true"></i></label></td><td><span class="d">23</span></td><td><span class="d">24</span></td><td><span class="d">25</span></td><td><span class="d">26</span></td><td><span class="d">27</span></td></tr>
          <tr><td><span class="d">28</span></td><td><span class="d">29</span></td><td><span class="d">30</span></td><td><span class="d out">1</span></td><td><span class="d out">2</span></td><td><span class="d out">3</span></td><td><span class="d out">4</span></td></tr>
        </tbody>
      </table>
  </div>
  <div class="panel" aria-live="polite">
    <div class="pane" data-pane="9">
      <p class="text-uppercase fw-bold mb-1" style="font-size:.72rem;letter-spacing:.05em;color:var(--dc-muted)">Wed 9 September</p><h3 class="fw-bold mb-2" style="font-size:.86rem">One event</h3>
      <ul class="list-group list-group-flush">
        <li class="item list-group-item d-flex gap-2" style="font-size:.79rem"><i style="background:#0ea5e9" aria-hidden="true"></i><span><b class="d-block" style="font-size:.81rem">Design review</b><span class="d-block" style="color:var(--dc-muted)">11:00 – 13:00 · Boardroom</span></span></li>
      </ul>
    </div>
    <div class="pane" data-pane="14">
      <p class="text-uppercase fw-bold mb-1" style="font-size:.72rem;letter-spacing:.05em;color:var(--dc-muted)">Mon 14 September</p><h3 class="fw-bold mb-2" style="font-size:.86rem">Three events</h3>
      <ul class="list-group list-group-flush">
        <li class="item list-group-item d-flex gap-2" style="font-size:.79rem"><i style="background:#6d28d9" aria-hidden="true"></i><span><b class="d-block" style="font-size:.81rem">Standup</b><span class="d-block" style="color:var(--dc-muted)">09:00 – 09:15</span></span></li>
        <li class="item list-group-item d-flex gap-2" style="font-size:.79rem"><i style="background:#f59e0b" aria-hidden="true"></i><span><b class="d-block" style="font-size:.81rem">1:1 with Rosa</b><span class="d-block" style="color:var(--dc-muted)">11:30 – 12:30</span></span></li>
        <li class="item list-group-item d-flex gap-2" style="font-size:.79rem"><i style="background:#16a34a" aria-hidden="true"></i><span><b class="d-block" style="font-size:.81rem">Q4 planning</b><span class="d-block" style="color:var(--dc-muted)">14:00 – 15:30 · Boardroom</span></span></li>
      </ul>
    </div>
    <div class="pane" data-pane="22">
      <p class="text-uppercase fw-bold mb-1" style="font-size:.72rem;letter-spacing:.05em;color:var(--dc-muted)">Tue 22 September</p><h3 class="fw-bold mb-2" style="font-size:.86rem">One event</h3>
      <ul class="list-group list-group-flush">
        <li class="item list-group-item d-flex gap-2" style="font-size:.79rem"><i style="background:#16a34a" aria-hidden="true"></i><span><b class="d-block" style="font-size:.81rem">Studio photo shoot</b><span class="d-block" style="color:var(--dc-muted)">All day · Studio A</span></span></li>
      </ul>
    </div>
  </div>
</div>
CSS 
/* Bootstrap card, .table and .list-group; the day buttons are radio inputs inside labels,
   and :has() on the wrapper shows the matching pane. */
.dcal{--dc-accent:#6d28d9;--dc-muted:#5f6b7c;--dc-line:#eef1f5;
  max-width:760px;padding:22px 24px 24px;border:0;border-radius:16px;box-shadow:0 14px 34px -18px rgba(18,24,40,.25);
  display:grid;grid-template-columns:1fr 240px;gap:24px}
.dcal h2{margin-bottom:-12px;grid-column:1 / -1}
.dcal .table{--bs-table-bg:transparent;border-collapse:separate;border-spacing:3px;table-layout:fixed}
.dcal .table>:not(caption)>*>*{padding:0;border:0}
.dcal .table th{font-size:.62rem;font-weight:800;color:var(--dc-muted);text-transform:uppercase;padding:6px 0}
.dcal .d,.dcal label{aspect-ratio:1.15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.8rem;font-weight:600;border-radius:9px;color:#2c3546}
.dcal .out{color:#667284;font-weight:400}
.dcal label{position:relative;cursor:pointer;box-shadow:inset 0 0 0 1px #dbe1ea;transition:background-color .12s}
.dcal label:hover{background:#eef2f8}
.dcal label i{width:5px;height:5px;border-radius:50%}
.dcal label:has(:checked){background:var(--dc-accent);color:#fff;box-shadow:none}
.dcal label:has(:checked) i{box-shadow:0 0 0 1.5px #fff}
.dcal label:has(:focus-visible){outline:2px solid var(--dc-accent);outline-offset:2px}
.dcal .panel{border-left:1px solid var(--dc-line);padding-left:22px}
.dcal .pane{display:none}
.dcal:has(#dc-9:checked) [data-pane="9"],
.dcal:has(#dc-14:checked) [data-pane="14"],
.dcal:has(#dc-22:checked) [data-pane="22"]{display:block}
.dcal .list-group{--bs-list-group-bg:transparent;--bs-list-group-border-color:#f2f4f8;--bs-list-group-item-padding-x:0;--bs-list-group-item-padding-y:9px}
.dcal .item i{width:4px;border-radius:3px;flex-shrink:0}
@media (max-width:680px){.dcal{grid-template-columns:1fr}.dcal .panel{border-left:0;padding-left:0;border-top:1px solid var(--dc-line);padding-top:18px}}
@media (prefers-reduced-motion:reduce){.dcal label{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="dcal grid w-full max-w-[760px] grid-cols-[1fr_240px] gap-6 rounded-2xl bg-white px-6 pt-[22px] pb-6 shadow-[0_14px_34px_-18px_rgba(18,24,40,.25)] max-[680px]:grid-cols-1">
  <h2 class="col-span-full -mb-3 text-[.98rem] font-bold">September 2026</h2>
  <div>
      <table class="w-full table-fixed border-separate border-spacing-[3px]">
        <caption class="sr-only">September 2026. Days with events can be selected.</caption>
        <thead><tr><th scope="col" class="py-1.5 text-center text-[.62rem] font-extrabold text-dc-muted uppercase"><span aria-hidden="true">M</span><span class="sr-only">Monday</span></th><th scope="col" class="py-1.5 text-center text-[.62rem] font-extrabold text-dc-muted uppercase"><span aria-hidden="true">T</span><span class="sr-only">Tuesday</span></th><th scope="col" class="py-1.5 text-center text-[.62rem] font-extrabold text-dc-muted uppercase"><span aria-hidden="true">W</span><span class="sr-only">Wednesday</span></th><th scope="col" class="py-1.5 text-center text-[.62rem] font-extrabold text-dc-muted uppercase"><span aria-hidden="true">T</span><span class="sr-only">Thursday</span></th><th scope="col" class="py-1.5 text-center text-[.62rem] font-extrabold text-dc-muted uppercase"><span aria-hidden="true">F</span><span class="sr-only">Friday</span></th><th scope="col" class="py-1.5 text-center text-[.62rem] font-extrabold text-dc-muted uppercase"><span aria-hidden="true">S</span><span class="sr-only">Saturday</span></th><th scope="col" class="py-1.5 text-center text-[.62rem] font-extrabold text-dc-muted uppercase"><span aria-hidden="true">S</span><span class="sr-only">Sunday</span></th></tr></thead>
        <tbody>
          <tr><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-normal text-[#667284]">31</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">1</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">2</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">3</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">4</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">5</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">6</span></td></tr>
          <tr><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">7</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">8</span></td><td class="p-0"><label class="group relative flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] cursor-pointer font-semibold text-[#2c3546] shadow-[inset_0_0_0_1px_#dbe1ea] transition-[background-color] duration-[120ms] hover:bg-[#eef2f8] has-checked:bg-dc-accent has-checked:text-white has-checked:shadow-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-dc-accent motion-reduce:transition-none"><input type="radio" name="dcal-day" id="dc-9" value="2026-09-09" class="sr-only" aria-label="Wednesday 9 September, 1 event">9<i class="size-[5px] rounded-full group-has-checked:shadow-[0_0_0_1.5px_#fff]" style="background:#0ea5e9" aria-hidden="true"></i></label></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">10</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">11</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">12</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">13</span></td></tr>
          <tr><td class="p-0"><label class="group relative flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] cursor-pointer font-semibold text-[#2c3546] shadow-[inset_0_0_0_1px_#dbe1ea] transition-[background-color] duration-[120ms] hover:bg-[#eef2f8] has-checked:bg-dc-accent has-checked:text-white has-checked:shadow-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-dc-accent motion-reduce:transition-none"><input type="radio" name="dcal-day" id="dc-14" value="2026-09-14" class="sr-only" aria-label="Monday 14 September, 3 events" checked>14<i class="size-[5px] rounded-full group-has-checked:shadow-[0_0_0_1.5px_#fff]" style="background:#6d28d9" aria-hidden="true"></i></label></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">15</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">16</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">17</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">18</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">19</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">20</span></td></tr>
          <tr><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">21</span></td><td class="p-0"><label class="group relative flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] cursor-pointer font-semibold text-[#2c3546] shadow-[inset_0_0_0_1px_#dbe1ea] transition-[background-color] duration-[120ms] hover:bg-[#eef2f8] has-checked:bg-dc-accent has-checked:text-white has-checked:shadow-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-dc-accent motion-reduce:transition-none"><input type="radio" name="dcal-day" id="dc-22" value="2026-09-22" class="sr-only" aria-label="Tuesday 22 September, 1 event">22<i class="size-[5px] rounded-full group-has-checked:shadow-[0_0_0_1.5px_#fff]" style="background:#16a34a" aria-hidden="true"></i></label></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">23</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">24</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">25</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">26</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">27</span></td></tr>
          <tr><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">28</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">29</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-semibold text-[#2c3546]">30</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-normal text-[#667284]">1</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-normal text-[#667284]">2</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-normal text-[#667284]">3</span></td><td class="p-0"><span class="flex aspect-[1.15] flex-col items-center justify-center gap-[3px] rounded-[9px] text-[.8rem] font-normal text-[#667284]">4</span></td></tr>
        </tbody>
      </table>
  </div>
  <div class="border-l border-dc-line pl-[22px] max-[680px]:border-t max-[680px]:border-l-0 max-[680px]:pt-[18px] max-[680px]:pl-0" aria-live="polite">
    <div class="hidden [.dcal:has(#dc-9:checked)_&]:block" data-pane="9">
      <p class="mb-[3px] text-[.72rem] font-bold tracking-[.05em] text-dc-muted uppercase">Wed 9 September</p><h3 class="mb-3 text-[.86rem] font-bold">One event</h3>
      <ul>
        <li class="flex gap-[9px] border-b border-[#f2f4f8] py-[9px] text-[.79rem] last:border-b-0"><i class="w-1 shrink-0 rounded-[3px]" style="background:#0ea5e9" aria-hidden="true"></i><span><b class="block text-[.81rem]">Design review</b><span class="text-dc-muted">11:00 – 13:00 · Boardroom</span></span></li>
      </ul>
    </div>
    <div class="hidden [.dcal:has(#dc-14:checked)_&]:block" data-pane="14">
      <p class="mb-[3px] text-[.72rem] font-bold tracking-[.05em] text-dc-muted uppercase">Mon 14 September</p><h3 class="mb-3 text-[.86rem] font-bold">Three events</h3>
      <ul>
        <li class="flex gap-[9px] border-b border-[#f2f4f8] py-[9px] text-[.79rem] last:border-b-0"><i class="w-1 shrink-0 rounded-[3px]" style="background:#6d28d9" aria-hidden="true"></i><span><b class="block text-[.81rem]">Standup</b><span class="text-dc-muted">09:00 – 09:15</span></span></li>
        <li class="flex gap-[9px] border-b border-[#f2f4f8] py-[9px] text-[.79rem] last:border-b-0"><i class="w-1 shrink-0 rounded-[3px]" style="background:#f59e0b" aria-hidden="true"></i><span><b class="block text-[.81rem]">1:1 with Rosa</b><span class="text-dc-muted">11:30 – 12:30</span></span></li>
        <li class="flex gap-[9px] border-b border-[#f2f4f8] py-[9px] text-[.79rem] last:border-b-0"><i class="w-1 shrink-0 rounded-[3px]" style="background:#16a34a" aria-hidden="true"></i><span><b class="block text-[.81rem]">Q4 planning</b><span class="text-dc-muted">14:00 – 15:30 · Boardroom</span></span></li>
      </ul>
    </div>
    <div class="hidden [.dcal:has(#dc-22:checked)_&]:block" data-pane="22">
      <p class="mb-[3px] text-[.72rem] font-bold tracking-[.05em] text-dc-muted uppercase">Tue 22 September</p><h3 class="mb-3 text-[.86rem] font-bold">One event</h3>
      <ul>
        <li class="flex gap-[9px] border-b border-[#f2f4f8] py-[9px] text-[.79rem] last:border-b-0"><i class="w-1 shrink-0 rounded-[3px]" style="background:#16a34a" aria-hidden="true"></i><span><b class="block text-[.81rem]">Studio photo shoot</b><span class="text-dc-muted">All day · Studio A</span></span></li>
      </ul>
    </div>
  </div>
</div>
CSS 
@theme {
  --color-dc-accent: #6d28d9;
  --color-dc-muted: #5f6b7c;
  --color-dc-line: #eef1f5;
}

About this set

A month grid for September 2026 next to a detail panel. Three days have events and are outlined as selectable; choosing one swaps the panel to that day, with a heading, an event count and each event with its time and room. There is no JavaScript. The days with events are radio inputs inside their table cells, and a :has() rule on the wrapper shows the pane whose data-pane value matches the checked input, so it works as soon as the HTML is parsed. Use it for event listings, class timetables or a booking page where most days are empty and a few need detail. The grid is a table with a caption and full weekday headers. Each selectable day has an accessible name such as Monday 14 September, 3 events, and the panel is a polite live region so the change is announced. Selectable days carry a thin outline as well as a dot, so they stand out without relying on colour. Below 680 pixels the panel moves under the grid. The Bootstrap version uses .table and .list-group, and the Tailwind version uses has-checked and an arbitrary :has() variant on each pane.

What’s included

  • Day selection with radio inputs, no JavaScript
  • :has() on the wrapper swaps the detail pane
  • Accessible names such as "Monday 14 September, 3 events"
  • Detail panel is a polite live region
  • Panel moves under the grid below 680px

Accessibility

The month is a table with a caption and full weekday headers. Selectable days are native radio inputs with descriptive aria-labels; Tab reaches the group and the arrow keys move between event days. Focus draws a 2px violet outline around the day, the panel is aria-live="polite", and the hover transition is removed under prefers-reduced-motion.

Customise it

Change --dc-accent, --dc-muted and --dc-line on .dcal in plain CSS and Bootstrap, or the --color-dc-* theme colours in Tailwind. To add a day, give its input an id and add a matching :has() rule and data-pane.