Scheduler

Resource scheduler with week/day/month views, bookings with status colors, time grid, resource columns, current time indicator, and drag-to-create support.

Week View

Preview

Feb 23 - Mar 1, 2026

Mon 23

Tue 24

Wed 25

Thu 26

Sat 28

8:00

9:00

10:00

11:00

12:00

Team Standup

9:00 - 10:00

Client Review

10:15 - 11:45

Workshop

8:00 - 10:00

Lunch Meeting

11:00 - 12:00

<div class="scheduler">
  <div class="scheduler-header">
    <div class="scheduler-nav">
      <button class="scheduler-nav-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button class="scheduler-nav-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
      </button>
      <span class="scheduler-title">Feb 23 - Mar 1, 2026</span>
    </div>
    <div style="display: flex; align-items: center; gap: 0.5rem;">
      <button class="scheduler-today-btn">Today</button>
      <div class="scheduler-view-toggle">
        <button class="scheduler-view-btn">Day</button>
        <button class="scheduler-view-btn scheduler-view-btn-active">Week</button>
        <button class="scheduler-view-btn">Month</button>
      </div>
    </div>
  </div>
  <div class="scheduler-day-headers">
    <div class="scheduler-corner"></div>
    <div class="scheduler-day-header">
      <span class="scheduler-day-name">Mon</span>
      <span class="scheduler-day-number">23</span>
    </div>
    <div class="scheduler-day-header scheduler-day-header-today">
      <span class="scheduler-day-name">Tue</span>
      <span class="scheduler-day-number">24</span>
    </div>
    <div class="scheduler-day-header">
      <span class="scheduler-day-name">Wed</span>
      <span class="scheduler-day-number">25</span>
    </div>
    <div class="scheduler-day-header">
      <span class="scheduler-day-name">Thu</span>
      <span class="scheduler-day-number">26</span>
    </div>
    <div class="scheduler-day-header scheduler-day-header-weekend">
      <span class="scheduler-day-name">Sat</span>
      <span class="scheduler-day-number">28</span>
    </div>
  </div>
  <div class="scheduler-body">
    <div class="scheduler-grid">
      <div class="scheduler-times">
        <div class="scheduler-time">8:00</div>
        <div class="scheduler-time">9:00</div>
        <div class="scheduler-time">10:00</div>
        <div class="scheduler-time">11:00</div>
        <div class="scheduler-time">12:00</div>
      </div>
      <div class="scheduler-columns">
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-confirmed" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Team Standup</div>
              <div class="scheduler-booking-time">9:00 - 10:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
        </div>
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-pending" style="top: 15px; height: 90px;">
              <div class="scheduler-booking-title">Client Review</div>
              <div class="scheduler-booking-time">10:15 - 11:45</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
        </div>
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-primary" style="top: 0; height: 120px;">
              <div class="scheduler-booking-title">Workshop</div>
              <div class="scheduler-booking-time">8:00 - 10:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
        </div>
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-confirmed" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Lunch Meeting</div>
              <div class="scheduler-booking-time">11:00 - 12:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
        </div>
        <div class="scheduler-day-column scheduler-day-column-weekend">
          <div class="scheduler-hour-slot scheduler-hour-slot-non-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-non-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-non-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-non-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-non-business"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- The scheduler component is semantic-only due to its grid complexity.
     Use the scheduler CSS classes as shown in the semantic tab. -->

Requires: tw.min.css

