Fes Design

Calendar 日历 ​

日历一般用于需要按照日期规划日程并能够按照日期记录和查看日程安排的场景中

组件注册 ​

js
import { FCalendar } from '@fesjs/fes-design';

app.use(FCalendar);

代码演示 ​

基础用法 ​

play
<template>
    <FCalendar
        :shortcuts="[
            {
                label: '今天',
                time: Date.now(),
            },
            {
                label: '星期四',
                time: () => {
                    const today = new Date();
                    const crazyDay = new Date();
                    crazyDay.setDate(today.getDate() + (4 - today.getDay()));
                    return crazyDay.getTime();
                },
            },
        ]"
    />
</template>

按年展示 ​

play
<template>
    <FCalendar mode="month" />
</template>

分割线的展示 ​

play
<template>
    <FRadioGroup
        v-model="splitLineVisible"
        :options="[
            { label: '展示(默认)', value: true },
            { label: '不展示', value: false },
        ]"
    />

    <FDivider />

    <FCalendar
        :splitLine="splitLineVisible"
        :shortcuts="[
            {
                label: '今天',
                time: Date.now(),
            },
            {
                label: '星期三',
                time: () => {
                    const today = new Date();
                    const kingDay = new Date();
                    kingDay.setDate(today.getDate() + (3 - today.getDay()));
                    return kingDay.getTime();
                },
            },
        ]"
    />
</template>

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

const splitLineVisible = ref<boolean>(false);
</script>

自定义日历附加内容 ​

play
<template>
    <FCalendar
        :shortcuts="[
            {
                label: '今天',
                time: Date.now(),
            },
        ]"
    >
        <template #cellMain="{ date, mode }">
            <FTag
                v-if="mode === 'date' && isKingDay(date)"
                size="small"
                type="warning"
                effect="dark"
            >
                1+1
            </FTag>
        </template>
        <template #cellAppendant="{ date, mode }">
            <div v-if="mode === 'date'" :style="{ padding: '8px 0' }">
                <FTag v-if="isKingDay(date)" size="small" type="warning">
                    星期三
                </FTag>
                <FTag v-if="isCrazyDay(date)" size="small" type="danger">
                    星期四
                </FTag>
            </div>
        </template>
    </FCalendar>
</template>

<script setup lang="ts">
const today = new Date();

const crazyDay = new Date();
crazyDay.setDate(today.getDate() + (4 - today.getDay()));
const isCrazyDay = (d: number): boolean => {
    const _d = new Date(d);
    return (
        _d.getFullYear() === crazyDay.getFullYear()
        && _d.getMonth() === crazyDay.getMonth()
        && _d.getDate() === crazyDay.getDate()
    );
};

const kingDay = new Date();
kingDay.setDate(today.getDate() + (3 - today.getDay()));
const isKingDay = (d: number): boolean => {
    const _d = new Date(d);
    return (
        _d.getFullYear() === kingDay.getFullYear()
        && _d.getMonth() === kingDay.getMonth()
        && _d.getDate() === kingDay.getDate()
    );
};
</script>

Props ​

属性说明类型默认值
v-model当前高亮标记的日期number (UnixTime)今天
v-model:mode显示模式（按月展示、按年展示）date monthdate
splitLine是否展示分割线booleantrue
height组件高度string | number-
shortcuts快捷选项{ label: string, time: number }[][]

Slots ​

名称说明参数
cellMain单元格主要内容（日期部分）{ date: UnixTime, mode: 'month' | 'date' }
cellAppendant单元格附加内容{ date: UnixTime, mode: 'month' | 'date' }

Events ​

事件名称说明回调参数
cellClick点击日历中格子{ date: UnixTime, mode: 'month' |'date' }