Open demo

CSS code

HTML 
<div class="ccal">
  <div class="hd"><h2>September 2026</h2><div class="nav"><button type="button" aria-label="Previous month"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><button type="button" aria-label="Next month"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></div>
  <table class="g">
    <caption class="sr-only">September 2026</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="out">31</span></td><td><span>1</span></td><td><span>2</span></td><td><span>3</span></td><td><span>4</span></td><td><span>5</span></td><td><span>6</span></td></tr>
      <tr><td><span>7</span></td><td><span>8</span></td><td><span>9<span class="sr-only">, has events</span><i aria-hidden="true"></i></span></td><td><span>10</span></td><td><span>11</span></td><td><span>12</span></td><td><span>13</span></td></tr>
      <tr><td aria-current="date"><span class="today">14<span class="sr-only">, today, has events</span><i aria-hidden="true"></i></span></td><td><span>15</span></td><td><span>16</span></td><td><span>17<span class="sr-only">, has events</span><i aria-hidden="true"></i></span></td><td><span>18</span></td><td><span>19</span></td><td><span>20</span></td></tr>
      <tr><td><span>21</span></td><td><span>22<span class="sr-only">, has events</span><i aria-hidden="true"></i></span></td><td><span>23</span></td><td><span>24</span></td><td><span>25</span></td><td><span>26</span></td><td><span>27</span></td></tr>
      <tr><td><span>28</span></td><td><span>29</span></td><td><span>30</span></td><td><span class="out">1</span></td><td><span class="out">2</span></td><td><span class="out">3</span></td><td><span class="out">4</span></td></tr>
    </tbody>
  </table>
  <div class="up">
    <h3>Up next</h3>
    <ul>
      <li><i style="background:#6d28d9" aria-hidden="true"></i><span><strong>Standup</strong><span>Today · 09:00</span></span></li>
      <li><i style="background:#16a34a" aria-hidden="true"></i><span><strong>Q4 planning</strong><span>Today · 14:00</span></span></li>
      <li><i style="background:#0ea5e9" aria-hidden="true"></i><span><strong>Client — Meridian</strong><span>Thu 17 · 15:00</span></span></li>
    </ul>
  </div>
</div>
CSS 
/* Compact dashboard calendar: a small month table with event dots, plus an "Up next" list.
   Dots and today are colour cues; each also has visually hidden text. */
.ccal{--cc-accent:#6d28d9;--cc-muted:#5f6b7c;
  box-sizing:border-box;width:290px;max-width:100%;padding:18px;background:#fff;border-radius:16px;
  box-shadow:0 14px 34px -18px rgba(18,24,40,.25)}
.ccal .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ccal h2{font-size:.88rem;margin:0}
.ccal .nav{display:flex;gap:4px}
.ccal button{width:24px;height:24px;border:0;border-radius:7px;background:#f1f3f7;color:#4b5567;display:grid;place-items:center;
  padding:0;cursor:pointer;transition:background .12s}
