Calendar — Veritheme

Default

A month calendar grid with today highlighted.

html

February 2026

Su Mo Tu We Th Fr Sa

<div class="vt-rounded-2xl vt-border vt-p-4">
  <div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
    <button>&larr;</button>
    <span>February 2026</span>
    <button>&rarr;</button>
  </div>
  <div class="vt-grid vt-grid-cols-7 vt-text-center">
    <span class="vt-calendar-weekday">Su</span>
    <button class="vt-calendar-day">1</button>
    <button class="vt-calendar-day vt-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="vt-rounded-2xl vt-border vt-p-4">
  <div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
    <button>&larr;</button>
    <span>February 2026</span>
    <button>&rarr;</button>
  </div>
  <div class="vt-grid vt-grid-cols-7 vt-text-center">
    <button class="vt-calendar-day vt-active">10</button>
    <button class="vt-calendar-day vt-bg-info-primary/10">11</button>
    <button class="vt-calendar-day vt-bg-info-primary/10">12</button>
    <!-- ...range continues -->
    <button class="vt-calendar-day vt-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="vt-flex vt-gap-4">
  <!-- February -->
  <div class="vt-rounded-2xl vt-border vt-p-4">
    <div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
      <button>&larr;</button>
      <span>February 2026</span>
      <span></span>
    </div>
    <div class="vt-grid vt-grid-cols-7">...</div>
  </div>
  <!-- March -->
  <div class="vt-rounded-2xl vt-border vt-p-4">
    <div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
      <span></span>
      <span>March 2026</span>
      <button>&rarr;</button>
    </div>
    <div class="vt-grid vt-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="vt-rounded-2xl vt-border vt-p-4">
  <div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
    <button>&larr;</button>
    <span>February 2026</span>
    <button>&rarr;</button>
  </div>
  <div class="vt-grid vt-grid-cols-7 vt-text-center">
    <button class="vt-calendar-day">1</button>
    <!-- Day with event -->
    <div class="vt-flex vt-flex-col vt-items-center">
      <button class="vt-calendar-day">3</button>
      <span class="vt-w-1 vt-h-1 vt-rounded-full vt-bg-info-primary"></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="vt-rounded-2xl vt-border vt-p-3 vt-w-[220px]">
  <div class="vt-flex vt-items-center vt-justify-between vt-mb-2">
    <button>&larr;</button>
    <span class="vt-text-xs">Feb 2026</span>
    <button>&rarr;</button>
  </div>
  <div class="vt-grid vt-grid-cols-7 vt-text-center vt-text-xs">
    <span class="vt-calendar-weekday">Su</span>
    <button class="vt-calendar-day vt-w-7 vt-h-7">1</button>
    <button class="vt-calendar-day vt-w-7 vt-h-7 vt-active">15</button>
  </div>
</div>

API Reference

All utility classes available for the Calendar component.

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