Calendar Views

Week and day calendar views with time grid, hour slots, timed events, all-day events, current time indicator, and view toggle.

Week View

Preview

Feb 2 - 8, 2026

Mon 2

Tue 3

Wed 4

Thu 5

Fri 6

Sat 7

Sun 8

8 AM

9 AM

10 AM

11 AM

12 PM

Team Standup

8:00 - 9:30 AM

Design Review

10:00 - 11:00 AM

Sprint Planning

9:00 - 11:00 AM

<div class="calendar-view">
  <div class="calendar-view-header">
    <div class="calendar-view-nav">
      <button class="calendar-view-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>
      <span class="calendar-view-title">Feb 2 - 8, 2026</span>
      <button class="calendar-view-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>
    </div>
    <button class="calendar-view-today-btn">Today</button>
    <div class="calendar-view-toggle">
      <button class="calendar-view-btn">Day</button>
      <button class="calendar-view-btn calendar-view-btn-active">Week</button>
      <button class="calendar-view-btn">Month</button>
    </div>
  </div>
  <div class="calendar-view-day-headers">
    <div class="calendar-view-corner"></div>
    <div class="calendar-view-day-header">
      <span class="calendar-view-day-name">Mon</span>
      <span class="calendar-view-day-number">2</span>
    </div>
    <div class="calendar-view-day-header">
      <span class="calendar-view-day-name">Tue</span>
      <span class="calendar-view-day-number">3</span>
    </div>
    <div class="calendar-view-day-header">
      <span class="calendar-view-day-name">Wed</span>
      <span class="calendar-view-day-number">4</span>
    </div>
    <div class="calendar-view-day-header">
      <span class="calendar-view-day-name">Thu</span>
      <span class="calendar-view-day-number">5</span>
    </div>
    <div class="calendar-view-day-header">
      <span class="calendar-view-day-name">Fri</span>
      <span class="calendar-view-day-number">6</span>
    </div>
    <div class="calendar-view-day-header calendar-view-day-header-today">
      <span class="calendar-view-day-name">Sat</span>
      <span class="calendar-view-day-number">7</span>
    </div>
    <div class="calendar-view-day-header">
      <span class="calendar-view-day-name">Sun</span>
      <span class="calendar-view-day-number">8</span>
    </div>
  </div>
  <div class="calendar-view-grid" style="max-height: 300px;">
    <div class="calendar-view-times">
      <div class="calendar-view-time">8 AM</div>
      <div class="calendar-view-time">9 AM</div>
      <div class="calendar-view-time">10 AM</div>
      <div class="calendar-view-time">11 AM</div>
      <div class="calendar-view-time">12 PM</div>
    </div>
    <div class="calendar-view-day-column">
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-event calendar-view-event-primary" style="top: 0; height: 90px;">
        <div class="calendar-view-event-title">Team Standup</div>
        <div class="calendar-view-event-time">8:00 - 9:30 AM</div>
      </div>
    </div>
    <div class="calendar-view-day-column">
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
    </div>
    <div class="calendar-view-day-column">
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-event calendar-view-event-success" style="top: 120px; height: 60px;">
        <div class="calendar-view-event-title">Design Review</div>
        <div class="calendar-view-event-time">10:00 - 11:00 AM</div>
      </div>
    </div>
    <div class="calendar-view-day-column">
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-event calendar-view-event-warning" style="top: 60px; height: 120px;">
        <div class="calendar-view-event-title">Sprint Planning</div>
        <div class="calendar-view-event-time">9:00 - 11:00 AM</div>
      </div>
    </div>
    <div class="calendar-view-day-column">
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
    </div>
    <div class="calendar-view-day-column">
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-now-line" style="top: 42px;"></div>
    </div>
    <div class="calendar-view-day-column">
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
      <div class="calendar-view-hour-slot"></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="overflow-hidden bg-base-100 border border-base-300 rounded-box">
  <!-- Header -->
  <div class="flex items-center justify-between flex-wrap gap-3 p-4 border-b border-base-300">
    <div class="flex items-center gap-2">
      <button class="flex items-center justify-center w-9 h-9 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
        <svg class="w-4.5 h-4.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <span class="text-lg font-semibold">Feb 2 - 8, 2026</span>
      <button class="flex items-center justify-center w-9 h-9 bg-base-200 rounded-field border-none cursor-pointer hover:bg-base-300">
        <svg class="w-4.5 h-4.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
      </button>
    </div>
    <button class="text-sm font-medium text-primary bg-transparent border border-primary rounded-field px-4 py-2 cursor-pointer hover:bg-primary/10">Today</button>
    <div class="flex bg-base-200 rounded-field p-1">
      <button class="text-sm font-medium px-4 py-2 rounded bg-transparent text-base-content/60 border-none cursor-pointer hover:text-base-content">Day</button>
      <button class="text-sm font-medium px-4 py-2 rounded bg-base-100 text-base-content shadow-sm border-none cursor-pointer">Week</button>
      <button class="text-sm font-medium px-4 py-2 rounded bg-transparent text-base-content/60 border-none cursor-pointer hover:text-base-content">Month</button>
    </div>
  </div>
  <!-- Day Headers -->
  <div class="grid sticky top-0 z-10 bg-base-100 border-b border-base-300" style="grid-template-columns: 60px repeat(7, 1fr);">
    <div class="border-r border-base-300"></div>
    <div class="flex flex-col items-center justify-center py-3 border-r border-base-300">
      <span class="text-xs font-medium uppercase text-base-content/60 mb-1">Mon</span>
      <span class="flex items-center justify-center w-9 h-9 font-semibold rounded-full">2</span>
    </div>
    <div class="flex flex-col items-center justify-center py-3 border-r border-base-300">
      <span class="text-xs font-medium uppercase text-base-content/60 mb-1">Sat</span>
      <span class="flex items-center justify-center w-9 h-9 font-semibold rounded-full bg-primary text-white">7</span>
    </div>
  </div>
  <!-- Time grid (simplified) -->
  <div class="grid relative overflow-y-auto" style="grid-template-columns: 60px repeat(7, 1fr); max-height: 200px;">
    <div class="border-r border-base-300">
      <div class="flex items-start justify-end text-xs text-base-content/40 pr-2" style="height: 60px; transform: translateY(-0.5em);">9 AM</div>
      <div class="flex items-start justify-end text-xs text-base-content/40 pr-2" style="height: 60px; transform: translateY(-0.5em);">10 AM</div>
    </div>
    <div class="relative border-r border-base-300">
      <div style="height: 60px;" class="border-b border-base-300"></div>
      <div style="height: 60px;" class="border-b border-base-300"></div>
      <div class="absolute left-0.5 right-0.5 rounded text-xs overflow-hidden cursor-pointer z-2 text-white" style="top: 0; height: 90px; background: var(--color-primary); border-left: 3px solid color-mix(in oklch, var(--color-primary) 80%, black);">
        <div class="px-2 pt-1 font-semibold truncate">Team Standup</div>
        <div class="px-2 text-white/80" style="font-size: 11px;">8:00 - 9:30 AM</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Position current time indicator
