Shift Calendar

Weekly shift scheduling grid with time slots, color-coded shift blocks, navigation, filtering, and a legend bar.

Weekly View with Shifts

Preview

Feb 3 - 9, 2026 ERPlora HQ

Mon 3

Tue 4

Wed 5

Thu 6

Fri 7

Sat 8

Sun 9

06:00

A. Martinez

06:00 - 14:00

Engineering

C. Ruiz

06:00 - 14:00

Design

L. Garcia

06:00 - 14:00

Sales

08:00

P. Lopez

08:00 - 20:00

M. Fernandez

08:00 - 16:00

Finance

10:00

14:00

J. Sanchez

14:00 - 22:00

Marketing

A. Martinez

14:00 - 22:00

Engineering

22:00

R. Torres

22:00 - 06:00

Operations

Morning

Afternoon

Night

<div class="shift-calendar">
  <div class="shift-calendar-header">
    <div class="shift-calendar-header-start">
      <div class="shift-calendar-nav">
        <button class="shift-calendar-nav-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </button>
        <button class="shift-calendar-nav-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </button>
      </div>
      <button class="shift-calendar-today-btn">Today</button>
    </div>
    <div class="shift-calendar-header-center">
      <span class="shift-calendar-title">Feb 3 - 9, 2026</span>
      <span class="shift-calendar-subtitle">ERPlora HQ</span>
    </div>
    <div class="shift-calendar-header-end">
      <div class="shift-calendar-filter">
        <button class="shift-calendar-filter-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
          Filter
          <span class="shift-calendar-filter-badge">2</span>
        </button>
      </div>
    </div>
  </div>
  <div class="shift-calendar-grid-wrapper">
    <div class="shift-calendar-grid">
      <!-- Day headers row -->
      <div class="shift-calendar-corner"></div>
      <div class="shift-calendar-day-header">
        <span class="shift-calendar-day-name">Mon</span>
        <span class="shift-calendar-day-number">3</span>
      </div>
      <div class="shift-calendar-day-header">
        <span class="shift-calendar-day-name">Tue</span>
        <span class="shift-calendar-day-number">4</span>
      </div>
      <div class="shift-calendar-day-header">
        <span class="shift-calendar-day-name">Wed</span>
        <span class="shift-calendar-day-number">5</span>
      </div>
      <div class="shift-calendar-day-header">
        <span class="shift-calendar-day-name">Thu</span>
        <span class="shift-calendar-day-number">6</span>
      </div>
      <div class="shift-calendar-day-header shift-calendar-day-header-today">
        <span class="shift-calendar-day-name">Fri</span>
        <span class="shift-calendar-day-number">7</span>
      </div>
      <div class="shift-calendar-day-header shift-calendar-day-header-weekend">
        <span class="shift-calendar-day-name">Sat</span>
        <span class="shift-calendar-day-number">8</span>
      </div>
      <div class="shift-calendar-day-header shift-calendar-day-header-weekend">
        <span class="shift-calendar-day-name">Sun</span>
        <span class="shift-calendar-day-number">9</span>
      </div>

      <!-- 06:00 row -->
      <div class="shift-calendar-time-slot">06:00</div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-morning" style="top: 0; height: 96px;">
          <div class="shift-calendar-shift-name">A. Martinez</div>
          <div class="shift-calendar-shift-time">06:00 - 14:00</div>
          <div class="shift-calendar-shift-department">Engineering</div>
        </div>
      </div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-morning" style="top: 0; height: 96px;">
          <div class="shift-calendar-shift-name">C. Ruiz</div>
          <div class="shift-calendar-shift-time">06:00 - 14:00</div>
          <div class="shift-calendar-shift-department">Design</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-morning" style="top: 0; height: 96px;">
          <div class="shift-calendar-shift-name">L. Garcia</div>
          <div class="shift-calendar-shift-time">06:00 - 14:00</div>
          <div class="shift-calendar-shift-department">Sales</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>

      <!-- 08:00 row -->
      <div class="shift-calendar-time-slot">08:00</div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-full-day" style="top: 0; height: 144px;">
          <div class="shift-calendar-shift-name">P. Lopez</div>
          <div class="shift-calendar-shift-time">08:00 - 20:00</div>
          <div class="shift-calendar-shift-department">HR</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-afternoon" style="top: 0; height: 96px;">
          <div class="shift-calendar-shift-name">M. Fernandez</div>
          <div class="shift-calendar-shift-time">08:00 - 16:00</div>
          <div class="shift-calendar-shift-department">Finance</div>
        </div>
      </div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>

      <!-- 10:00 row -->
      <div class="shift-calendar-time-slot">10:00</div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>

      <!-- 14:00 row -->
      <div class="shift-calendar-time-slot">14:00</div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-afternoon" style="top: 0; height: 96px;">
          <div class="shift-calendar-shift-name">J. Sanchez</div>
          <div class="shift-calendar-shift-time">14:00 - 22:00</div>
          <div class="shift-calendar-shift-department">Marketing</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-afternoon" style="top: 0; height: 96px;">
          <div class="shift-calendar-shift-name">A. Martinez</div>
          <div class="shift-calendar-shift-time">14:00 - 22:00</div>
          <div class="shift-calendar-shift-department">Engineering</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>

      <!-- 22:00 row -->
      <div class="shift-calendar-time-slot">22:00</div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-night" style="top: 0; height: 96px;">
          <div class="shift-calendar-shift-name">R. Torres</div>
          <div class="shift-calendar-shift-time">22:00 - 06:00</div>
          <div class="shift-calendar-shift-department">Operations</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
    </div>
  </div>
  <div class="shift-calendar-legend">
    <div class="shift-calendar-legend-item">
      <span class="shift-calendar-legend-color shift-calendar-legend-color-morning"></span>
      Morning
    </div>
    <div class="shift-calendar-legend-item">
      <span class="shift-calendar-legend-color shift-calendar-legend-color-afternoon"></span>
      Afternoon
    </div>
    <div class="shift-calendar-legend-item">
      <span class="shift-calendar-legend-color shift-calendar-legend-color-night"></span>
      Night
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full overflow-hidden bg-base-100 border border-base-300 rounded-box select-none">
  <!-- Header -->
  <div class="flex items-center justify-between gap-4 px-6 py-4 border-b border-base-300">
    <div class="flex items-center gap-2">
      <button class="w-9 h-9 flex items-center justify-center bg-base-200 rounded-field hover:bg-base-300">&lt;</button>
      <button class="w-9 h-9 flex items-center justify-center bg-base-200 rounded-field hover:bg-base-300">&gt;</button>
      <button class="px-4 py-1 border border-base-300 rounded-field text-sm font-medium hover:bg-base-200">Today</button>
    </div>
    <span class="font-semibold text-lg">Feb 3 - 9, 2026</span>
    <button class="flex items-center gap-1 px-4 py-1 bg-base-200 border border-base-300 rounded-field text-sm">Filter</button>
  </div>
  <!-- Grid uses CSS grid with 8 columns (time + 7 days) -->
  <div class="flex-1 overflow-auto">
    <div class="grid" style="grid-template-columns: 60px repeat(7, minmax(120px, 1fr));">
      <!-- Headers and cells follow the same pattern as semantic version -->
      <div class="sticky top-0 left-0 z-3 bg-base-100 border-b border-r border-base-300"></div>
      <div class="sticky top-0 z-2 flex flex-col items-center justify-center p-2 bg-base-100 border-b border-r border-base-300 min-h-14">
        <span class="font-semibold uppercase text-xs text-base-content/40">Mon</span>
        <span class="font-semibold text-xl">3</span>
      </div>
      <!-- ... repeat for each day ... -->
    </div>
  </div>
  <!-- Legend -->
  <div class="flex items-center gap-4 px-6 py-2 bg-base-200 border-t border-base-300 text-xs text-base-content/60">
    <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background: linear-gradient(135deg, #fbbf24, #f59e0b);"></span> Morning</span>
    <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background: linear-gradient(135deg, #60a5fa, #3b82f6);"></span> Afternoon</span>
    <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"></span> Night</span>
  </div>
</div>

Requires: tw.min.css

// Navigate weeks
document.querySelectorAll('.shift-calendar-nav-btn').forEach((btn, i) => {
  btn.addEventListener('click', () => {
    // i === 0: previous week, i === 1: next week
    // Update title and reload shifts from API
  });
});

// Today button
document.querySelector('.shift-calendar-today-btn')?.addEventListener('click', () => {
  // Scroll to current week and highlight today column
});

// Shift click handler
document.querySelectorAll('.shift-calendar-shift').forEach(shift => {
  shift.addEventListener('click', () => {
    // Open shift detail popover or modal
  });
});

Compact Variant

Preview

Feb 3 - 9, 2026

Mon 3

Tue 4

Wed 5

Thu 6

Fri 7

Sat 8

Sun 9

06:00

A. Martinez

06:00 - 14:00

C. Ruiz

06:00 - 14:00

14:00

J. Sanchez

14:00 - 22:00

L. Garcia

14:00 - 22:00

22:00

R. Torres

22:00 - 06:00

<div class="shift-calendar shift-calendar-compact">
  <div class="shift-calendar-header">
    <div class="shift-calendar-header-start">
      <div class="shift-calendar-nav">
        <button class="shift-calendar-nav-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </button>
        <button class="shift-calendar-nav-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </button>
      </div>
    </div>
    <div class="shift-calendar-header-center">
      <span class="shift-calendar-title">Feb 3 - 9, 2026</span>
    </div>
    <div class="shift-calendar-header-end">
      <button class="shift-calendar-today-btn">Today</button>
    </div>
  </div>
  <div class="shift-calendar-grid-wrapper">
    <div class="shift-calendar-grid">
      <div class="shift-calendar-corner"></div>
      <div class="shift-calendar-day-header">
        <span class="shift-calendar-day-name">Mon</span>
        <span class="shift-calendar-day-number">3</span>
      </div>
      <div class="shift-calendar-day-header">
        <span class="shift-calendar-day-name">Tue</span>
        <span class="shift-calendar-day-number">4</span>
      </div>
      <div class="shift-calendar-day-header">
        <span class="shift-calendar-day-name">Wed</span>
        <span class="shift-calendar-day-number">5</span>
      </div>
      <div class="shift-calendar-day-header">
        <span class="shift-calendar-day-name">Thu</span>
        <span class="shift-calendar-day-number">6</span>
      </div>
      <div class="shift-calendar-day-header shift-calendar-day-header-today">
        <span class="shift-calendar-day-name">Fri</span>
        <span class="shift-calendar-day-number">7</span>
      </div>
      <div class="shift-calendar-day-header shift-calendar-day-header-weekend">
        <span class="shift-calendar-day-name">Sat</span>
        <span class="shift-calendar-day-number">8</span>
      </div>
      <div class="shift-calendar-day-header shift-calendar-day-header-weekend">
        <span class="shift-calendar-day-name">Sun</span>
        <span class="shift-calendar-day-number">9</span>
      </div>

      <!-- 06:00 row -->
      <div class="shift-calendar-time-slot">06:00</div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-morning" style="top: 0; height: 72px;">
          <div class="shift-calendar-shift-name">A. Martinez</div>
          <div class="shift-calendar-shift-time">06:00 - 14:00</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-morning" style="top: 0; height: 72px;">
          <div class="shift-calendar-shift-name">C. Ruiz</div>
          <div class="shift-calendar-shift-time">06:00 - 14:00</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>

      <!-- 14:00 row -->
      <div class="shift-calendar-time-slot">14:00</div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-afternoon" style="top: 0; height: 72px;">
          <div class="shift-calendar-shift-name">J. Sanchez</div>
          <div class="shift-calendar-shift-time">14:00 - 22:00</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-afternoon" style="top: 0; height: 72px;">
          <div class="shift-calendar-shift-name">L. Garcia</div>
          <div class="shift-calendar-shift-time">14:00 - 22:00</div>
        </div>
      </div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>

      <!-- 22:00 row -->
      <div class="shift-calendar-time-slot">22:00</div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell"></div>
      <div class="shift-calendar-cell" style="position: relative;">
        <div class="shift-calendar-shift shift-calendar-shift-night" style="top: 0; height: 72px;">
          <div class="shift-calendar-shift-name">R. Torres</div>
          <div class="shift-calendar-shift-time">22:00 - 06:00</div>
        </div>
      </div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="border border-base-300 rounded-box overflow-hidden bg-base-100 text-sm">
  <div class="flex items-center justify-between px-4 py-3 border-b border-base-300 bg-base-200">
    <div class="flex items-center gap-2">
      <button class="btn btn-sm btn-square">‹</button>
      <button class="btn btn-sm btn-square">›</button>
      <button class="btn btn-sm">Today</button>
    </div>
    <span class="font-semibold">Feb 3 - 9, 2026</span>
    <div></div>
  </div>
  <div class="grid grid-cols-[60px_repeat(7,1fr)] text-xs text-center">
    <div class="p-2 border-b border-base-300"></div>
    <div class="p-2 border-b border-base-300 font-medium">Mon 3</div>
    <div class="p-2 border-b border-base-300 font-medium">Tue 4</div>
    <div class="p-2 border-b border-base-300 font-medium">Wed 5</div>
    <div class="p-2 border-b border-base-300 font-medium">Thu 6</div>
    <div class="p-2 border-b border-base-300 font-medium text-primary">Fri 7</div>
    <div class="p-2 border-b border-base-300 font-medium text-base-content/40">Sat 8</div>
    <div class="p-2 border-b border-base-300 font-medium text-base-content/40">Sun 9</div>
    <div class="p-2 text-base-content/50 border-r border-base-200">06:00</div>
    <div class="p-1 border-r border-base-200 min-h-12">
      <div class="rounded px-1.5 py-1 text-xs bg-info/15 text-info border-l-2 border-info">A. M. 06-14</div>
    </div>
    <div class="p-1 border-r border-base-200 min-h-12"></div>
    <div class="p-1 border-r border-base-200 min-h-12"></div>
    <div class="p-1 border-r border-base-200 min-h-12"></div>
    <div class="p-1 border-r border-base-200 min-h-12"></div>
    <div class="p-1 border-r border-base-200 min-h-12 bg-base-200/50"></div>
    <div class="p-1 min-h-12 bg-base-200/50"></div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — compact is a CSS-only variant that reduces row-height and hides department text

Glass Variant

Preview

Feb 3 - 9, 2026

Mon 3

Tue 4

Wed 5

Thu 6

Fri 7

Sat 8

Sun 9

06:00

A. Martinez

06:00 - 14:00

C. Ruiz

08:00 - 16:00

14:00

R. Torres

14:00 - 22:00

Morning

Afternoon

Night

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 0.75rem;">
  <div class="shift-calendar glass">
    <div class="shift-calendar-header">
      <div class="shift-calendar-header-start">
        <div class="shift-calendar-nav">
          <button class="shift-calendar-nav-btn">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <button class="shift-calendar-nav-btn">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
        <button class="shift-calendar-today-btn">Today</button>
      </div>
      <div class="shift-calendar-header-center">
        <span class="shift-calendar-title">Feb 3 - 9, 2026</span>
      </div>
      <div class="shift-calendar-header-end"></div>
    </div>
    <div class="shift-calendar-grid-wrapper">
      <div class="shift-calendar-grid">
        <div class="shift-calendar-corner"></div>
        <div class="shift-calendar-day-header">
          <span class="shift-calendar-day-name">Mon</span>
          <span class="shift-calendar-day-number">3</span>
        </div>
        <div class="shift-calendar-day-header">
          <span class="shift-calendar-day-name">Tue</span>
          <span class="shift-calendar-day-number">4</span>
        </div>
        <div class="shift-calendar-day-header">
          <span class="shift-calendar-day-name">Wed</span>
          <span class="shift-calendar-day-number">5</span>
        </div>
        <div class="shift-calendar-day-header">
          <span class="shift-calendar-day-name">Thu</span>
          <span class="shift-calendar-day-number">6</span>
        </div>
        <div class="shift-calendar-day-header shift-calendar-day-header-today">
          <span class="shift-calendar-day-name">Fri</span>
          <span class="shift-calendar-day-number">7</span>
        </div>
        <div class="shift-calendar-day-header shift-calendar-day-header-weekend">
          <span class="shift-calendar-day-name">Sat</span>
          <span class="shift-calendar-day-number">8</span>
        </div>
        <div class="shift-calendar-day-header shift-calendar-day-header-weekend">
          <span class="shift-calendar-day-name">Sun</span>
          <span class="shift-calendar-day-number">9</span>
        </div>

        <div class="shift-calendar-time-slot">06:00</div>
        <div class="shift-calendar-cell" style="position: relative;">
          <div class="shift-calendar-shift shift-calendar-shift-morning" style="top: 0; height: 96px;">
            <div class="shift-calendar-shift-name">A. Martinez</div>
            <div class="shift-calendar-shift-time">06:00 - 14:00</div>
          </div>
        </div>
        <div class="shift-calendar-cell"></div>
        <div class="shift-calendar-cell"></div>
        <div class="shift-calendar-cell" style="position: relative;">
          <div class="shift-calendar-shift shift-calendar-shift-afternoon" style="top: 0; height: 96px;">
            <div class="shift-calendar-shift-name">C. Ruiz</div>
            <div class="shift-calendar-shift-time">08:00 - 16:00</div>
          </div>
        </div>
        <div class="shift-calendar-cell"></div>
        <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
        <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>

        <div class="shift-calendar-time-slot">14:00</div>
        <div class="shift-calendar-cell"></div>
        <div class="shift-calendar-cell" style="position: relative;">
          <div class="shift-calendar-shift shift-calendar-shift-night" style="top: 0; height: 96px;">
            <div class="shift-calendar-shift-name">R. Torres</div>
            <div class="shift-calendar-shift-time">14:00 - 22:00</div>
          </div>
        </div>
        <div class="shift-calendar-cell"></div>
        <div class="shift-calendar-cell"></div>
        <div class="shift-calendar-cell"></div>
        <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
        <div class="shift-calendar-cell shift-calendar-cell-weekend"></div>
      </div>
    </div>
    <div class="shift-calendar-legend">
      <div class="shift-calendar-legend-item">
        <span class="shift-calendar-legend-color shift-calendar-legend-color-morning"></span>
        Morning
      </div>
      <div class="shift-calendar-legend-item">
        <span class="shift-calendar-legend-color shift-calendar-legend-color-afternoon"></span>
        Afternoon
      </div>
      <div class="shift-calendar-legend-item">
        <span class="shift-calendar-legend-color shift-calendar-legend-color-night"></span>
        Night
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 0.75rem;">
  <div class="glass rounded-box overflow-hidden text-sm">
    <div class="flex items-center justify-between px-4 py-3 border-b" style="border-color: rgba(255,255,255,0.12);">
      <div class="flex items-center gap-2">
        <button class="btn btn-sm btn-square" style="color: white;">‹</button>
        <button class="btn btn-sm btn-square" style="color: white;">›</button>
        <button class="btn btn-sm" style="color: white;">Today</button>
      </div>
      <span class="font-semibold text-white">Feb 3 - 9, 2026</span>
      <div></div>
    </div>
    <div class="grid grid-cols-[60px_repeat(7,1fr)] text-xs text-center text-white/80">
      <div class="p-2 border-b" style="border-color: rgba(255,255,255,0.08);"></div>
      <div class="p-2 border-b font-medium" style="border-color: rgba(255,255,255,0.08);">Mon 3</div>
      <div class="p-2 border-b font-medium" style="border-color: rgba(255,255,255,0.08);">Tue 4</div>
      <div class="p-2 border-b font-medium" style="border-color: rgba(255,255,255,0.08);">Wed 5</div>
      <div class="p-2 border-b font-medium" style="border-color: rgba(255,255,255,0.08);">Thu 6</div>
      <div class="p-2 border-b font-medium text-white" style="border-color: rgba(255,255,255,0.08);">Fri 7</div>
      <div class="p-2 border-b font-medium text-white/40" style="border-color: rgba(255,255,255,0.08);">Sat 8</div>
      <div class="p-2 border-b font-medium text-white/40" style="border-color: rgba(255,255,255,0.08);">Sun 9</div>
      <div class="p-2 text-white/50">06:00</div>
      <div class="p-1 min-h-14">
        <div class="rounded px-1.5 py-1 text-xs text-white border-l-2 border-info" style="background: rgba(255,255,255,0.1);">A. M. 06-14</div>
      </div>
      <div class="p-1 min-h-14"></div>
      <div class="p-1 min-h-14"></div>
      <div class="p-1 min-h-14"></div>
      <div class="p-1 min-h-14"></div>
      <div class="p-1 min-h-14" style="background: rgba(255,255,255,0.04);"></div>
      <div class="p-1 min-h-14" style="background: rgba(255,255,255,0.04);"></div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — glass is a CSS-only variant

Classes Reference

Class	Description
`.shift-calendar`	Base container with border and overflow hidden
`.shift-calendar-compact`	Compact variant (smaller rows, hidden department)
`.shift-calendar.glass`	Glass morphism variant
`.shift-calendar-header`	Top header with nav, title, and filters
`.shift-calendar-header-start`	Left section of header
`.shift-calendar-header-center`	Center section of header
`.shift-calendar-header-end`	Right section of header
`.shift-calendar-title`	Week range title text
`.shift-calendar-subtitle`	Subtitle below title
`.shift-calendar-nav`	Navigation button group
`.shift-calendar-nav-btn`	Previous/next navigation button
`.shift-calendar-today-btn`	"Today" button
`.shift-calendar-filter`	Filter container
`.shift-calendar-filter-btn`	Filter dropdown trigger button
`.shift-calendar-filter-badge`	Active filter count badge
`.shift-calendar-grid-wrapper`	Scrollable wrapper for the grid
`.shift-calendar-grid`	CSS grid (time col + 7 day cols)
`.shift-calendar-corner`	Top-left empty corner cell
`.shift-calendar-day-header`	Day column header (name + number)
`.shift-calendar-day-header-today`	Today highlight on day header
`.shift-calendar-day-header-weekend`	Weekend shaded header
`.shift-calendar-day-name`	Day abbreviation (MON, TUE, etc.)
`.shift-calendar-day-number`	Day of month number
`.shift-calendar-time-slot`	Time label in left column
`.shift-calendar-cell`	Individual grid cell
`.shift-calendar-cell-weekend`	Weekend cell shading
`.shift-calendar-shift`	Positioned shift block
`.shift-calendar-shift-morning`	Morning shift (amber gradient)
`.shift-calendar-shift-afternoon`	Afternoon shift (blue gradient)
`.shift-calendar-shift-night`	Night shift (indigo gradient)
`.shift-calendar-shift-full-day`	Full day shift (green gradient)
`.shift-calendar-shift-overtime`	Overtime shift (orange gradient)
`.shift-calendar-shift-off`	Day off (gray gradient)
`.shift-calendar-shift-name`	Employee name inside shift
`.shift-calendar-shift-time`	Time range inside shift
`.shift-calendar-shift-department`	Department label inside shift
`.shift-calendar-legend`	Bottom legend bar
`.shift-calendar-legend-item`	Legend item (color + label)
`.shift-calendar-legend-color`	Legend color swatch