next UI

# Calendar 日历

# 概述

显示日历，常用于日程规划、课程表、机票价格等场景。可以按月或年切换显示类型。

# 代码示例

基本用法
设置 value 绑定当前日期，支持日期 Date 格式、日期字符串（如 2019-07-28）、或毫秒时间戳。默认显示今天。可以使用 v-model 双向绑定数据。
2021 年 10 月
一二三四五六日
27
28
29
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
<template>
    <div>
        <Calendar />
    </div>
</template>
<script>
    export default {
        
    }
</script>
Expand Copy
自定义内容
Calendar 组件提供了 slot-scope 可以自定义任意单元格内容。slot-scope 参数有2个：
  • date：当前单元格日期；
  • data：当前单元格的额外信息。当视图为 month 时，其值为 { type（当前单元格类型，值为 prev-month/current-month/next-month），day（格式化的日期），selected（当前是否选中） }。当视图为 year 时，其值为 { type：current-year，month（格式化的月份），selected（当前是否选中） }。
2019 年 9 月
一二三四五六日
26
27
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
1
国庆节
2
3
4
5
6
<template>
    <div>
        <Calendar v-model="value" hide-type>
            <template slot-scope="{ date, data }" slot="month">
                <Badge status="warning" text="看苹果发布会" v-if="data.day === '2019-09-11'" />
                <Badge status="success" text="中秋节" v-if="data.day === '2019-09-13'" />
                <Badge status="error" text="国庆节" v-if="data.day === '2019-10-01'" />
            </template>
        </Calendar>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value: '2019-09-05'
            }
        }
    }
</script>
Expand Copy

# API

# Calendar Props

属性 说明 类型 默认值
value 绑定当前日期的值，为空时默认显示今天，可使用 v-model 双向绑定数据 Date, String, Number -
type 视图类型，可选值为 month (月视图) 或 year (年视图) String month
cell-height 单元格高度，单位 px Number 100
show-header 是否显示顶部 Boolean true
first-day-of-week 周起始日 Number 1
hide-type 是否隐藏类型切换 Boolean false
locale 默认文案 Object 见下
// locale 默认值
{
    today: '今天',
    type: {
        month: '月',
        year: '年'
    },
    weekDays: ['日', '一', '二', '三', '四', '五', '六'],
    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}

# Calendar Events

事件名 说明 返回值
on-change 选择日期发生变化时触发 date
on-type-change 切换视图类型时触发 type

# Calendar Slots

名称 说明
header 自定义顶部
headerTitle 自定义顶部标题

← 鉴权 →