WeekCalendar

Vue de calendrier hebdomadaire avec créneaux horaires pour afficher et planifier des événements.

Importation

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

Exemples

Calendrier basique

Calendrier de semaine simple affichant les créneaux horaires.

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

Avec événements

Calendrier affichant les événements à leurs heures planifiées.

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

Sélection de créneaux

Cliquez sur des créneaux horaires vides pour les sélectionner.

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

Événements barrés

Afficher les événements annulés avec un style barré.

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

Heures personnalisées

Afficher uniquement les heures du matin (6h-12h) en utilisant startHour et 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

Autoriser l'interaction passée

Activer le clic sur les créneaux horaires passés.

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`

Propriété	Description	Type	Défaut
`date`	La date à afficher (détermine quelle semaine est affichée)	`Date`	`new Date()`
`events`	Tableau d’événements de calendrier à afficher	`CalendarEvent[]`	`[]`
`startHour`	Heure de début pour la grille horaire (0-23)	`number`	`9`
`endHour`	Heure de fin pour la grille horaire (0-23)	`number`	`17`
`allowPastInteraction`	Permettre de cliquer sur les créneaux horaires passés	`boolean`	`false`
`fitContainer`	Adapter les lignes à la hauteur du conteneur au lieu de défiler	`boolean`	`false`
`locale`	Configuration de locale pour les noms de jours et le format d’heure	`CalendarLocale`	`-`
`onDayClick`	Gestionnaire lorsqu’un en-tête de jour est cliqué	`(date: Date) => void`	`-`
`onEventClick`	Gestionnaire lorsqu’un événement est cliqué	`(event: CalendarEvent) => void`	`-`
`onSelectSlot`	Gestionnaire lorsqu’un créneau horaire est cliqué	`(slotInfo: { start: Date; end: Date }) => void`	`-`
`data-testid`	ID de test pour les tests	`string`	-

`CalendarEvent`

Propriété	Description	Type	Défaut
`date`	Date et heure de l’événement (l’heure détermine quelle ligne)	`Date`	`-`
`title`	Titre de l’événement	`string`	`-`
`color`	Couleur du point de l’événement	`string`	`-`
`strikethrough`	Afficher l’événement avec un texte barré (annulé)	`boolean`	`-`
`style`	Styles en ligne personnalisés pour l’événement	`CSSProperties`	`-`
`data-testid`	ID de test pour les tests	`string`	-