Calendar
A date calendar component for displaying and selecting dates.
Default
A month calendar grid with today highlighted.
html
February 2026
Su
Mo
Tu
We
Th
Fr
Sa
<div class="vt-card vt-p-4 vt-w-[300px]" data-calendar="single" data-calendar-month="2026-02">
<!-- Header -->
<div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-8 vt-w-8 vt-text-foreground-muted" aria-label="Previous month" data-calendar-nav="-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
<path d="m15 18-6-6 6-6"></path>
</svg>
</button>
<span class="vt-text-sm vt-font-semibold" data-calendar-heading="" aria-live="polite">February 2026</span>
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-8 vt-w-8 vt-text-foreground-muted" aria-label="Next month" data-calendar-nav="1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
<!-- Day labels -->
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-mb-1">
<span class="vt-calendar-weekday">Su</span>
<span class="vt-calendar-weekday">Mo</span>
<span class="vt-calendar-weekday">Tu</span>
<span class="vt-calendar-weekday">We</span>
<span class="vt-calendar-weekday">Th</span>
<span class="vt-calendar-weekday">Fr</span>
<span class="vt-calendar-weekday">Sa</span>
</div>
<!-- Dates - Feb 2026 starts on Sunday -->
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-text-sm" data-calendar-grid="">
<button class="vt-calendar-day">1</button>
<button class="vt-calendar-day">2</button>
<button class="vt-calendar-day">3</button>
<button class="vt-calendar-day">4</button>
<button class="vt-calendar-day">5</button>
<button class="vt-calendar-day">6</button>
<button class="vt-calendar-day">7</button>
<button class="vt-calendar-day">8</button>
<button class="vt-calendar-day">9</button>
<button class="vt-calendar-day">10</button>
<button class="vt-calendar-day">11</button>
<button class="vt-calendar-day">12</button>
<button class="vt-calendar-day">13</button>
<button class="vt-calendar-day">14</button>
<button class="vt-calendar-day vt-active">15</button>
<button class="vt-calendar-day">16</button>
<button class="vt-calendar-day">17</button>
<button class="vt-calendar-day">18</button>
<button class="vt-calendar-day">19</button>
<button class="vt-calendar-day">20</button>
<button class="vt-calendar-day">21</button>
<button class="vt-calendar-day">22</button>
<button class="vt-calendar-day">23</button>
<button class="vt-calendar-day">24</button>
<button class="vt-calendar-day">25</button>
<button class="vt-calendar-day">26</button>
<button class="vt-calendar-day">27</button>
<button class="vt-calendar-day">28</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-card vt-p-4 vt-w-[300px]" data-calendar="range" data-calendar-month="2026-02">
<!-- Header -->
<div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-8 vt-w-8 vt-text-foreground-muted" aria-label="Previous month" data-calendar-nav="-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
<path d="m15 18-6-6 6-6"></path>
</svg>
</button>
<span class="vt-text-sm vt-font-semibold" data-calendar-heading="" aria-live="polite">February 2026</span>
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-8 vt-w-8 vt-text-foreground-muted" aria-label="Next month" data-calendar-nav="1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
<!-- Day labels -->
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-mb-1">
<span class="vt-calendar-weekday">Su</span>
<span class="vt-calendar-weekday">Mo</span>
<span class="vt-calendar-weekday">Tu</span>
<span class="vt-calendar-weekday">We</span>
<span class="vt-calendar-weekday">Th</span>
<span class="vt-calendar-weekday">Fr</span>
<span class="vt-calendar-weekday">Sa</span>
</div>
<!-- Dates -->
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-text-sm" data-calendar-grid="">
<button class="vt-calendar-day">1</button>
<button class="vt-calendar-day">2</button>
<button class="vt-calendar-day">3</button>
<button class="vt-calendar-day">4</button>
<button class="vt-calendar-day">5</button>
<button class="vt-calendar-day">6</button>
<button class="vt-calendar-day">7</button>
<button class="vt-calendar-day">8</button>
<button class="vt-calendar-day">9</button>
<button class="vt-calendar-day vt-active">10</button>
<button class="vt-calendar-day vt-bg-brand-fill/10">11</button>
<button class="vt-calendar-day vt-bg-brand-fill/10">12</button>
<button class="vt-calendar-day vt-bg-brand-fill/10">13</button>
<button class="vt-calendar-day vt-bg-brand-fill/10">14</button>
<button class="vt-calendar-day vt-active">15</button>
<button class="vt-calendar-day">16</button>
<button class="vt-calendar-day">17</button>
<button class="vt-calendar-day">18</button>
<button class="vt-calendar-day">19</button>
<button class="vt-calendar-day">20</button>
<button class="vt-calendar-day">21</button>
<button class="vt-calendar-day">22</button>
<button class="vt-calendar-day">23</button>
<button class="vt-calendar-day">24</button>
<button class="vt-calendar-day">25</button>
<button class="vt-calendar-day">26</button>
<button class="vt-calendar-day">27</button>
<button class="vt-calendar-day">28</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-card vt-p-4 vt-w-[300px]" data-calendar="single" data-calendar-month="2026-02">
<div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-8 vt-w-8 vt-text-foreground-muted" aria-label="Previous month" data-calendar-nav="-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
<path d="m15 18-6-6 6-6"></path>
</svg>
</button>
<span class="vt-text-sm vt-font-semibold" data-calendar-heading="" aria-live="polite">February 2026</span>
<span class="vt-w-8"></span>
</div>
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-mb-1">
<span class="vt-calendar-weekday">Su</span>
<span class="vt-calendar-weekday">Mo</span>
<span class="vt-calendar-weekday">Tu</span>
<span class="vt-calendar-weekday">We</span>
<span class="vt-calendar-weekday">Th</span>
<span class="vt-calendar-weekday">Fr</span>
<span class="vt-calendar-weekday">Sa</span>
</div>
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-text-sm" data-calendar-grid="">
<button class="vt-calendar-day">1</button>
<button class="vt-calendar-day">2</button>
<button class="vt-calendar-day">3</button>
<button class="vt-calendar-day">4</button>
<button class="vt-calendar-day">5</button>
<button class="vt-calendar-day">6</button>
<button class="vt-calendar-day">7</button>
<button class="vt-calendar-day">8</button>
<button class="vt-calendar-day">9</button>
<button class="vt-calendar-day">10</button>
<button class="vt-calendar-day">11</button>
<button class="vt-calendar-day">12</button>
<button class="vt-calendar-day">13</button>
<button class="vt-calendar-day">14</button>
<button class="vt-calendar-day vt-active">15</button>
<button class="vt-calendar-day">16</button>
<button class="vt-calendar-day">17</button>
<button class="vt-calendar-day">18</button>
<button class="vt-calendar-day">19</button>
<button class="vt-calendar-day">20</button>
<button class="vt-calendar-day">21</button>
<button class="vt-calendar-day">22</button>
<button class="vt-calendar-day">23</button>
<button class="vt-calendar-day">24</button>
<button class="vt-calendar-day">25</button>
<button class="vt-calendar-day">26</button>
<button class="vt-calendar-day">27</button>
<button class="vt-calendar-day">28</button>
</div>
</div>
<div class="vt-card vt-p-4 vt-w-[300px]" data-calendar="single" data-calendar-month="2026-03">
<div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
<span class="vt-w-8"></span>
<span class="vt-text-sm vt-font-semibold" data-calendar-heading="" aria-live="polite">March 2026</span>
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-8 vt-w-8 vt-text-foreground-muted" aria-label="Next month" data-calendar-nav="1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-mb-1">
<span class="vt-calendar-weekday">Su</span>
<span class="vt-calendar-weekday">Mo</span>
<span class="vt-calendar-weekday">Tu</span>
<span class="vt-calendar-weekday">We</span>
<span class="vt-calendar-weekday">Th</span>
<span class="vt-calendar-weekday">Fr</span>
<span class="vt-calendar-weekday">Sa</span>
</div>
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-text-sm" data-calendar-grid="">
<button class="vt-calendar-day">1</button>
<button class="vt-calendar-day">2</button>
<button class="vt-calendar-day">3</button>
<button class="vt-calendar-day">4</button>
<button class="vt-calendar-day">5</button>
<button class="vt-calendar-day">6</button>
<button class="vt-calendar-day">7</button>
<button class="vt-calendar-day">8</button>
<button class="vt-calendar-day">9</button>
<button class="vt-calendar-day">10</button>
<button class="vt-calendar-day">11</button>
<button class="vt-calendar-day">12</button>
<button class="vt-calendar-day">13</button>
<button class="vt-calendar-day">14</button>
<button class="vt-calendar-day">15</button>
<button class="vt-calendar-day">16</button>
<button class="vt-calendar-day">17</button>
<button class="vt-calendar-day">18</button>
<button class="vt-calendar-day">19</button>
<button class="vt-calendar-day">20</button>
<button class="vt-calendar-day">21</button>
<button class="vt-calendar-day">22</button>
<button class="vt-calendar-day">23</button>
<button class="vt-calendar-day">24</button>
<button class="vt-calendar-day">25</button>
<button class="vt-calendar-day">26</button>
<button class="vt-calendar-day">27</button>
<button class="vt-calendar-day">28</button>
<button class="vt-calendar-day">29</button>
<button class="vt-calendar-day">30</button>
<button class="vt-calendar-day">31</button>
</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-card vt-p-4 vt-w-[300px]" data-calendar="single" data-calendar-month="2026-02">
<!-- Header -->
<div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-8 vt-w-8 vt-text-foreground-muted" aria-label="Previous month" data-calendar-nav="-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
<path d="m15 18-6-6 6-6"></path>
</svg>
</button>
<span class="vt-text-sm vt-font-semibold" data-calendar-heading="" aria-live="polite">February 2026</span>
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-8 vt-w-8 vt-text-foreground-muted" aria-label="Next month" data-calendar-nav="1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
<!-- Day labels -->
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-mb-1">
<span class="vt-calendar-weekday">Su</span>
<span class="vt-calendar-weekday">Mo</span>
<span class="vt-calendar-weekday">Tu</span>
<span class="vt-calendar-weekday">We</span>
<span class="vt-calendar-weekday">Th</span>
<span class="vt-calendar-weekday">Fr</span>
<span class="vt-calendar-weekday">Sa</span>
</div>
<!-- Dates with event dots -->
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-text-sm" data-calendar-grid="">
<button class="vt-calendar-day">1</button>
<button class="vt-calendar-day">2</button>
<!-- Day 3 - 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-brand-fill vt--mt-1.5"></span>
</div>
<button class="vt-calendar-day">4</button>
<!-- Day 5 - event -->
<div class="vt-flex vt-flex-col vt-items-center">
<button class="vt-calendar-day">5</button>
<span class="vt-w-1 vt-h-1 vt-rounded-full vt-bg-brand-fill vt--mt-1.5"></span>
</div>
<button class="vt-calendar-day">6</button>
<button class="vt-calendar-day">7</button>
<button class="vt-calendar-day">8</button>
<button class="vt-calendar-day">9</button>
<button class="vt-calendar-day">10</button>
<button class="vt-calendar-day">11</button>
<!-- Day 12 - event -->
<div class="vt-flex vt-flex-col vt-items-center">
<button class="vt-calendar-day">12</button>
<span class="vt-w-1 vt-h-1 vt-rounded-full vt-bg-warning-fill vt--mt-1.5"></span>
</div>
<button class="vt-calendar-day">13</button>
<!-- Day 14 - event -->
<div class="vt-flex vt-flex-col vt-items-center">
<button class="vt-calendar-day">14</button>
<span class="vt-w-1 vt-h-1 vt-rounded-full vt-bg-error-fill vt--mt-1.5"></span>
</div>
<button class="vt-calendar-day vt-active">15</button>
<button class="vt-calendar-day">16</button>
<button class="vt-calendar-day">17</button>
<button class="vt-calendar-day">18</button>
<button class="vt-calendar-day">19</button>
<!-- Day 20 - event -->
<div class="vt-flex vt-flex-col vt-items-center">
<button class="vt-calendar-day">20</button>
<span class="vt-w-1 vt-h-1 vt-rounded-full vt-bg-brand-fill vt--mt-1.5"></span>
</div>
<button class="vt-calendar-day">21</button>
<button class="vt-calendar-day">22</button>
<button class="vt-calendar-day">23</button>
<button class="vt-calendar-day">24</button>
<!-- Day 25 - event -->
<div class="vt-flex vt-flex-col vt-items-center">
<button class="vt-calendar-day">25</button>
<span class="vt-w-1 vt-h-1 vt-rounded-full vt-bg-brand-fill vt--mt-1.5"></span>
</div>
<button class="vt-calendar-day">26</button>
<button class="vt-calendar-day">27</button>
<button class="vt-calendar-day">28</button>
</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-card vt-p-3 vt-w-[220px]" data-calendar="single" data-calendar-month="2026-02">
<!-- Header -->
<div class="vt-flex vt-items-center vt-justify-between vt-mb-2">
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-6 vt-w-6 vt-text-foreground-muted" aria-label="Previous month" data-calendar-nav="-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-3 vt-h-3">
<path d="m15 18-6-6 6-6"></path>
</svg>
</button>
<span class="vt-text-xs vt-font-semibold" data-calendar-heading="" aria-live="polite">Feb 2026</span>
<button class="vt-btn vt-btn-ghost vt-btn-icon vt-h-6 vt-w-6 vt-text-foreground-muted" aria-label="Next month" data-calendar-nav="1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-3 vt-h-3">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
<!-- Day labels -->
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-mb-0.5">
<span class="vt-calendar-weekday">Su</span>
<span class="vt-calendar-weekday">Mo</span>
<span class="vt-calendar-weekday">Tu</span>
<span class="vt-calendar-weekday">We</span>
<span class="vt-calendar-weekday">Th</span>
<span class="vt-calendar-weekday">Fr</span>
<span class="vt-calendar-weekday">Sa</span>
</div>
<!-- Dates -->
<div class="vt-grid vt-grid-cols-7 vt-text-center vt-text-xs" data-calendar-grid="">
<button class="vt-calendar-day vt-w-7 vt-h-7">1</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">2</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">3</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">4</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">5</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">6</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">7</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">8</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">9</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">10</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">11</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">12</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">13</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">14</button>
<button class="vt-calendar-day vt-w-7 vt-h-7 vt-active">15</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">16</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">17</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">18</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">19</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">20</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">21</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">22</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">23</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">24</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">25</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">26</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">27</button>
<button class="vt-calendar-day vt-w-7 vt-h-7">28</button>
</div>
</div>Guidelines
Let people browse a month and pick a date; keep the selected day and navigation obvious.
Feb 2026
Do
Feb 2026
Don't
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-brand-fill/10 |
State | Range selection background between start and end dates |
vt-hover:bg-surface-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" |