Calendar
Date picker calendar grid with day selection, range selection, event indicators, month/year picker, and size variants.
Basic Calendar
Preview
Mo
Tu
We
Th
Fr
Sa
Su
<div class="calendar">
<div class="calendar-header">
<div class="calendar-nav">
<button class="calendar-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
</div>
<span class="calendar-title">February 2026</span>
<div class="calendar-nav">
<button class="calendar-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
</div>
<div class="calendar-weekdays">
<span class="calendar-weekday">Mo</span>
<span class="calendar-weekday">Tu</span>
<span class="calendar-weekday">We</span>
<span class="calendar-weekday">Th</span>
<span class="calendar-weekday">Fr</span>
<span class="calendar-weekday">Sa</span>
<span class="calendar-weekday">Su</span>
</div>
<div class="calendar-days">
<button class="calendar-day calendar-day-other">26</button>
<button class="calendar-day calendar-day-other">27</button>
<button class="calendar-day calendar-day-other">28</button>
<button class="calendar-day calendar-day-other">29</button>
<button class="calendar-day calendar-day-other">30</button>
<button class="calendar-day calendar-day-other">31</button>
<button class="calendar-day">1</button>
<button class="calendar-day">2</button>
<button class="calendar-day">3</button>
<button class="calendar-day">4</button>
<button class="calendar-day">5</button>
<button class="calendar-day">6</button>
<button class="calendar-day calendar-day-today">7</button>
<button class="calendar-day">8</button>
<button class="calendar-day">9</button>
<button class="calendar-day">10</button>
<button class="calendar-day">11</button>
<button class="calendar-day calendar-day-selected">12</button>
<button class="calendar-day">13</button>
<button class="calendar-day">14</button>
<button class="calendar-day">15</button>
<button class="calendar-day">16</button>
<button class="calendar-day">17</button>
<button class="calendar-day">18</button>
<button class="calendar-day">19</button>
<button class="calendar-day">20</button>
<button class="calendar-day">21</button>
<button class="calendar-day">22</button>
<button class="calendar-day">23</button>
<button class="calendar-day">24</button>
<button class="calendar-day">25</button>
<button class="calendar-day">26</button>
<button class="calendar-day">27</button>
<button class="calendar-day">28</button>
</div>
<div class="calendar-footer">
<button class="calendar-today-btn">Today</button>
<button class="calendar-clear-btn">Clear</button>
</div>
</div> Requires: ux.min.css
<div class="w-80 overflow-hidden select-none bg-base-100 border border-base-300 rounded-box">
<div class="flex items-center justify-between p-4">
<button class="flex items-center justify-center w-8 h-8 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
<span class="font-semibold text-base-content" style="font-size: 1.0625rem;">February 2026</span>
<button class="flex items-center justify-center w-8 h-8 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
<div class="grid grid-cols-7 gap-0.5 px-4 pb-1">
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Mo</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Tu</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">We</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Th</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Fr</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Sa</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Su</span>
</div>
<div class="grid grid-cols-7 gap-0.5 px-4 pb-4">
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer text-base-content/30">26</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer text-base-content/30">27</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer text-base-content/30">28</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer text-base-content/30">29</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer text-base-content/30">30</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer text-base-content/30">31</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">1</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">2</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">3</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">4</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">5</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">6</button>
<button class="relative flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer font-semibold text-primary hover:bg-base-200">7</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">8</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">9</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">10</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">11</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-primary text-primary-content cursor-pointer font-medium">12</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">13</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full border-none bg-transparent cursor-pointer hover:bg-base-200">14</button>
</div>
<div class="flex items-center justify-between px-4 py-2 bg-base-200 border-t border-base-300">
<button class="text-sm font-medium text-primary bg-transparent border-none cursor-pointer px-2 py-1 rounded-field hover:bg-primary/10">Today</button>
<button class="text-sm text-base-content/60 bg-transparent border-none cursor-pointer px-2 py-1 rounded-field hover:bg-base-300">Clear</button>
</div>
</div> Requires: tw.min.css
// Navigate months
document.querySelectorAll('.calendar-nav-btn').forEach(btn => {
btn.addEventListener('click', () => {
// Update calendar-title and re-render days
});
});
// Select day
document.querySelectorAll('.calendar-day').forEach(day => {
day.addEventListener('click', () => {
document.querySelectorAll('.calendar-day-selected').forEach(d =>
d.classList.remove('calendar-day-selected'));
day.classList.add('calendar-day-selected');
});
}); Range Selection
Preview
Mo
Tu
We
Th
Fr
Sa
Su
<div class="calendar">
<div class="calendar-header">
<div class="calendar-nav">
<button class="calendar-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
</div>
<span class="calendar-title">February 2026</span>
<div class="calendar-nav">
<button class="calendar-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
</div>
<div class="calendar-weekdays">
<span class="calendar-weekday">Mo</span>
<span class="calendar-weekday">Tu</span>
<span class="calendar-weekday">We</span>
<span class="calendar-weekday">Th</span>
<span class="calendar-weekday">Fr</span>
<span class="calendar-weekday">Sa</span>
<span class="calendar-weekday">Su</span>
</div>
<div class="calendar-days">
<button class="calendar-day calendar-day-other">26</button>
<button class="calendar-day calendar-day-other">27</button>
<button class="calendar-day calendar-day-other">28</button>
<button class="calendar-day calendar-day-other">29</button>
<button class="calendar-day calendar-day-other">30</button>
<button class="calendar-day calendar-day-other">31</button>
<button class="calendar-day">1</button>
<button class="calendar-day">2</button>
<button class="calendar-day">3</button>
<button class="calendar-day">4</button>
<button class="calendar-day">5</button>
<button class="calendar-day">6</button>
<button class="calendar-day">7</button>
<button class="calendar-day">8</button>
<button class="calendar-day calendar-day-range-start">9</button>
<button class="calendar-day calendar-day-in-range">10</button>
<button class="calendar-day calendar-day-in-range">11</button>
<button class="calendar-day calendar-day-in-range">12</button>
<button class="calendar-day calendar-day-range-end">13</button>
<button class="calendar-day">14</button>
<button class="calendar-day">15</button>
<button class="calendar-day">16</button>
<button class="calendar-day">17</button>
<button class="calendar-day">18</button>
<button class="calendar-day">19</button>
<button class="calendar-day">20</button>
<button class="calendar-day">21</button>
<button class="calendar-day">22</button>
<button class="calendar-day">23</button>
<button class="calendar-day">24</button>
<button class="calendar-day">25</button>
<button class="calendar-day">26</button>
<button class="calendar-day">27</button>
<button class="calendar-day">28</button>
</div>
</div> Requires: ux.min.css
<div class="w-80 overflow-hidden select-none bg-base-100 border border-base-300 rounded-box">
<div class="flex items-center justify-between p-4">
<button class="flex items-center justify-center w-8 h-8 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
<span class="font-semibold text-base-content" style="font-size: 1.0625rem;">February 2026</span>
<button class="flex items-center justify-center w-8 h-8 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
<div class="grid grid-cols-7 gap-0.5 px-4 pb-1">
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Mo</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Tu</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">We</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Th</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Fr</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Sa</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold uppercase text-base-content/40">Su</span>
</div>
<div class="grid grid-cols-7 gap-0.5 px-4 pb-4">
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent text-base-content/30 border-none">26</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent text-base-content/30 border-none">27</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent text-base-content/30 border-none">28</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent text-base-content/30 border-none">29</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent text-base-content/30 border-none">30</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent text-base-content/30 border-none">31</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200">1</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200">2</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200">8</button>
<button class="flex items-center justify-center w-10 h-10 bg-primary text-primary-content border-none cursor-pointer" style="border-radius: 50% 0 0 50%;">9</button>
<button class="flex items-center justify-center w-10 h-10 bg-primary/15 rounded-none border-none cursor-pointer">10</button>
<button class="flex items-center justify-center w-10 h-10 bg-primary/15 rounded-none border-none cursor-pointer">11</button>
<button class="flex items-center justify-center w-10 h-10 bg-primary/15 rounded-none border-none cursor-pointer">12</button>
<button class="flex items-center justify-center w-10 h-10 bg-primary text-primary-content border-none cursor-pointer" style="border-radius: 0 50% 50% 0;">13</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200">14</button>
</div>
</div> Requires: tw.min.css
// Range selection logic
let rangeStart = null;
document.querySelectorAll('.calendar-day').forEach(day => {
day.addEventListener('click', () => {
if (!rangeStart) {
rangeStart = day;
day.classList.add('calendar-day-range-start');
} else {
day.classList.add('calendar-day-range-end');
// Mark days in between as calendar-day-in-range
rangeStart = null;
}
});
}); Event Indicators
Preview
Mo
Tu
We
Th
Fr
Sa
Su
<div class="calendar calendar-sm">
<div class="calendar-header">
<div class="calendar-nav">
<button class="calendar-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
</div>
<span class="calendar-title">February 2026</span>
<div class="calendar-nav">
<button class="calendar-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
</div>
<div class="calendar-weekdays">
<span class="calendar-weekday">Mo</span>
<span class="calendar-weekday">Tu</span>
<span class="calendar-weekday">We</span>
<span class="calendar-weekday">Th</span>
<span class="calendar-weekday">Fr</span>
<span class="calendar-weekday">Sa</span>
<span class="calendar-weekday">Su</span>
</div>
<div class="calendar-days">
<button class="calendar-day">2</button>
<button class="calendar-day">3</button>
<button class="calendar-day">
4
<span class="calendar-day-events">
<span class="calendar-day-event"></span>
</span>
</button>
<button class="calendar-day">5</button>
<button class="calendar-day">6</button>
<button class="calendar-day calendar-day-today">
7
<span class="calendar-day-events">
<span class="calendar-day-event"></span>
<span class="calendar-day-event calendar-day-event-success"></span>
</span>
</button>
<button class="calendar-day">8</button>
<button class="calendar-day">9</button>
<button class="calendar-day">
10
<span class="calendar-day-events">
<span class="calendar-day-event calendar-day-event-error"></span>
</span>
</button>
<button class="calendar-day">11</button>
<button class="calendar-day calendar-day-selected">
12
<span class="calendar-day-events">
<span class="calendar-day-event"></span>
<span class="calendar-day-event calendar-day-event-warning"></span>
<span class="calendar-day-event calendar-day-event-success"></span>
</span>
</button>
<button class="calendar-day">13</button>
<button class="calendar-day">14</button>
</div>
</div> Requires: ux.min.css
<div class="w-72 overflow-hidden select-none bg-base-100 border border-base-300 rounded-box">
<div class="flex items-center justify-between p-4">
<button class="flex items-center justify-center w-8 h-8 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
<span class="font-semibold text-base-content" style="font-size: 1.0625rem;">February 2026</span>
<button class="flex items-center justify-center w-8 h-8 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
<div class="grid grid-cols-7 gap-0.5 px-4 pb-4">
<button class="relative flex items-center justify-center w-8 h-8 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200">
4
<span class="absolute bottom-0.5 left-1/2 -translate-x-1/2 flex gap-0.5">
<span class="w-1 h-1 rounded-full bg-primary"></span>
</span>
</button>
<button class="relative flex items-center justify-center w-8 h-8 rounded-full bg-transparent border-none cursor-pointer font-semibold text-primary hover:bg-base-200">
7
<span class="absolute bottom-0.5 left-1/2 -translate-x-1/2 flex gap-0.5">
<span class="w-1 h-1 rounded-full bg-primary"></span>
<span class="w-1 h-1 rounded-full bg-success"></span>
</span>
</button>
<button class="relative flex items-center justify-center w-8 h-8 rounded-full bg-transparent border-none cursor-pointer hover:bg-base-200">
10
<span class="absolute bottom-0.5 left-1/2 -translate-x-1/2 flex gap-0.5">
<span class="w-1 h-1 rounded-full bg-error"></span>
</span>
</button>
<button class="relative flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-content border-none cursor-pointer font-medium">
12
<span class="absolute bottom-0.5 left-1/2 -translate-x-1/2 flex gap-0.5">
<span class="w-1 h-1 rounded-full bg-primary-content"></span>
<span class="w-1 h-1 rounded-full bg-primary-content"></span>
<span class="w-1 h-1 rounded-full bg-primary-content"></span>
</span>
</button>
</div>
</div> Requires: tw.min.css
// No JavaScript required - event dots are pure CSS Month/Year Picker
Preview
<div class="calendar">
<div class="calendar-header">
<div class="calendar-nav">
<button class="calendar-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
</div>
<span class="calendar-title">2026</span>
<div class="calendar-nav">
<button class="calendar-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
</div>
<div class="calendar-picker">
<button class="calendar-picker-item">Jan</button>
<button class="calendar-picker-item calendar-picker-item-current">Feb</button>
<button class="calendar-picker-item">Mar</button>
<button class="calendar-picker-item">Apr</button>
<button class="calendar-picker-item">May</button>
<button class="calendar-picker-item calendar-picker-item-selected">Jun</button>
<button class="calendar-picker-item">Jul</button>
<button class="calendar-picker-item">Aug</button>
<button class="calendar-picker-item">Sep</button>
<button class="calendar-picker-item">Oct</button>
<button class="calendar-picker-item">Nov</button>
<button class="calendar-picker-item">Dec</button>
</div>
</div> Requires: ux.min.css
<div class="w-80 overflow-hidden select-none bg-base-100 border border-base-300 rounded-box">
<div class="flex items-center justify-between p-4">
<button class="flex items-center justify-center w-8 h-8 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
<span class="font-semibold text-base-content" style="font-size: 1.0625rem;">2026</span>
<button class="flex items-center justify-center w-8 h-8 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
<div class="grid grid-cols-3 gap-2 p-4">
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Jan</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer font-semibold text-primary hover:bg-base-200">Feb</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Mar</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Apr</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">May</button>
<button class="flex items-center justify-center h-11 rounded-field bg-primary text-primary-content border-none cursor-pointer">Jun</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Jul</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Aug</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Sep</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Oct</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Nov</button>
<button class="flex items-center justify-center h-11 rounded-field bg-transparent border-none cursor-pointer hover:bg-base-200">Dec</button>
</div>
</div> Requires: tw.min.css
// Toggle between month picker and day grid
document.querySelector('.calendar-title').addEventListener('click', () => {
// Show calendar-picker, hide calendar-days
}); Classes Reference
| Class | Description |
|---|---|
.calendar | Root container with CSS variables |
.calendar-sm | Small size (280px, 32px cells) |
.calendar-lg | Large size (380px, 48px cells) |
.calendar-full | Full width |
.calendar-inline | No border or background |
.calendar.glass | Glass morphism variant |
.calendar-header | Top bar with nav and title |
.calendar-title | Month/year title text |
.calendar-nav-btn | Previous/next navigation |
.calendar-weekdays | Weekday label row |
.calendar-weekday | Individual weekday label |
.calendar-days | Day grid container |
.calendar-day | Individual day cell |
.calendar-day-other | Day from adjacent month |
.calendar-day-today | Current day highlight |
.calendar-day-selected | Selected day (primary bg) |
.calendar-day-disabled | Disabled/unavailable day |
.calendar-day-weekend | Weekend day (error color) |
.calendar-day-range-start | Range selection start |
.calendar-day-range-end | Range selection end |
.calendar-day-in-range | Day within range |
.calendar-day-events | Event dot container |
.calendar-day-event | Event dot (primary) |
.calendar-day-event-success | Success event dot |
.calendar-day-event-warning | Warning event dot |
.calendar-day-event-error | Error event dot |
.calendar-footer | Footer with today/clear buttons |
.calendar-today-btn | Go to today button |
.calendar-clear-btn | Clear selection button |
.calendar-picker | Month/year picker grid |
.calendar-picker-item | Picker cell |
.calendar-picker-item-selected | Selected picker cell |
.calendar-picker-item-current | Current month/year |