function updateNowLine() &#123;
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const hourHeight = 60; // --cv-hour-height
  const top = (hours * hourHeight) + (minutes / 60 * hourHeight);
  document.querySelectorAll('.calendar-view-now-line').forEach(line => &#123;
    line.style.top = top + 'px';
  &#125;);
&#125;
updateNowLine();
setInterval(updateNowLine, 60000);

Event Color Variants

Preview

Primary Event

9:00 - 10:00 AM

Success Event

10:00 - 11:00 AM

Warning Event

11:00 - 12:00 PM

Error/Urgent Event

1:00 - 2:00 PM

Secondary Event

2:00 - 3:00 PM

<div style="display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem;">
  <div class="calendar-view-event calendar-view-event-primary" style="position: relative; height: auto;">
    <div class="calendar-view-event-title">Primary Event</div>
    <div class="calendar-view-event-time">9:00 - 10:00 AM</div>
  </div>
  <div class="calendar-view-event calendar-view-event-success" style="position: relative; height: auto;">
    <div class="calendar-view-event-title">Success Event</div>
    <div class="calendar-view-event-time">10:00 - 11:00 AM</div>
  </div>
  <div class="calendar-view-event calendar-view-event-warning" style="position: relative; height: auto;">
    <div class="calendar-view-event-title">Warning Event</div>
    <div class="calendar-view-event-time">11:00 - 12:00 PM</div>
  </div>
  <div class="calendar-view-event calendar-view-event-error" style="position: relative; height: auto;">
    <div class="calendar-view-event-title">Error/Urgent Event</div>
    <div class="calendar-view-event-time">1:00 - 2:00 PM</div>
  </div>
  <div class="calendar-view-event calendar-view-event-secondary" style="position: relative; height: auto;">
    <div class="calendar-view-event-title">Secondary Event</div>
    <div class="calendar-view-event-time">2:00 - 3:00 PM</div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2 p-4">
  <div class="relative px-2 py-1 rounded text-xs text-white cursor-pointer" style="background: var(--color-primary); border-left: 3px solid color-mix(in oklch, var(--color-primary) 80%, black);">
    <div class="font-semibold">Primary Event</div>
    <div class="opacity-80" style="font-size: 11px;">9:00 - 10:00 AM</div>
  </div>
  <div class="relative px-2 py-1 rounded text-xs text-white cursor-pointer" style="background: var(--color-success); border-left: 3px solid color-mix(in oklch, var(--color-success) 80%, black);">
    <div class="font-semibold">Success Event</div>
    <div class="opacity-80" style="font-size: 11px;">10:00 - 11:00 AM</div>
  </div>
  <div class="relative px-2 py-1 rounded text-xs cursor-pointer" style="background: var(--color-warning); color: var(--color-warning-content); border-left: 3px solid color-mix(in oklch, var(--color-warning) 80%, black);">
    <div class="font-semibold">Warning Event</div>
    <div class="opacity-80" style="font-size: 11px;">11:00 - 12:00 PM</div>
  </div>
  <div class="relative px-2 py-1 rounded text-xs text-white cursor-pointer" style="background: var(--color-error); border-left: 3px solid color-mix(in oklch, var(--color-error) 80%, black);">
    <div class="font-semibold">Error/Urgent Event</div>
    <div class="opacity-80" style="font-size: 11px;">1:00 - 2:00 PM</div>
  </div>
  <div class="relative px-2 py-1 rounded text-xs text-white cursor-pointer" style="background: color-mix(in oklch, var(--color-base-content) 50%, transparent); border-left: 3px solid color-mix(in oklch, var(--color-base-content) 60%, transparent);">
    <div class="font-semibold">Secondary Event</div>
    <div class="opacity-80" style="font-size: 11px;">2:00 - 3:00 PM</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - event colors are CSS-only classes

Classes Reference

Class	Description
`.calendar-view`	Root container
`.calendar-view-header`	Top bar with nav, title, toggle
`.calendar-view-nav-btn`	Previous/next buttons
`.calendar-view-title`	Date range title
`.calendar-view-today-btn`	Go to today button
`.calendar-view-toggle`	View mode toggle container
`.calendar-view-btn`	Individual view toggle button
`.calendar-view-btn-active`	Active view button
`.calendar-view-day-headers`	Sticky day header row
`.calendar-view-day-headers-single`	Single-day column layout
`.calendar-view-day-header`	Individual day column header
`.calendar-view-day-header-today`	Today highlight on day number
`.calendar-view-grid`	Scrollable time grid area
`.calendar-view-grid-single`	Single-day grid layout
`.calendar-view-times`	Time labels column
`.calendar-view-time`	Individual hour label
`.calendar-view-day-column`	Day column for events
`.calendar-view-hour-slot`	Hour slot with half-hour line
`.calendar-view-now-line`	Red current time indicator
`.calendar-view-event`	Timed event block
`.calendar-view-event-primary`	Primary colored event
`.calendar-view-event-success`	Success colored event
`.calendar-view-event-warning`	Warning colored event
`.calendar-view-event-error`	Error colored event
`.calendar-view-event-secondary`	Secondary colored event
`.calendar-view-all-day`	All-day events row
`.calendar-view-empty`	Empty state container