主题

Calendar 日历 ​

显示日历

基础用法 ​

设置 value 来指定当前显示的月份。 如果 value 未指定，则显示当月。 value 支持 v-model 双向绑定。

2025 - 9
日一二三四五六
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
7
8
9
10
11

<template>
    <mc-calendar class="vp-raw" v-model="value"></mc-calendar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

迷你模式 ​

用于嵌套在空间有限的容器中。

2025 - 9
日一二三四五六
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
7
8
9
10
11

<template>
    <div class="vp-raw" :style="{ width: '300px' }">
        <mc-calendar mini />
    </div>
</template>

自定义内容 ​

自定义日历单元格中显示的内容。

2025 - 9
日一二三四五六

08-31

09-01

09-02

09-03

09-04

09-05

09-06

09-07

09-08

09-09

09-10

09-11

09-12

09-13

09-14

09-15

09-16

09-17

09-18

09-19

09-20

09-21

09-22

09-23

09-24

09-25

09-26

09-27

09-28

09-29

09-30

10-01

10-02

10-03

10-04

10-05

10-06

10-07

10-08

10-09

10-10

10-11

2025 - 9
日一二三四五六

08-31

09-01

09-02

09-03

09-04

09-05

09-06

09-07

09-08

09-09

09-10

09-11

09-12

09-13

09-14

09-15

09-16

09-17

09-18

09-19

09-20

09-21

09-22

09-23

09-24

09-25

09-26

09-27

09-28

09-29

09-30

10-01

10-02

10-03

10-04

10-05

10-06

10-07

10-08

10-09

10-10

10-11 

<template>
    <div class="vp-raw">
        <mc-calendar>
            <template #date-cell="{ data }">
                <p
                    :class="data.isSelected ? 'is-selected' : ''"
                    :style="{
                        height: '100%',
                        margin: '0',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }"
                >
                    {{ data.day.split('-').slice(1).join('-') }}
                    {{ data.isSelected ? '✔️' : '' }}
                </p>
            </template>
        </mc-calendar>

        <mc-calendar mini>
            <template #date-cell="{ data }">
                <p
                    :class="data.isSelected ? 'is-selected' : ''"
                    :style="{ margin: '0' }"
                >
                    {{ data.day.split('-').slice(1).join('-') }}
                    {{ data.isSelected ? '✔️' : '' }}
                </p>
            </template>
        </mc-calendar>
    </div>
</template>

<style scoped>
.is-selected {
    font-size: 15px;
    font-weight: 600;
}
</style>

自定义头部 ​

当前月份:2025 - 9
日一二三四五六
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
7
8
9
10
11

<template>
    <mc-calendar class="vp-raw" ref="calendar">
        <template #header="{ date }">
            <div
                :style="{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexGrow: '1'
                }"
            >
                <div>
                    <span>当前月份:</span>
                    <span>{{ date }}</span>
                </div>
                <div>
                    <mc-button size="small" @click="selectDate('prev-year')">
                        上一年
                    </mc-button>
                    <mc-button size="small" @click="selectDate('prev-month')">
                        上个月
                    </mc-button>
                    <mc-button size="small" @click="selectDate('today')">
                        今天
                    </mc-button>
                    <mc-button size="small" @click="selectDate('next-month')">
                        下个月
                    </mc-button>
                    <mc-button size="small" @click="selectDate('next-year')">
                        下一年
                    </mc-button>
                </div>
            </div>
        </template>
    </mc-calendar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import type { CalendarDateType, CalendarInstance } from 'mealcomes';

const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
    if (!calendar.value) return;
    calendar.value.selectDate(val);
};
</script>

API ​

Attributes ​

属性名说明类型默认值
model-value / v-model选中项绑定值Date-
mini迷你模式booleanfalse

Slots ​

插槽名说明类型
date-celltype 表示该日期的所属月份，可选值有 prev-month、current-month 和 next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd；date 是单元格的日期{ data: { type: 'prev-month' | 'current-month' | 'next-month', isSelected: boolean, day: string, date: Date } }
header日历头部，date 表示当前选中的月份{ date: string }

Exposes ​

名称说明类型
selectedDay当前选中的日期ComputedRef<Dayjs | undefined>
pickDay选中指定的某一天(day: dayjs.Dayjs) => void
selectDate选择日期(type: CalendarDateType) => void

类型声明 ​

显示类型声明
ts
type CalendarDateType =
    | 'prev-month'
    | 'next-month'
    | 'prev-year'
    | 'next-year'
    | 'today';