MonthCalendar

Uma visualização de calendário de mês completo para exibir eventos e selecionar datas.

Importação

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

Exemplos

Calendário Básico

Calendário de mês simples envolvido em um 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

Com Eventos

Calendário exibindo eventos com pontos coloridos.

</>

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

Seleção de Dia

Habilite seleção de dia com feedback 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 Dia

Limite eventos visíveis com overflow '+N mais'.

</>

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 Riscados

Mostre eventos cancelados com estilo riscado.

</>

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 Interação com Passado

Habilite clicar em datas passadas.

</>

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

Propriedade	Descrição	Tipo	Padrão
date	A data para exibir (determina qual mês é mostrado)	Date	new Date()
events	Array de eventos de calendário para exibir	CalendarEvent[]	[]
header	Mostrar cabeçalho de mês/ano	boolean	false
daySelector	Habilitar seleção de dia com feedback visual	boolean	false
ellipsis	Truncar títulos de evento longos com reticências	boolean	false
maxEventsPerDay	Máximo de eventos para mostrar por dia antes de “+N mais”	number	5
allowPastInteraction	Permitir clicar em datas passadas	boolean	false
locale	Configuração de locale para nomes de dia/mês	CalendarLocale	-
onDayClick	Manipulador quando uma célula de dia é clicada	(date: Date) => void	-
onEventClick	Manipulador quando um evento é clicado	(event: CalendarEvent) => void	-
onMoreEventsClick	Manipulador quando “+N mais” é clicado	(date: Date, events: CalendarEvent[]) => void	-
data-testid	ID de teste para testes	string	-

CalendarEvent

Propriedade	Descrição	Tipo	Padrão
date	Data e hora do evento	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	-