calendar date month schedule widget calendar month date picker grid days schedule show a monthly calendar display dates with events
Calendar Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/calendar-widget/base.json base.html
<section class="ws-calendar-widget bg-[var(--ws-calendar-widget-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-sm overflow-hidden rounded-2xl border border-[var(--ws-calendar-widget-border)] bg-[var(--ws-calendar-widget-bg)] shadow-md">
<div class="flex items-center justify-between px-5 py-4">
<button type="button" aria-label="Previous month" class="flex size-8 items-center justify-center rounded-lg text-[var(--ws-calendar-widget-text-soft)] hover:bg-[var(--ws-calendar-widget-border)]">
<span aria-hidden="true">←</span>
</button>
<h2 class="text-sm font-semibold text-[var(--ws-calendar-widget-text)]">March 2026</h2>
<button type="button" aria-label="Next month" class="flex size-8 items-center justify-center rounded-lg text-[var(--ws-calendar-widget-text-soft)] hover:bg-[var(--ws-calendar-widget-border)]">
<span aria-hidden="true">→</span>
</button>
</div>
<div class="px-5 pb-5">
<div class="mb-2 grid grid-cols-7 text-center text-xs font-medium text-[var(--ws-calendar-widget-text-muted)]" aria-hidden="true">
<span>Mo</span>
<span>Tu</span>
<span>We</span>
<span>Th</span>
<span>Fr</span>
<span>Sa</span>
<span>Su</span>
</div>
<div class="grid grid-cols-7 gap-y-1 text-center text-sm" role="grid" aria-label="March 2026 calendar">
<!-- Week 1 (starts on Sunday, so offset 6) -->
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">1</span>
<!-- Week 2 -->
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">2</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">3</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">4</span>
<span class="relative rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">5
<span class="absolute bottom-0.5 left-1/2 size-1 -translate-x-1/2 rounded-full bg-[var(--ws-calendar-widget-active)]" aria-label="Event"></span>
</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">6</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text-soft)]">7</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text-soft)]">8</span>
<!-- Week 3 -->
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">9</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">10</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">11</span>
<span class="relative rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">12
<span class="absolute bottom-0.5 left-1/2 size-1 -translate-x-1/2 rounded-full bg-[var(--ws-calendar-widget-active)]" aria-label="Event"></span>
</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">13</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text-soft)]">14</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text-soft)]">15</span>
<!-- Week 4 -->
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">16</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">17</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">18</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">19</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">20</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text-soft)]">21</span>
<span class="rounded-lg py-1.5 font-semibold text-[var(--ws-calendar-widget-active-text)] bg-[var(--ws-calendar-widget-today-bg)] size-8 mx-auto flex items-center justify-center" aria-current="date">22</span>
<!-- Week 5 -->
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">23</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">24</span>
<span class="relative rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">25
<span class="absolute bottom-0.5 left-1/2 size-1 -translate-x-1/2 rounded-full bg-[var(--ws-calendar-widget-active)]" aria-label="Event"></span>
</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">26</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">27</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text-soft)]">28</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text-soft)]">29</span>
<!-- Week 6 -->
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">30</span>
<span class="rounded-lg py-1.5 text-[var(--ws-calendar-widget-text)]">31</span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
<span class="py-1.5 text-[var(--ws-calendar-widget-text-muted)]"></span>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
calendardatemonthschedulewidget
A standard month-view calendar widget with a 7-column day grid, month/year header, and dot indicators for dates that have events. Clean and minimal, suitable for dashboards, booking pages, and sidebar panels.