MonthCalendar

用于显示事件和选择日期的完整月份日历视图。

导入

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

示例

基础日历

包装在 Card 中的简单月份日历。

Sun

Mon

Tue

Wed

Thu

Fri

Sat

import { MonthCalendar, Card } from 'asterui'

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

export default App

带事件

显示带彩色圆点事件的日历。

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Team Meeting

Code Review

Sprint Planning

Design Review

Demo Day

Retro

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

日期选择

启用带视觉反馈的日期选择。

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

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

每天最大事件数

使用 '+N more' 溢出限制可见事件。

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Event 1

Event 2

+4 more

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

删除线事件

显示带删除线样式的已取消事件。

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Cancelled Meeting

Active Event

Postponed

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

允许过去交互

启用点击过去日期。

December 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

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`

属性	描述	类型	默认值
`date`	要显示的日期（确定显示哪个月份）	`Date`	`new Date()`
`events`	要显示的日历事件数组	`CalendarEvent[]`	`[]`
`header`	显示月份/年份头部	`boolean`	`false`
`daySelector`	启用带视觉反馈的日期选择	`boolean`	`false`
`ellipsis`	用省略号截断长事件标题	`boolean`	`false`
`maxEventsPerDay`	在 “+N more” 之前每天显示的最大事件数	`number`	`5`
`allowPastInteraction`	允许点击过去日期	`boolean`	`false`
`locale`	日/月名称的区域设置配置	`CalendarLocale`	-
`onDayClick`	点击日期单元格时的处理器	`(date: Date) => void`	-
`onEventClick`	点击事件时的处理器	`(event: CalendarEvent) => void`	-
`onMoreEventsClick`	点击 “+N more” 时的处理器	`(date: Date, events: CalendarEvent[]) => void`	-
`data-testid`	用于测试的测试 ID	`string`	-

`CalendarEvent`

属性	描述	类型	默认值
`date`	事件日期和时间	`Date`	-
`title`	事件标题	`string`	-
`color`	事件圆点颜色	`string`	-
`strikethrough`	显示带删除线的事件（已取消）	`boolean`	-
`style`	事件的自定义内联样式	`CSSProperties`	-
`data-testid`	用于测试的测试 ID	`string`	-