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">
    <button>1</button> <!-- ...days -->
  </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-bg-accents-blue uc-text-constant-white">10</button>
    <button class="uc-bg-accents-blue/10">11</button>
    <button class="uc-bg-accents-blue/10">12</button>
    <!-- ...range continues -->
    <button class="uc-bg-accents-blue uc-text-constant-white">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>1</button>
    <!-- Day with event -->
    <div class="uc-flex uc-flex-col uc-items-center">
      <button>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">
    <button class="uc-w-7 uc-h-7">1</button> <!-- ...days -->
  </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-w-9 uc-h-9 uc-rounded-full`	Base	Default day cell size with circular shape
`uc-w-7 uc-h-7 uc-rounded-full`	Size	Mini day cell size with circular shape
`uc-bg-accents-blue uc-text-constant-white`	State	Selected or today date highlight
`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-text-fg-disabled`	Base	Muted color for day labels and navigation arrows
`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"