跳转到内容
AsterUI v0.12.84

WeekCalendar 周日历

用于显示和安排事件的带有每小时时间槽的每周日历视图。

导入

Section titled “导入”
import { WeekCalendar, type CalendarEvent, type CalendarLocale } from 'asterui'

示例

Section titled “示例”

基础日历

显示每小时时间槽的简单周日历。

Sun
25
Mon
26
Tue
27
Wed
28
Thu
29
Fri
30
Sat
31
9am
10am
11am
12pm
1pm
2pm
3pm
4pm
5pm
 
import { WeekCalendar, Card } from 'asterui'

function App() {
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar date={new Date()} />
      </Card>
    )
}

export default App

带事件

在其预定时间显示事件的日历。

Sun
25
Mon
26
Tue
27
Wed
28
Thu
29
Fri
30
Sat
31
9am
Standup
10am
Sprint Planning
11am
12pm
Lunch Meeting
1pm
2pm
Design Review
3pm
Demo
4pm
Team Sync
5pm
 
import { WeekCalendar, Card, message, type CalendarEvent } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  // Create events for this week
  const weekStart = new Date(date)
  weekStart.setDate(date.getDate() - date.getDay())
  
  const events: CalendarEvent[] = [
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 1, 9, 0), title: 'Standup', color: '#3b82f6' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 1, 14, 0), title: 'Design Review', color: '#8b5cf6' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 2, 10, 0), title: 'Sprint Planning', color: '#10b981' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 3, 12, 0), title: 'Lunch Meeting', color: '#f59e0b' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 4, 15, 0), title: 'Demo', color: '#ef4444' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 5, 16, 0), title: 'Team Sync', color: '#06b6d4' },
  ]
  
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          events={events}
          onEventClick={(event) => message.info(`Clicked: ${event.title}`)}
        />
      </Card>
    )
}

export default App

时间槽选择

点击空时间槽以选择它们。

Sun
25
Mon
26
Tue
27
Wed
28
Thu
29
Fri
30
Sat
31
9am
10am
11am
12pm
1pm
2pm
3pm
4pm
5pm
 
import { WeekCalendar, Card, message } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          onSelectSlot={(slot) => message.info(`Selected: ${slot.start.toLocaleString()} - ${slot.end.toLocaleTimeString()}`)}
        />
      </Card>
    )
}

export default App

删除线事件

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

Sun
25
Mon
26
Tue
27
Wed
28
Thu
29
Fri
30
Sat
31
9am
10am
Cancelled Meeting
11am
12pm
Postponed
1pm
2pm
Active Event
3pm
4pm
5pm
 
import { WeekCalendar, Card, type CalendarEvent } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  const weekStart = new Date(date)
  weekStart.setDate(date.getDate() - date.getDay())
  
  const events: CalendarEvent[] = [
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 2, 10, 0), title: 'Cancelled Meeting', color: '#ef4444', strikethrough: true },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 2, 14, 0), title: 'Active Event', color: '#10b981' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 4, 12, 0), title: 'Postponed', color: '#f59e0b', strikethrough: true },
  ]
  
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          events={events}
        />
      </Card>
    )
}

export default App

自定义小时

使用 startHour 和 endHour 仅显示上午时间(6am-12pm)。

Sun
25
Mon
26
Tue
27
Wed
28
Thu
29
Fri
30
Sat
31
6am
Morning Run
7am
Early Sync
8am
Team Breakfast
9am
Standup
10am
Code Review
11am
12pm
 
import { WeekCalendar, Card, type CalendarEvent } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  const weekStart = new Date(date)
  weekStart.setDate(date.getDate() - date.getDay())
  
  const events: CalendarEvent[] = [
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 1, 6, 0), title: 'Morning Run', color: '#10b981' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 2, 7, 0), title: 'Early Sync', color: '#8b5cf6' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 3, 8, 0), title: 'Team Breakfast', color: '#f59e0b' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 4, 9, 0), title: 'Standup', color: '#3b82f6' },
    { date: new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 5, 10, 0), title: 'Code Review', color: '#ef4444' },
  ]
  
  return (
      <Card className="h-[400px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          events={events}
          startHour={6}
          endHour={12}
        />
      </Card>
    )
}

export default App

允许过去交互

启用点击过去的时间槽。

Sun
25
Mon
26
Tue
27
Wed
28
Thu
29
Fri
30
Sat
31
9am
10am
11am
12pm
1pm
2pm
3pm
4pm
5pm
 
import { WeekCalendar, Card, message } from 'asterui'
import { useState } from 'react'

function App() {
  const [date] = useState(new Date())
  
  return (
      <Card className="h-[500px]" bodyClassName="overflow-hidden">
        <WeekCalendar
          date={date}
          allowPastInteraction
          onDayClick={(date) => message.info(`Day clicked: ${date.toLocaleDateString()}`)}
          onSelectSlot={(slot) => message.info(`Slot: ${slot.start.toLocaleTimeString()}`)}
        />
      </Card>
    )
}

export default App

API

Section titled “API”

WeekCalendar

Section titled “WeekCalendar”
属性描述类型默认值
date要显示的日期(确定显示哪一周)Datenew Date()
events要显示的日历事件数组CalendarEvent[][]
startHour时间网格的开始小时(0-23)number9
endHour时间网格的结束小时(0-23)number17
allowPastInteraction允许点击过去的时间槽booleanfalse
fitContainer将行适应容器高度而不是滚动booleanfalse
locale日期名称和时间格式的区域设置配置CalendarLocale-
onDayClick点击日期标题时的处理程序(date: Date) => void-
onEventClick点击事件时的处理程序(event: CalendarEvent) => void-
onSelectSlot点击时间槽时的处理程序(slotInfo: { start: Date; end: Date }) => void-
data-testid用于测试的测试 IDstring-

CalendarEvent

Section titled “CalendarEvent”
属性描述类型默认值
date事件日期和时间(小时确定哪一行)Date-
title事件标题string-
color事件点颜色string-
strikethrough显示带有删除线的事件(已取消)boolean-
style事件的自定义内联样式CSSProperties-
data-testid用于测试的测试 IDstring-