Calendar — uicraft

Default

A month calendar grid with today highlighted.

html

February 2026

Su Mo Tu We Th Fr Sa

<div class="uc-rounded-2xl uc-border uc-p-4">
  <div class="uc-flex uc-items-center uc-justify-between uc-mb-4">
    <button>&larr;</button>
    <span>February 2026</span>
    <button>&rarr;</button>
  </div>
  <div class="uc-grid uc-grid-cols-7 uc-text-center">
    <span class="uc-calendar-weekday">Su</span>
    <button class="uc-calendar-day">1</button>
    <button class="uc-calendar-day uc-active">15</button>
  </div>
</div>

With Selected Range

Calendar with a date range highlighted from 10th to 15th.

html

February 2026

Su Mo Tu We Th Fr Sa

<div class="uc-rounded-2xl uc-border uc-p-4">
  <div class="uc-flex uc-items-center uc-justify-between uc-mb-4">
    <button>&larr;</button>
    <span>February 2026</span>
    <button>&rarr;</button>
  </div>
  <div class="uc-grid uc-grid-cols-7 uc-text-center">
    <button class="uc-calendar-day uc-active">10</button>
    <button class="uc-calendar-day uc-bg-accents-blue/10">11</button>
    <button class="uc-calendar-day uc-bg-accents-blue/10">12</button>
    <!-- ...range continues -->
    <button class="uc-calendar-day uc-active">15</button>
  </div>
</div>

Multiple Months

Two calendars side by side for February and March 2026.

html

February 2026

Su Mo Tu We Th Fr Sa

March 2026

Su Mo Tu We Th Fr Sa

<div class="uc-flex uc-gap-4">
  <!-- February -->
  <div class="uc-rounded-2xl uc-border uc-p-4">
    <div class="uc-flex uc-items-center uc-justify-between uc-mb-4">
      <button>&larr;</button>
      <span>February 2026</span>
      <span></span>
    </div>
    <div class="uc-grid uc-grid-cols-7">...</div>
  </div>
  <!-- March -->
  <div class="uc-rounded-2xl uc-border uc-p-4">
    <div class="uc-flex uc-items-center uc-justify-between uc-mb-4">
      <span></span>
      <span>March 2026</span>
      <button>&rarr;</button>
    </div>
    <div class="uc-grid uc-grid-cols-7">...</div>
  </div>
</div>

With Events

Calendar with colored dots indicating events on specific dates.

html

February 2026

Su Mo Tu We Th Fr Sa

<div class="uc-rounded-2xl uc-border uc-p-4">
  <div class="uc-flex uc-items-center uc-justify-between uc-mb-4">
    <button>&larr;</button>
    <span>February 2026</span>
    <button>&rarr;</button>
  </div>
  <div class="uc-grid uc-grid-cols-7 uc-text-center">
    <button class="uc-calendar-day">1</button>
    <!-- Day with event -->
    <div class="uc-flex uc-flex-col uc-items-center">
      <button class="uc-calendar-day">3</button>
      <span class="uc-w-1 uc-h-1 uc-rounded-full uc-bg-accents-blue"></span>
    </div>
    <!-- ...more days -->
  </div>
</div>

Mini Calendar

A compact calendar with smaller text and tighter spacing.

html

Feb 2026

Su Mo Tu We Th Fr Sa

<div class="uc-rounded-2xl uc-border uc-p-3 uc-w-[220px]">
  <div class="uc-flex uc-items-center uc-justify-between uc-mb-2">
    <button>&larr;</button>
    <span class="uc-text-xs">Feb 2026</span>
    <button>&rarr;</button>
  </div>
  <div class="uc-grid uc-grid-cols-7 uc-text-center uc-text-xs">
    <span class="uc-calendar-weekday">Su</span>
    <button class="uc-calendar-day uc-w-7 uc-h-7">1</button>
    <button class="uc-calendar-day uc-w-7 uc-h-7 uc-active">15</button>
  </div>
</div>

API Reference

All utility classes available for the Calendar component.

Class	Type	Description
`uc-rounded-2xl`	Base	Rounded container for the calendar panel
`uc-border uc-border-border-default`	Base	Border around the calendar container
`uc-p-4`	Base	Default padding inside the calendar
`uc-p-3`	Size	Compact padding for mini calendar variant
`uc-w-[300px]`	Size	Default calendar width
`uc-w-[220px]`	Size	Mini calendar width
`uc-grid uc-grid-cols-7`	Layout	7-column grid for days of the week
`uc-calendar-day`	Base	Day cell — flex centered, w-9 h-9, rounded-full, hover highlight, cursor pointer
`uc-calendar-day uc-active`	State	Selected date — blue background, white text, bold
`uc-calendar-day uc-muted`	State	Disabled/other-month day — muted text color
`uc-calendar-day uc-today`	State	Today marker — bold with blue border
`uc-calendar-weekday`	Base	Weekday header label — centered, small text, muted
`uc-bg-accents-blue/10`	State	Range selection background between start and end dates
`uc-hover:bg-neutrals-subtle`	Modifier	Hover state for unselected day cells
`uc-font-semibold`	State	Bold weight for selected date and month header

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="grid" for the calendar with proper row/cell roles
Keyboard	Arrow keys navigate dates, Enter selects, Escape closes
Labels	Month/year header announces current view via aria-live
Selected	Selected date uses aria-selected="true", today uses aria-current="date"