// Navigate weeks
document.querySelectorAll('.scheduler-nav-btn').forEach(btn => &#123;
  btn.addEventListener('click', () => &#123;
    // Update scheduler-title and re-render grid
  &#125;);
&#125;);

// View toggle
document.querySelectorAll('.scheduler-view-btn').forEach(btn => &#123;
  btn.addEventListener('click', () => &#123;
    document.querySelectorAll('.scheduler-view-btn-active')
      .forEach(b => b.classList.remove('scheduler-view-btn-active'));
    btn.classList.add('scheduler-view-btn-active');
    // Switch between day/week/month layouts
  &#125;);
&#125;);

// Click slot to create booking
document.querySelectorAll('.scheduler-hour-slot').forEach(slot => &#123;
  slot.addEventListener('click', () => &#123;
    // Open booking creation form
  &#125;);
&#125;);

Resource View

Preview

Tuesday, Feb 24

Dr. Ana Lopez

Cardiology

Dr. Marc Ruiz

Dermatology

Sara Perez

Physiotherapy

9:00

10:00

11:00

12:00

Check-up: Maria G.

9:00 - 10:00

Consultation

10:15 - 11:00

Skin Treatment

10:00 - 11:30

Rehab Session

9:30 - 10:30

Blocked

11:00 - 12:00

<div class="scheduler">
  <div class="scheduler-header">
    <div class="scheduler-nav">
      <button class="scheduler-nav-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button class="scheduler-nav-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
      </button>
      <span class="scheduler-title">Tuesday, Feb 24</span>
    </div>
    <button class="scheduler-today-btn">Today</button>
  </div>
  <div class="scheduler-resources-header">
    <div class="scheduler-resources-corner"></div>
    <div class="scheduler-resource-header">
      <div class="scheduler-resource-avatar">AL</div>
      <div class="scheduler-resource-name">Dr. Ana Lopez</div>
      <div class="scheduler-resource-info">Cardiology</div>
    </div>
    <div class="scheduler-resource-header">
      <div class="scheduler-resource-avatar">MR</div>
      <div class="scheduler-resource-name">Dr. Marc Ruiz</div>
      <div class="scheduler-resource-info">Dermatology</div>
    </div>
    <div class="scheduler-resource-header">
      <div class="scheduler-resource-avatar">SP</div>
      <div class="scheduler-resource-name">Sara Perez</div>
      <div class="scheduler-resource-info">Physiotherapy</div>
    </div>
  </div>
  <div class="scheduler-body">
    <div class="scheduler-grid">
      <div class="scheduler-times">
        <div class="scheduler-time">9:00</div>
        <div class="scheduler-time">10:00</div>
        <div class="scheduler-time">11:00</div>
        <div class="scheduler-time">12:00</div>
      </div>
      <div class="scheduler-columns">
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-confirmed" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Check-up: Maria G.</div>
              <div class="scheduler-booking-time">9:00 - 10:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-pending" style="top: 15px; height: 45px;">
              <div class="scheduler-booking-title">Consultation</div>
              <div class="scheduler-booking-time">10:15 - 11:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
        </div>
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-confirmed" style="top: 0; height: 90px;">
              <div class="scheduler-booking-title">Skin Treatment</div>
              <div class="scheduler-booking-time">10:00 - 11:30</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
        </div>
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-confirmed" style="top: 30px; height: 60px;">
              <div class="scheduler-booking-title">Rehab Session</div>
              <div class="scheduler-booking-time">9:30 - 10:30</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-blocked" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Blocked</div>
              <div class="scheduler-booking-time">11:00 - 12:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- The scheduler component is semantic-only due to its grid complexity.
     Use the scheduler CSS classes as shown in the semantic tab. -->

Requires: tw.min.css

// Resource view renders one day with columns per resource
// instead of columns per day. Same grid structure applies.

Booking Statuses

Preview

Booking Status Examples

9:00

10:00

11:00

12:00

13:00

14:00

Confirmed Booking

9:00 - 10:00

Pending Approval

10:00 - 11:00

Cancelled Session

11:00 - 12:00

Blocked Slot

12:00 - 13:00

Primary Event

13:00 - 14:00

Urgent / Error

14:00 - 15:00

<div class="scheduler" style="max-width: 600px;">
  <div class="scheduler-header">
    <span class="scheduler-title">Booking Status Examples</span>
  </div>
  <div class="scheduler-body">
    <div class="scheduler-grid" style="min-height: auto;">
      <div class="scheduler-times">
        <div class="scheduler-time">9:00</div>
        <div class="scheduler-time">10:00</div>
        <div class="scheduler-time">11:00</div>
        <div class="scheduler-time">12:00</div>
        <div class="scheduler-time">13:00</div>
        <div class="scheduler-time">14:00</div>
      </div>
      <div class="scheduler-columns">
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-confirmed" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Confirmed Booking</div>
              <div class="scheduler-booking-time">9:00 - 10:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-pending" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Pending Approval</div>
              <div class="scheduler-booking-time">10:00 - 11:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-cancelled" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Cancelled Session</div>
              <div class="scheduler-booking-time">11:00 - 12:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-blocked" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Blocked Slot</div>
              <div class="scheduler-booking-time">12:00 - 13:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-primary" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Primary Event</div>
              <div class="scheduler-booking-time">13:00 - 14:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-error" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Urgent / Error</div>
              <div class="scheduler-booking-time">14:00 - 15:00</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- The scheduler component is semantic-only due to its grid complexity.
     Use the scheduler CSS classes as shown in the semantic tab. -->

Requires: tw.min.css

// Booking statuses are applied via CSS modifier classes:
// .scheduler-booking-confirmed  - Green (success)
// .scheduler-booking-pending    - Yellow (warning)
// .scheduler-booking-cancelled  - Muted with strikethrough
// .scheduler-booking-blocked    - Grey, cursor not-allowed
// .scheduler-booking-primary    - Primary color
// .scheduler-booking-error      - Red (error)
//
// Conflict indicator:
// Add .scheduler-booking-conflict to show a red
// ring and "!" badge on overlapping bookings.

Month View

Preview

February 2026

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Team Standup

Client Call

Workshop

Review

Sprint Demo

Standup

1:1 Meeting

+2 more

<div class="scheduler">
  <div class="scheduler-header">
    <div class="scheduler-nav">
      <button class="scheduler-nav-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button class="scheduler-nav-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
      </button>
      <span class="scheduler-title">February 2026</span>
    </div>
    <div style="display: flex; align-items: center; gap: 0.5rem;">
      <button class="scheduler-today-btn">Today</button>
      <div class="scheduler-view-toggle">
        <button class="scheduler-view-btn">Day</button>
        <button class="scheduler-view-btn">Week</button>
        <button class="scheduler-view-btn scheduler-view-btn-active">Month</button>
      </div>
    </div>
  </div>
  <div class="scheduler-month-grid">
    <div class="scheduler-month-header">Mon</div>
    <div class="scheduler-month-header">Tue</div>
    <div class="scheduler-month-header">Wed</div>
    <div class="scheduler-month-header">Thu</div>
    <div class="scheduler-month-header">Fri</div>
    <div class="scheduler-month-header">Sat</div>
    <div class="scheduler-month-header">Sun</div>

    <div class="scheduler-month-day scheduler-month-day-other">
      <span class="scheduler-month-day-number">26</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-other">
      <span class="scheduler-month-day-number">27</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-other">
      <span class="scheduler-month-day-number">28</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-other">
      <span class="scheduler-month-day-number">29</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-other">
      <span class="scheduler-month-day-number">30</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-other scheduler-month-day-weekend">
      <span class="scheduler-month-day-number">31</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-other scheduler-month-day-weekend">
      <span class="scheduler-month-day-number">1</span>
    </div>

    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">2</span>
      <div class="scheduler-month-booking scheduler-month-booking-confirmed">Team Standup</div>
    </div>
    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">3</span>
    </div>
    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">4</span>
      <div class="scheduler-month-booking scheduler-month-booking-pending">Client Call</div>
    </div>
    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">5</span>
    </div>
    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">6</span>
      <div class="scheduler-month-booking scheduler-month-booking-confirmed">Workshop</div>
      <div class="scheduler-month-booking scheduler-month-booking-confirmed">Review</div>
    </div>
    <div class="scheduler-month-day scheduler-month-day-weekend">
      <span class="scheduler-month-day-number">7</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-weekend">
      <span class="scheduler-month-day-number">8</span>
    </div>

    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">9</span>
    </div>
    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">10</span>
      <div class="scheduler-month-booking scheduler-month-booking-confirmed">Sprint Demo</div>
    </div>
    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">11</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-today">
      <span class="scheduler-month-day-number">12</span>
      <div class="scheduler-month-booking scheduler-month-booking-confirmed">Standup</div>
      <div class="scheduler-month-booking scheduler-month-booking-pending">1:1 Meeting</div>
      <span class="scheduler-month-more">+2 more</span>
    </div>
    <div class="scheduler-month-day">
      <span class="scheduler-month-day-number">13</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-weekend">
      <span class="scheduler-month-day-number">14</span>
    </div>
    <div class="scheduler-month-day scheduler-month-day-weekend">
      <span class="scheduler-month-day-number">15</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- The scheduler component is semantic-only due to its grid complexity.
     Use the scheduler CSS classes as shown in the semantic tab. -->

Requires: tw.min.css

// Month view click handler
document.querySelectorAll('.scheduler-month-day').forEach(day => &#123;
  day.addEventListener('click', () => &#123;
    // Switch to day view for the clicked date
  &#125;);
&#125;);

// "+N more" click handler
document.querySelectorAll('.scheduler-month-more').forEach(link => &#123;
  link.addEventListener('click', (e) => &#123;
    e.stopPropagation();
    // Show popover with all bookings for this day
  &#125;);
&#125;);

Current Time Indicator

Preview

Today - Live Indicator

9:00

10:00

11:00

Morning Standup

9:00 - 10:00

Design Review

11:00 - 12:00

<div class="scheduler" style="max-width: 500px;">
  <div class="scheduler-header">
    <span class="scheduler-title">Today - Live Indicator</span>
  </div>
  <div class="scheduler-body">
    <div class="scheduler-grid" style="min-height: auto;">
      <div class="scheduler-times">
        <div class="scheduler-time">9:00</div>
        <div class="scheduler-time">10:00</div>
        <div class="scheduler-time">11:00</div>
      </div>
      <div class="scheduler-columns">
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-confirmed" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Morning Standup</div>
              <div class="scheduler-booking-time">9:00 - 10:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <!-- Current time indicator at 10:25 (25/60 = ~42% into the hour) -->
            <div class="scheduler-now-line" style="top: 25px;"></div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-pending" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Design Review</div>
              <div class="scheduler-booking-time">11:00 - 12:00</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- The scheduler component is semantic-only due to its grid complexity.
     Use the scheduler CSS classes as shown in the semantic tab. -->

Requires: tw.min.css

// Update current time indicator position
function updateNowLine() &#123;
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const hourHeight = 60; // --scheduler-hour-height
  const startHour = 8; // first visible hour

  const top = (hours - startHour) * hourHeight
            + (minutes / 60) * hourHeight;

  const line = document.querySelector('.scheduler-now-line');
  if (line) line.style.top = top + 'px';
&#125;

updateNowLine();
setInterval(updateNowLine, 60000); // Update every minute

Glass Variant

Preview

Feb 24, 2026

Tue 24

9:00

10:00

11:00

12:00

Morning Standup

9:00 - 10:00

Design Workshop

11:00 - 12:30

<div class="scheduler glass">
  <div class="scheduler-header">
    <div class="scheduler-nav">
      <button class="scheduler-nav-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button class="scheduler-nav-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
      </button>
      <span class="scheduler-title">Feb 24, 2026</span>
    </div>
    <div style="display: flex; align-items: center; gap: 0.5rem;">
      <button class="scheduler-today-btn">Today</button>
      <div class="scheduler-view-toggle">
        <button class="scheduler-view-btn scheduler-view-btn-active">Day</button>
        <button class="scheduler-view-btn">Week</button>
        <button class="scheduler-view-btn">Month</button>
      </div>
    </div>
  </div>
  <div class="scheduler-day-headers">
    <div class="scheduler-corner"></div>
    <div class="scheduler-day-header scheduler-day-header-today">
      <span class="scheduler-day-name">Tue</span>
      <span class="scheduler-day-number">24</span>
    </div>
  </div>
  <div class="scheduler-body">
    <div class="scheduler-grid" style="min-height: auto;">
      <div class="scheduler-times">
        <div class="scheduler-time">9:00</div>
        <div class="scheduler-time">10:00</div>
        <div class="scheduler-time">11:00</div>
        <div class="scheduler-time">12:00</div>
      </div>
      <div class="scheduler-columns">
        <div class="scheduler-day-column">
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-confirmed" style="top: 0; height: 60px;">
              <div class="scheduler-booking-title">Morning Standup</div>
              <div class="scheduler-booking-time">9:00 - 10:00</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-now-line" style="top: 25px;"></div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business">
            <div class="scheduler-booking scheduler-booking-primary" style="top: 0; height: 90px;">
              <div class="scheduler-booking-title">Design Workshop</div>
              <div class="scheduler-booking-time">11:00 - 12:30</div>
            </div>
          </div>
          <div class="scheduler-hour-slot scheduler-hour-slot-business"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- The scheduler component is semantic-only due to its grid complexity.
     Use the scheduler CSS classes as shown in the semantic tab. -->

Requires: tw.min.css

// Glass variant uses the same structure - just add
// the "glass" class to the root .scheduler element.

Classes Reference

Class	Description
`.scheduler`	Root container with CSS variables (--scheduler-hour-height, --scheduler-time-width, --scheduler-resource-width)
`.scheduler.glass`	Glass morphism variant with translucent backgrounds
Header
`.scheduler-header`	Top bar with navigation, title, and view toggle
`.scheduler-nav`	Navigation button group container
`.scheduler-nav-btn`	Previous/next navigation button (36x36)
`.scheduler-title`	Date range or current date title
`.scheduler-today-btn`	"Today" button with primary outline style
`.scheduler-view-toggle`	Container for Day/Week/Month toggle buttons
`.scheduler-view-btn`	Individual view toggle button
`.scheduler-view-btn-active`	Currently active view toggle button
Day Headers
`.scheduler-day-headers`	Sticky row of day column headers
`.scheduler-corner`	Empty corner cell above time column
`.scheduler-day-header`	Individual day header (name + number)
`.scheduler-day-header-today`	Highlights today's column header (primary circle on number)
`.scheduler-day-header-selected`	Selected day header (light primary background)
`.scheduler-day-header-weekend`	Weekend day header (muted background)
`.scheduler-day-name`	Abbreviated day name (Mon, Tue, etc.)
`.scheduler-day-number`	Day of month number in circle
Resource Headers
`.scheduler-resources-header`	Sticky row of resource column headers
`.scheduler-resources-corner`	Empty corner cell above time column (resource view)
`.scheduler-resource-header`	Individual resource header with avatar, name, info
`.scheduler-resource-avatar`	Circular avatar (32px) with initials or image
`.scheduler-resource-name`	Resource name text
`.scheduler-resource-info`	Secondary info text below name
Grid & Time
`.scheduler-body`	Scrollable grid container
`.scheduler-grid`	Flex container for time column + day columns
`.scheduler-times`	Sticky left time column
`.scheduler-time`	Individual hour label (e.g., "9:00")
`.scheduler-columns`	Flex container for day/resource columns
`.scheduler-day-column`	Individual day or resource column
`.scheduler-day-column-weekend`	Weekend column (muted background)
Hour Slots
`.scheduler-hour-slot`	Clickable hour cell with half-hour dashed line
`.scheduler-hour-slot-business`	Business hours slot (light background)
`.scheduler-hour-slot-non-business`	Non-business hours slot (muted background)
`.scheduler-interval-15`	Add to .scheduler-grid for 15-minute dotted interval lines
Bookings
`.scheduler-booking`	Absolutely positioned booking block with left border accent
`.scheduler-booking-title`	Booking title text (truncated)
`.scheduler-booking-time`	Booking time range text
`.scheduler-booking-resource`	Resource name text inside booking
`.scheduler-booking-confirmed`	Green (success) booking status
`.scheduler-booking-pending`	Yellow (warning) booking status
`.scheduler-booking-cancelled`	Muted with line-through text
`.scheduler-booking-blocked`	Grey blocked slot (cursor: not-allowed)
`.scheduler-booking-primary`	Primary color booking
`.scheduler-booking-error`	Red (error) booking
`.scheduler-booking-conflict`	Red ring + "!" badge for overlapping bookings
Drag to Create
`.scheduler-drag-preview`	Dashed preview block shown while dragging to create
Current Time
`.scheduler-now-line`	Red horizontal line with dot indicating current time
Month View
`.scheduler-month-grid`	7-column CSS grid for month layout
`.scheduler-month-header`	Weekday header cell in month grid
`.scheduler-month-day`	Individual day cell in month grid (min-height: 100px)
`.scheduler-month-day-other`	Day from adjacent month (dimmed)
`.scheduler-month-day-today`	Today highlight with primary circle on number
`.scheduler-month-day-weekend`	Weekend day cell (muted background)
`.scheduler-month-day-number`	Day number in month cell
`.scheduler-month-booking`	Compact booking pill in month cell
`.scheduler-month-booking-confirmed`	Green confirmed booking pill
`.scheduler-month-booking-pending`	Yellow pending booking pill
`.scheduler-month-more`	"+N more" overflow link in month cell
Empty State
`.scheduler-empty`	Centered empty state container
`.scheduler-empty-icon`	Icon in empty state (48x48)