calendar

Pure-CSS month calendar. Day cells with today/selected/disabled states.

status: visual-only js: consumer support: baseline

Preview

Month Year

S……

Markup

<div class="calendar"><div class="calendar-header"><span class="calendar-title">Month Year</span><div class="calendar-nav"><button class="calendar-nav-btn">‹</button><button class="calendar-nav-btn">›</button></div></div><div class="calendar-grid"><span class="calendar-weekday">S</span>…<button class="calendar-day">1</button>…</div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/calendar.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add calendar

Accessibility

Visual month grid; month nav + date logic need JS; add role=grid/row/gridcell for an interactive picker

Classes

.calendar .calendar-header .calendar-title .calendar-nav .calendar-nav-btn .calendar-grid .calendar-weekday .calendar-day .calendar-sm .is-today .outside

Dependencies

base/tokens