WeekCalendar

Visualização de calendário semanal com slots de hora para exibir e agendar eventos.

Importação

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

Exemplos

Calendário Básico

Calendário semanal simples mostrando slots de hora.

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

Com Eventos

Calendário exibindo eventos em seus horários agendados.

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

Seleção de Slot

Clique em slots de hora vazios para selecioná-los.

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

Eventos Riscados

Mostre eventos cancelados com estilo riscado.

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

Horas Personalizadas

Mostre apenas horas da manhã (6h-12h) usando startHour e 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

Permitir Interação Passada

Habilite clique em slots de hora passados.

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`

Propriedade	Descrição	Tipo	Padrão
`date`	A data a exibir (determina qual semana é mostrada)	`Date`	`new Date()`
`events`	Array de eventos do calendário a exibir	`CalendarEvent[]`	`[]`
`startHour`	Hora de início para a grade de tempo (0-23)	`number`	`9`
`endHour`	Hora de fim para a grade de tempo (0-23)	`number`	`17`
`allowPastInteraction`	Permitir clique em slots de hora passados	`boolean`	`false`
`fitContainer`	Ajustar linhas à altura do container em vez de rolar	`boolean`	`false`
`locale`	Configuração de localização para nomes de dias e formato de hora	`CalendarLocale`	`-`
`onDayClick`	Manipulador quando um cabeçalho de dia é clicado	`(date: Date) => void`	`-`
`onEventClick`	Manipulador quando um evento é clicado	`(event: CalendarEvent) => void`	`-`
`onSelectSlot`	Manipulador quando um slot de hora é clicado	`(slotInfo: { start: Date; end: Date }) => void`	`-`
`data-testid`	ID de teste para testes	`string`	-

`CalendarEvent`

Propriedade	Descrição	Tipo	Padrão
`date`	Data e hora do evento (hora determina qual linha)	`Date`	`-`
`title`	Título do evento	`string`	`-`
`color`	Cor do ponto do evento	`string`	`-`
`strikethrough`	Mostrar evento com riscado (cancelado)	`boolean`	`-`
`style`	Estilos inline personalizados para o evento	`CSSProperties`	`-`
`data-testid`	ID de teste para testes	`string`	-