WeekCalendar

Vista de calendario semanal con franjas horarias para mostrar y programar eventos.

Importación

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

Ejemplos

Calendario Básico

Calendario semanal simple mostrando franjas horarias.

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

Con Eventos

Calendario mostrando eventos en sus horarios programados.

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

Selección de Franja

Haz clic en franjas horarias vacías para seleccionarlas.

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 Tachados

Muestra eventos cancelados con estilo tachado.

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

Muestra solo horas de la mañana (6am-12pm) usando startHour y 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 Interacción Pasada

Habilita hacer clic en franjas horarias pasadas.

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`

Propiedad	Descripción	Tipo	Predeterminado
`date`	La fecha a mostrar (determina qué semana se muestra)	`Date`	`new Date()`
`events`	Array de eventos del calendario a mostrar	`CalendarEvent[]`	`[]`
`startHour`	Hora de inicio para la cuadrícula de tiempo (0-23)	`number`	`9`
`endHour`	Hora de fin para la cuadrícula de tiempo (0-23)	`number`	`17`
`allowPastInteraction`	Permitir hacer clic en franjas horarias pasadas	`boolean`	`false`
`fitContainer`	Ajustar filas a la altura del contenedor en lugar de desplazar	`boolean`	`false`
`locale`	Configuración de localización para nombres de días y formato de hora	`CalendarLocale`	`-`
`onDayClick`	Manejador cuando se hace clic en un encabezado de día	`(date: Date) => void`	`-`
`onEventClick`	Manejador cuando se hace clic en un evento	`(event: CalendarEvent) => void`	`-`
`onSelectSlot`	Manejador cuando se hace clic en una franja horaria	`(slotInfo: { start: Date; end: Date }) => void`	`-`
`data-testid`	ID de prueba para pruebas	`string`	-

`CalendarEvent`

Propiedad	Descripción	Tipo	Predeterminado
`date`	Fecha y hora del evento (la hora determina qué fila)	`Date`	`-`
`title`	Título del evento	`string`	`-`
`color`	Color del punto del evento	`string`	`-`
`strikethrough`	Mostrar evento con tachado (cancelado)	`boolean`	`-`
`style`	Estilos en línea personalizados para el evento	`CSSProperties`	`-`
`data-testid`	ID de prueba para pruebas	`string`	-