Skip to content
AsterUI v0.12.76

MonthCalendar

A full month calendar view for displaying events and selecting dates.

Import

Section titled “Import”
import { MonthCalendar, type CalendarEvent, type CalendarLocale } from 'asterui'

Examples

Section titled “Examples”

Basic Calendar

Simple month calendar wrapped in a 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

With Events

Calendar displaying events with colored dots.

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

Day Selection

Enable day selection with visual feedback.

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

Max Events Per Day

Limit visible events with '+N more' overflow.

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

Strikethrough Events

Show cancelled events with strikethrough styling.

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

Allow Past Interaction

Enable clicking on past dates.

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

Section titled “API”

MonthCalendar

Section titled “MonthCalendar”
PropertyDescriptionTypeDefault
dateThe date to display (determines which month is shown)Datenew Date()
eventsArray of calendar events to displayCalendarEvent[][]
headerShow month/year headerbooleanfalse
daySelectorEnable day selection with visual feedbackbooleanfalse
ellipsisTruncate long event titles with ellipsisbooleanfalse
maxEventsPerDayMaximum events to show per day before “+N more”number5
allowPastInteractionAllow clicking on past datesbooleanfalse
localeLocale configuration for day/month namesCalendarLocale-
onDayClickHandler when a day cell is clicked(date: Date) => void-
onEventClickHandler when an event is clicked(event: CalendarEvent) => void-
onMoreEventsClickHandler when “+N more” is clicked(date: Date, events: CalendarEvent[]) => void-
data-testidTest ID for testingstring-

CalendarEvent

Section titled “CalendarEvent”
PropertyDescriptionTypeDefault
dateEvent date and timeDate-
titleEvent titlestring-
colorEvent dot colorstring-
strikethroughShow event with strikethrough (cancelled)boolean-
styleCustom inline styles for the eventCSSProperties-
data-testidTest ID for testingstring-