.ccal button:hover{background:#e4e8ef}
.ccal button:focus-visible{outline:2px solid var(--cc-accent);outline-offset:2px}
.ccal button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ccal table{width:100%;border-collapse:separate;border-spacing:1px;table-layout:fixed;text-align:center}
.ccal th{font-size:.62rem;font-weight:800;color:var(--cc-muted);padding:6px 0}
.ccal td{padding:0}
.ccal td > span{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:.72rem;font-weight:600;color:#2c3546;border-radius:7px}
.ccal .out{color:#667284;font-weight:400}
.ccal .today{background:var(--cc-accent);color:#fff}
.ccal td i{width:4px;height:4px;border-radius:50%;background:var(--cc-accent)}
.ccal .today i{background:#fff}
.ccal .up{margin-top:16px;padding-top:14px;border-top:1px solid #eef1f5}
.ccal h3{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cc-muted);margin:0 0 10px}
.ccal ul{list-style:none;margin:0;padding:0}
.ccal li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:.78rem}
.ccal li i{width:3px;align-self:stretch;border-radius:3px;flex-shrink:0}
.ccal li strong{display:block;font-size:.8rem;font-weight:700}
.ccal li span span{color:var(--cc-muted);font-size:.74rem}
@media (prefers-reduced-motion:reduce){.ccal button{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="ccal card">
  <div class="d-flex align-items-center justify-content-between" style="margin-bottom:12px"><h2 class="fw-bold m-0" style="font-size:.88rem">September 2026</h2><div class="d-flex gap-1"><button type="button" class="btn" aria-label="Previous month"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><button type="button" class="btn" aria-label="Next month"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></div>
  <table class="table text-center mb-0">
    <caption class="visually-hidden">September 2026</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="out">31</span></td><td><span>1</span></td><td><span>2</span></td><td><span>3</span></td><td><span>4</span></td><td><span>5</span></td><td><span>6</span></td></tr>
      <tr><td><span>7</span></td><td><span>8</span></td><td><span>9<span class="visually-hidden">, has events</span><i aria-hidden="true"></i></span></td><td><span>10</span></td><td><span>11</span></td><td><span>12</span></td><td><span>13</span></td></tr>
      <tr><td aria-current="date"><span class="today">14<span class="visually-hidden">, today, has events</span><i aria-hidden="true"></i></span></td><td><span>15</span></td><td><span>16</span></td><td><span>17<span class="visually-hidden">, has events</span><i aria-hidden="true"></i></span></td><td><span>18</span></td><td><span>19</span></td><td><span>20</span></td></tr>
      <tr><td><span>21</span></td><td><span>22<span class="visually-hidden">, has events</span><i aria-hidden="true"></i></span></td><td><span>23</span></td><td><span>24</span></td><td><span>25</span></td><td><span>26</span></td><td><span>27</span></td></tr>
      <tr><td><span>28</span></td><td><span>29</span></td><td><span>30</span></td><td><span class="out">1</span></td><td><span class="out">2</span></td><td><span class="out">3</span></td><td><span class="out">4</span></td></tr>
    </tbody>
  </table>
  <div class="up mt-3 pt-3 border-top" style="border-color:#eef1f5!important">
    <h3 class="text-uppercase fw-bolder mb-2" style="font-size:.68rem;letter-spacing:.08em;color:var(--cc-muted)">Up next</h3>
    <ul class="list-unstyled m-0">
      <li class="d-flex align-items-stretch gap-2" style="font-size:.78rem;padding:6px 0"><i style="background:#6d28d9" aria-hidden="true"></i><span><strong class="d-block fw-bold" style="font-size:.8rem">Standup</strong><span style="font-size:.74rem;color:var(--cc-muted)">Today · 09:00</span></span></li>
      <li class="d-flex align-items-stretch gap-2" style="font-size:.78rem;padding:6px 0"><i style="background:#16a34a" aria-hidden="true"></i><span><strong class="d-block fw-bold" style="font-size:.8rem">Q4 planning</strong><span style="font-size:.74rem;color:var(--cc-muted)">Today · 14:00</span></span></li>
      <li class="d-flex align-items-stretch gap-2" style="font-size:.78rem;padding:6px 0"><i style="background:#0ea5e9" aria-hidden="true"></i><span><strong class="d-block fw-bold" style="font-size:.8rem">Client — Meridian</strong><span style="font-size:.74rem;color:var(--cc-muted)">Thu 17 · 15:00</span></span></li>
    </ul>
  </div>
</div>
CSS 
/* Bootstrap card, .btn and .table, restyled through their --bs-* variables. */
.ccal{--cc-accent:#6d28d9;--cc-muted:#5f6b7c;
  width:290px;max-width:100%;padding:18px;border:0;border-radius:16px;box-shadow:0 14px 34px -18px rgba(18,24,40,.25)}
.ccal .btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-bg:#f1f3f7;--bs-btn-border-color:transparent;--bs-btn-color:#4b5567;
  --bs-btn-hover-bg:#e4e8ef;--bs-btn-hover-border-color:transparent;--bs-btn-hover-color:#4b5567;--bs-btn-border-radius:7px;
  width:24px;height:24px;display:grid;place-items:center;transition:background-color .12s}
.ccal .btn:focus-visible{box-shadow:none;outline:2px solid var(--cc-accent);outline-offset:2px}
.ccal .btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ccal .table{--bs-table-bg:transparent;--bs-table-color:#2c3546;border-collapse:separate;border-spacing:1px;table-layout:fixed}
.ccal .table>:not(caption)>*>*{padding:0;border:0}
.ccal .table th{font-size:.62rem;font-weight:800;color:var(--cc-muted);padding:6px 0}
.ccal td > span{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:.72rem;font-weight:600;border-radius:7px}
.ccal .out{color:#667284;font-weight:400}
.ccal .today{background:var(--cc-accent);color:#fff}
.ccal td i{width:4px;height:4px;border-radius:50%;background:var(--cc-accent)}
.ccal .today i{background:#fff}
.ccal .up li i{width:3px;border-radius:3px;flex-shrink:0}
@media (prefers-reduced-motion:reduce){.ccal .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="ccal w-[290px] max-w-full rounded-2xl bg-white p-[18px] shadow-[0_14px_34px_-18px_rgba(18,24,40,.25)]">
  <div class="mb-3 flex items-center justify-between"><h2 class="text-[.88rem] font-bold">September 2026</h2><div class="flex gap-1"><button type="button" class="grid size-6 cursor-pointer place-items-center rounded-[7px] bg-[#f1f3f7] text-[#4b5567] transition-[background-color] duration-[120ms] hover:bg-[#e4e8ef] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cc-accent motion-reduce:transition-none [&_svg]:size-3.5 [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-[2.4] [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]" aria-label="Previous month"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><button type="button" class="grid size-6 cursor-pointer place-items-center rounded-[7px] bg-[#f1f3f7] text-[#4b5567] transition-[background-color] duration-[120ms] hover:bg-[#e4e8ef] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cc-accent motion-reduce:transition-none [&_svg]:size-3.5 [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-[2.4] [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]" aria-label="Next month"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></div>
  <table class="w-full table-fixed border-separate border-spacing-px text-center">
    <caption class="sr-only">September 2026</caption>
    <thead><tr><th scope="col" class="py-1.5 text-[.62rem] font-extrabold text-cc-muted"><span aria-hidden="true">M</span><span class="sr-only">Monday</span></th><th scope="col" class="py-1.5 text-[.62rem] font-extrabold text-cc-muted"><span aria-hidden="true">T</span><span class="sr-only">Tuesday</span></th><th scope="col" class="py-1.5 text-[.62rem] font-extrabold text-cc-muted"><span aria-hidden="true">W</span><span class="sr-only">Wednesday</span></th><th scope="col" class="py-1.5 text-[.62rem] font-extrabold text-cc-muted"><span aria-hidden="true">T</span><span class="sr-only">Thursday</span></th><th scope="col" class="py-1.5 text-[.62rem] font-extrabold text-cc-muted"><span aria-hidden="true">F</span><span class="sr-only">Friday</span></th><th scope="col" class="py-1.5 text-[.62rem] font-extrabold text-cc-muted"><span aria-hidden="true">S</span><span class="sr-only">Saturday</span></th><th scope="col" class="py-1.5 text-[.62rem] font-extrabold text-cc-muted"><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-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-normal text-[#667284]">31</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">1</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">2</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">3</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">4</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">5</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">6</span></td></tr>
      <tr><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">7</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">8</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">9<span class="sr-only">, has events</span><i class="size-1 rounded-full bg-cc-accent" aria-hidden="true"></i></span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">10</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">11</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">12</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">13</span></td></tr>
      <tr><td class="p-0" aria-current="date"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] bg-cc-accent font-semibold text-white">14<span class="sr-only">, today, has events</span><i class="size-1 rounded-full bg-white" aria-hidden="true"></i></span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">15</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">16</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">17<span class="sr-only">, has events</span><i class="size-1 rounded-full bg-cc-accent" aria-hidden="true"></i></span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">18</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">19</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">20</span></td></tr>
      <tr><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">21</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">22<span class="sr-only">, has events</span><i class="size-1 rounded-full bg-cc-accent" aria-hidden="true"></i></span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">23</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">24</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">25</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">26</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">27</span></td></tr>
      <tr><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">28</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">29</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-semibold text-[#2c3546]">30</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-normal text-[#667284]">1</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-normal text-[#667284]">2</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-normal text-[#667284]">3</span></td><td class="p-0"><span class="flex aspect-square flex-col items-center justify-center gap-0.5 rounded-[7px] text-[.72rem] font-normal text-[#667284]">4</span></td></tr>
    </tbody>
  </table>
  <div class="mt-4 border-t border-[#eef1f5] pt-3.5">
    <h3 class="mb-2.5 text-[.68rem] font-extrabold tracking-[.08em] text-cc-muted uppercase">Up next</h3>
    <ul>
      <li class="flex items-start gap-2.5 py-1.5 text-[.78rem]"><i class="w-[3px] shrink-0 self-stretch rounded-[3px]" style="background:#6d28d9" aria-hidden="true"></i><span><strong class="block text-[.8rem] font-bold">Standup</strong><span class="text-[.74rem] text-cc-muted">Today · 09:00</span></span></li>
      <li class="flex items-start gap-2.5 py-1.5 text-[.78rem]"><i class="w-[3px] shrink-0 self-stretch rounded-[3px]" style="background:#16a34a" aria-hidden="true"></i><span><strong class="block text-[.8rem] font-bold">Q4 planning</strong><span class="text-[.74rem] text-cc-muted">Today · 14:00</span></span></li>
      <li class="flex items-start gap-2.5 py-1.5 text-[.78rem]"><i class="w-[3px] shrink-0 self-stretch rounded-[3px]" style="background:#0ea5e9" aria-hidden="true"></i><span><strong class="block text-[.8rem] font-bold">Client — Meridian</strong><span class="text-[.74rem] text-cc-muted">Thu 17 · 15:00</span></span></li>
    </ul>
  </div>
</div>
CSS 
@theme {
  --color-cc-accent: #6d28d9;
  --color-cc-muted: #5f6b7c;
}

About this set

A 290 pixel calendar card for dashboards and sidebars: a month header with previous and next buttons, a small month grid with today filled in violet and a dot under each day that has events, and an Up next list of the following three events with coloured markers. Use it in an admin dashboard, a CRM sidebar or a project tool where the calendar is one widget among many. The month is a real table with a caption and weekday headers carrying the full day names. Today has aria-current=”date”, and today and each day with events also have visually hidden text, so the dots and the fill are not the only signal. The previous and next controls are real buttons with aria-labels and an SVG chevron; they are not wired to anything, so connect them to your own month logic. Out-of-month days are lighter in weight but still meet 4.5:1 contrast. The card is fixed at 290 pixels with max-width: 100%, so it never overflows a narrow column. The Bootstrap version uses .card, .btn and .table, and the Tailwind version builds the same parts from utilities.

What’s included

  • Month table with event dots and a filled today
  • Previous and next buttons with aria-labels
  • "Up next" list with coloured markers
  • Hidden text for today and days with events
  • Fixed 290px card that shrinks to fit narrow columns

Accessibility

The month is a table with a caption and full weekday headers. Today has aria-current="date" and hidden "today" text, and days with events include hidden "has events" text. The navigation buttons have aria-labels and a 2px violet focus outline, and their hover transition is removed under prefers-reduced-motion.

Customise it

Change --cc-accent and --cc-muted on .ccal in plain CSS and Bootstrap (the buttons use --bs-btn-* variables), or the --color-cc-* theme colours in Tailwind. Width is the 290px on the card.