Calendar

Date picker calendar grid with day selection, range selection, event indicators, month/year picker, and size variants.

Basic Calendar

Preview

February 2026

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 => &#123;
  btn.addEventListener('click', () => &#123;
    // Update calendar-title and re-render days
  &#125;);
&#125;);

// Select day
document.querySelectorAll('.calendar-day').forEach(day => &#123;
  day.addEventListener('click', () => &#123;
    document.querySelectorAll('.calendar-day-selected').forEach(d =>
      d.classList.remove('calendar-day-selected'));
    day.classList.add('calendar-day-selected');
  &#125;);
&#125;);

Range Selection

Preview

February 2026

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 => &#123;
  day.addEventListener('click', () => &#123;
    if (!rangeStart) &#123;
      rangeStart = day;
      day.classList.add('calendar-day-range-start');
    &#125; else &#123;
      day.classList.add('calendar-day-range-end');
      // Mark days in between as calendar-day-in-range
      rangeStart = null;
    &#125;
  &#125;);
&#125;);

Event Indicators

Preview

February 2026

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

2026

<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', () => &#123;
  // Show calendar-picker, hide calendar-days
&#125;);

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