MonthCalendar

Une vue calendrier mensuel complète pour afficher des événements et sélectionner des dates.

Import

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

Exemples

Calendrier de base

Calendrier mensuel simple enveloppé dans une Card.

</>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

import { MonthCalendar, Card } from 'asterui'

function App() {
  return (
      <Card className="h-[600px]">
        <MonthCalendar date={new Date()} />
      </Card>
    )
}

export default App

Avec événements

Calendrier affichant des événements avec des points colorés.

</>

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

30

1

2

3

4

5

Team Meeting

Code Review

6

7

8

9

10

11

12

Sprint Planning

Design Review

13

14

15

16

17

18

Demo Day

19

20

21

22

23

24

25

Retro

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

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

function App() {
  const [date] = useState(new Date())
  
  const events: CalendarEvent[] = [
    { date: new Date(date.getFullYear(), date.getMonth(), 5), title: 'Team Meeting', color: '#3b82f6' },
    { date: new Date(date.getFullYear(), date.getMonth(), 5), title: 'Code Review', color: '#10b981' },
    { date: new Date(date.getFullYear(), date.getMonth(), 12), title: 'Sprint Planning', color: '#8b5cf6' },
    { date: new Date(date.getFullYear(), date.getMonth(), 12), title: 'Design Review', color: '#f59e0b' },
    { date: new Date(date.getFullYear(), date.getMonth(), 18), title: 'Demo Day', color: '#ef4444' },
    { date: new Date(date.getFullYear(), date.getMonth(), 25), title: 'Retro', color: '#06b6d4' },
  ]
  
  return (
      <Card className="h-[600px]">
        <MonthCalendar
          date={date}
          events={events}
          header
          onEventClick={(event) => message.info(`Clicked: ${event.title}`)}
        />
      </Card>
    )
}

export default App

Sélection de jour

Activer la sélection de jour avec retour visuel.

</>

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

import { MonthCalendar, Card } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
  
  return (
      <Card className="h-[600px]">
        <MonthCalendar
          date={date}
          header
          daySelector
          onDayClick={(date) => setSelectedDate(date)}
        />
        {selectedDate && (
          <p className="mt-2 text-sm">Selected: {selectedDate.toLocaleDateString()}</p>
        )}
      </Card>
    )
}

export default App

Maximum d'événements par jour

Limiter les événements visibles avec débordement '+N de plus'.

</>

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

30

1

2

3

4

5

6

7

8

9

10

Event 1

Event 2

+4 more

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

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

function App() {
  const [date] = useState(new Date())
  
  const events: CalendarEvent[] = [
    { date: new Date(date.getFullYear(), date.getMonth(), 10), title: 'Event 1', color: '#3b82f6' },
    { date: new Date(date.getFullYear(), date.getMonth(), 10), title: 'Event 2', color: '#10b981' },
    { date: new Date(date.getFullYear(), date.getMonth(), 10), title: 'Event 3', color: '#8b5cf6' },
    { date: new Date(date.getFullYear(), date.getMonth(), 10), title: 'Event 4', color: '#f59e0b' },
    { date: new Date(date.getFullYear(), date.getMonth(), 10), title: 'Event 5', color: '#ef4444' },
    { date: new Date(date.getFullYear(), date.getMonth(), 10), title: 'Event 6', color: '#06b6d4' },
  ]
  
  return (
      <Card className="h-[600px]">
        <MonthCalendar
          date={date}
          events={events}
          header
          maxEventsPerDay={3}
          onMoreEventsClick={(date, events) =>
            message.info(`${events.length} events on ${date.toLocaleDateString()}`)
          }
        />
      </Card>
    )
}

export default App

Événements barrés

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

</>

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

30

1

2

3

4

5

6

7

8

Cancelled Meeting

Active Event

9

10

11

12

13

14

15

Postponed

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

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

function App() {
  const [date] = useState(new Date())
  
  const events: CalendarEvent[] = [
    { date: new Date(date.getFullYear(), date.getMonth(), 8), title: 'Cancelled Meeting', color: '#ef4444', strikethrough: true },
    { date: new Date(date.getFullYear(), date.getMonth(), 8), title: 'Active Event', color: '#10b981' },
    { date: new Date(date.getFullYear(), date.getMonth(), 15), title: 'Postponed', color: '#f59e0b', strikethrough: true },
  ]
  
  return (
      <Card className="h-[600px]">
        <MonthCalendar
          date={date}
          events={events}
          header
        />
      </Card>
    )
}

export default App

Autoriser l'interaction passée

Activer le clic sur les dates passées.

</>

PreviousNext

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

import { MonthCalendar, Card, Button, Space, message } from 'asterui'
import { useState } from 'react'

function App() {
  const [date, setDate] = useState(new Date())
  
  const prevMonth = () => {
    setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1))
  }
  
  const nextMonth = () => {
    setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1))
  }
  
  return (
      <Card className="h-[600px]">
        <Space className="mb-4">
          <Button onClick={prevMonth}>Previous</Button>
          <Button onClick={nextMonth}>Next</Button>
        </Space>
        <MonthCalendar
          date={date}
          header
          daySelector
          allowPastInteraction
          onDayClick={(date) => message.info(`Clicked: ${date.toLocaleDateString()}`)}
        />
      </Card>
    )
}

export default App

API

MonthCalendar

Propriété	Description	Type	Défaut
date	La date à afficher (détermine le mois affiché)	Date	new Date()
events	Tableau des événements de calendrier à afficher	CalendarEvent[]	[]
header	Afficher l’en-tête mois/année	boolean	false
daySelector	Activer la sélection de jour avec retour visuel	boolean	false
ellipsis	Tronquer les titres d’événements longs avec des points de suspension	boolean	false
maxEventsPerDay	Maximum d’événements à afficher par jour avant “+N de plus”	number	5
allowPastInteraction	Autoriser le clic sur les dates passées	boolean	false
locale	Configuration locale pour les noms de jours/mois	CalendarLocale	-
onDayClick	Gestionnaire lorsqu’une cellule de jour est cliquée	(date: Date) => void	-
onEventClick	Gestionnaire lorsqu’un événement est cliqué	(event: CalendarEvent) => void	-
onMoreEventsClick	Gestionnaire lorsque “+N de plus” est cliqué	(date: Date, events: CalendarEvent[]) => 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	Date	-
title	Titre de l’événement	string	-
color	Couleur du point de l’événement	string	-
strikethrough	Afficher l’événement barré (annulé)	boolean	-
style	Styles en ligne personnalisés pour l’événement	CSSProperties	-
data-testid	ID de test pour les tests	string	-