MonthCalendar

Una vista de calendario de mes completo para mostrar eventos y seleccionar fechas.

Importar

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

Ejemplos

Calendario Básico

Calendario de mes simple envuelto en una Card.

</>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28

29

30

31

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

import { MonthCalendar, Card } from 'asterui'

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

export default App

Con Eventos

Calendario mostrando eventos con puntos de colores.

</>

January 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28

29

30

31

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

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

Selección de Día

Habilita la selección de día con retroalimentación visual.

</>

January 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28

29

30

31

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

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

Máximo de Eventos por Día

Limita eventos visibles con desbordamiento '+N más'.

</>

January 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28

29

30

31

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

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

Eventos Tachados

Muestra eventos cancelados con estilo tachado.

</>

January 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28

29

30

31

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

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

Permitir Interacción Pasada

Habilita hacer clic en fechas pasadas.

</>

PreviousNext

January 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28

29

30

31

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

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

Propiedad	Descripción	Tipo	Predeterminado
date	La fecha a mostrar (determina qué mes se muestra)	Date	new Date()
events	Array de eventos de calendario a mostrar	CalendarEvent[]	[]
header	Mostrar encabezado de mes/año	boolean	false
daySelector	Habilitar selección de día con retroalimentación visual	boolean	false
ellipsis	Truncar títulos de eventos largos con puntos suspensivos	boolean	false
maxEventsPerDay	Máximo de eventos a mostrar por día antes de “+N más”	number	5
allowPastInteraction	Permitir hacer clic en fechas pasadas	boolean	false
locale	Configuración de idioma para nombres de día/mes	CalendarLocale	-
onDayClick	Manejador cuando se hace clic en una celda de día	(date: Date) => void	-
onEventClick	Manejador cuando se hace clic en un evento	(event: CalendarEvent) => void	-
onMoreEventsClick	Manejador cuando se hace clic en “+N más”	(date: Date, events: CalendarEvent[]) => void	-
data-testid	ID de prueba para pruebas	string	-

CalendarEvent

Propiedad	Descripción	Tipo	Predeterminado
date	Fecha y hora del evento	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	-