Calendar 日历

以日/周/多日视图展示日程事件

何时使用

  • 需要以日历形式展示日期或选择日期时。

导入

import { Calendar } from "@reglow/reui";
import type { CalendarEvent } from "@reglow/reui";

星期、年月标题、"今天"、上午、下午、全天等文案默认跟随全局语言（zh-CN / zh-TW / en-US），传 prop 可覆盖。

基础用法

2026年9月
日
一
二
三
四
五
六
30
31
1 9月
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
1 10月
2
3
4
5
6
7
8
9
10

默认月视图，通过 mode 切换日/周/月/多日视图。

<script setup>
import { ref } from "vue";
import { Calendar } from "@reglow/reui";

const displayValue = ref(new Date());
</script>

<template>
  <Calendar
    mode="month"
    :display-value="displayValue"
    :height="600"
    @click="(e, date) => console.log(date)"
  />
</template>

日视图

<template>
  <Calendar mode="day" :show-curr-time="true" :height="600" />
</template>

周视图

<template>
  <Calendar mode="week" :show-curr-time="true" :height="600" />
</template>

多日视图

通过 mode 为 range，配合 range 属性指定日期范围（左闭右开）。

<script setup>
const range = [new Date(2024, 5, 26), new Date(2024, 5, 31)];
</script>

<template>
  <Calendar mode="range" :range="range" :height="600" />
</template>

设置周起始日

通过 weekStartsOn 设置每周第一天，0 代表周日，1 代表周一。

<template>
  <Calendar mode="month" :week-starts-on="1" :height="600" />
</template>

事件渲染

通过 events 传入需要渲染的事件。

<script setup>
import { ref } from "vue";
import { Calendar } from "@reglow/reui";

const displayValue = ref(new Date(2024, 5, 23));

const events = [
  {
    key: "1",
    start: new Date(2024, 5, 23, 9, 0),
    end: new Date(2024, 5, 23, 11, 0),
    children: "团队会议",
  },
  {
    key: "2",
    start: new Date(2024, 5, 23, 14, 0),
    end: new Date(2024, 5, 23, 15, 30),
    children: "产品评审",
  },
  {
    key: "3",
    start: new Date(2024, 5, 23),
    end: new Date(2024, 5, 23),
    allDay: true,
    children: "全天事件",
  },
];
</script>

<template>
  <Calendar
    mode="week"
    :display-value="displayValue"
    :events="events"
    :height="600"
  />
</template>

区分周末

通过 markWeekend 以灰色显示周末列。

<template>
  <Calendar mode="month" mark-weekend :height="600" />
</template>

自定义日期文案

通过 #renderDateDisplay slot 自定义日期文案。

<template>
  <Calendar mode="week" :height="600">
    <template #renderDateDisplay="{ date }">
      <span :class="date.getDay() === 0 ? 'text-red-500' : ''">
        {{ date.getDate() }}
      </span>
    </template>
  </Calendar>
</template>

自定义单元格渲染

通过 #dateGridRender slot 自定义月视图单元格。

<template>
  <Calendar mode="month" :height="700">
    <template #dateGridRender="{ dateString, date }">
      <div
        v-if="dateString === '2024-06-23'"
        class="absolute inset-0 bg-red-50"
      />
    </template>
  </Calendar>
</template>

默认滚动位置

通过 scrollTop 设置日/周视图的默认滚动高度。

<template>
  <Calendar mode="day" :scroll-top="480" :height="600" />
</template>

API

Props

参数说明类型默认值
mode视图模式day | week | month | rangemonth
displayValue展示日期Date当前日期
events事件列表CalendarEvent[][]
range多日视图日期范围（左闭右开）Date[]-
weekStartsOn周起始日（0=周日，1=周一）number0
showCurrTime显示当前时间线booleantrue
markWeekend区分周末booleanfalse
height日历高度number | string600
width日历宽度number | string-
scrollTop日/周视图默认滚动高度number400
minEventHeight事件最小高度number20
class附加类名string-

Events

事件说明回调参数
click点击日期/时间格(e: Event, date: Date)
close月视图事件卡片关闭(e: Event)
moreClick月视图点击"更多"(e: Event, date: Date, remaining: number)

Slots

名称说明参数
header自定义头部-
dateGridRender自定义单元格渲染{ dateString: string, date: Date }
renderDateDisplay自定义日期文案{ date: Date }
renderTimeDisplay自定义时间文案{ time: number }
allDayEventsRender自定义全天事件渲染{ events: CalendarEvent[] }

CalendarEvent

参数说明类型默认值
key唯一标识（必填）string-
start事件起始时间Date-
end事件结束时间Date-
allDay是否全天事件booleanfalse
children展示内容VNode | string-

视图模式

mode说明
day日视图，单日时间轴
week周视图，7 日时间轴
month月视图，日历网格
range多日视图，自定义日期范围
Badge 徽标
展示状态、数量或标记的小徽标
Card 卡片
Card 卡片