WeekCalendar

A weekly calendar view with hourly time slots for displaying and scheduling events.

Import

import { WeekCalendar, type CalendarEvent, type CalendarLocale } from 'asterui'

Examples

Basic Calendar

Simple week calendar showing hourly time slots.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

9am

10am

11am

12pm

1pm

2pm

3pm

4pm

5pm

import { WeekCalendar, Card } from 'asterui'

function App() {
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar date={new Date()} />
      </Card>
    )
}

export default App

With Events

Calendar displaying events at their scheduled times.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

9am

Standup

10am

Sprint Planning

11am

12pm

Lunch Meeting

1pm

2pm

Design Review

3pm

Demo

4pm

Team Sync

5pm

import { WeekCalendar, Card, message, type CalendarEvent } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  // Create events for this week
  const weekStart = new Date(date)
  weekStart.setDate(date.getDate() - date.getDay())
  
  const events: CalendarEvent[] = [
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 1, 9, 0), title: 'Standup', color: '#3b82f6' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 1, 14, 0), title: 'Design Review', color: '#8b5cf6' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 2, 10, 0), title: 'Sprint Planning', color: '#10b981' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 3, 12, 0), title: 'Lunch Meeting', color: '#f59e0b' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 4, 15, 0), title: 'Demo', color: '#ef4444' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 5, 16, 0), title: 'Team Sync', color: '#06b6d4' },
  ]
  
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          events={events}
          onEventClick={(event) => message.info(`Clicked: ${event.title}`)}
        />
      </Card>
    )
}

export default App

Slot Selection

Click on empty time slots to select them.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

9am

10am

11am

12pm

1pm

2pm

3pm

4pm

5pm

import { WeekCalendar, Card, message } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          onSelectSlot={(slot) => message.info(`Selected: ${slot.start.toLocaleString()} - ${slot.end.toLocaleTimeString()}`)}
        />
      </Card>
    )
}

export default App

Strikethrough Events

Show cancelled events with strikethrough styling.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

9am

10am

Cancelled Meeting

11am

12pm

Postponed

1pm

2pm

Active Event

3pm

4pm

5pm

import { WeekCalendar, Card, type CalendarEvent } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  const weekStart = new Date(date)
  weekStart.setDate(date.getDate() - date.getDay())
  
  const events: CalendarEvent[] = [
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 2, 10, 0), title: 'Cancelled Meeting', color: '#ef4444', strikethrough: true },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 2, 14, 0), title: 'Active Event', color: '#10b981' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 4, 12, 0), title: 'Postponed', color: '#f59e0b', strikethrough: true },
  ]
  
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          events={events}
        />
      </Card>
    )
}

export default App

Custom Hours

Show only morning hours (6am-12pm) using startHour and endHour.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

6am

Morning Run

7am

Early Sync

8am

Team Breakfast

9am

Standup

10am

Code Review

11am

12pm

import { WeekCalendar, Card, type CalendarEvent } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  const weekStart = new Date(date)
  weekStart.setDate(date.getDate() - date.getDay())
  
  const events: CalendarEvent[] = [
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 1, 6, 0), title: 'Morning Run', color: '#10b981' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 2, 7, 0), title: 'Early Sync', color: '#8b5cf6' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 3, 8, 0), title: 'Team Breakfast', color: '#f59e0b' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 4, 9, 0), title: 'Standup', color: '#3b82f6' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 5, 10, 0), title: 'Code Review', color: '#ef4444' },
  ]
  
  return (
      <Card className="h-[400px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          events={events}
          startHour={6}
          endHour={12}
        />
      </Card>
    )
}

export default App

Allow Past Interaction

Enable clicking on past time slots.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

9am

10am

11am

12pm

1pm

2pm

3pm

4pm

5pm

import { WeekCalendar, Card, message } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          allowPastInteraction
          onDayClick={(date) => message.info(`Day clicked: ${date.toLocaleDateString()}`)}
          onSelectSlot={(slot) => message.info(`Slot: ${slot.start.toLocaleTimeString()}`)}
        />
      </Card>
    )
}

export default App

API

`WeekCalendar`

Property	Description	Type	Default
`date`	The date to display (determines which week is shown)	`Date`	`new Date()`
`events`	Array of calendar events to display	`CalendarEvent[]`	`[]`
`startHour`	Start hour for the time grid (0-23)	`number`	`9`
`endHour`	End hour for the time grid (0-23)	`number`	`17`
`allowPastInteraction`	Allow clicking on past time slots	`boolean`	`false`
`fitContainer`	Fit rows to container height instead of scrolling	`boolean`	`false`
`locale`	Locale configuration for day names and time format	`CalendarLocale`	`-`
`onDayClick`	Handler when a day header is clicked	`(date: Date) => void`	`-`
`onEventClick`	Handler when an event is clicked	`(event: CalendarEvent) => void`	`-`
`onSelectSlot`	Handler when a time slot is clicked	`(slotInfo: { start: Date; end: Date }) => void`	`-`
`data-testid`	Test ID for testing	`string`	-

`CalendarEvent`

Property	Description	Type	Default
`date`	Event date and time (hour determines which row)	`Date`	`-`
`title`	Event title	`string`	`-`
`color`	Event dot color	`string`	`-`
`strikethrough`	Show event with strikethrough (cancelled)	`boolean`	`-`
`style`	Custom inline styles for the event	`CSSProperties`	`-`
`data-testid`	Test ID for testing	`string`	-

Testing

The WeekCalendar component supports the data-testid prop for e2e testing:

<WeekCalendar data-testid="schedule" events={events} />

Element	Test ID
Container	`schedule`
Header	`schedule-header`
Grid	`schedule-grid`