China-calendar NPM

日历组件

包含农历，24节气，节假日的日历

安装

npm install

运行

npm run serve

构建

npm run build

使用

<template>
    <china-calendar
        :mode="'year'"
        @date-click="dateClick"
        :year="year"
        @year-change="yearChange"
        :bgDate="bgDate"
        :badges="badges"
        :show-other-month-day="false"
    ></china-calendar>
</template>
<script>
export default {
    data() {
        return {
            year: "2023",
            bgDate: [
                "2023-04-29",
                "2023-04-30",
                "2023-05-01",
                "2023-05-02",
                "2023-05-02",
            ],
            badges: {
                节: {
                    arr: ["2023-05-07"],
                    color: "#3BCFB6",
                },
                补: {
                    arr: ["2023-04-23", "2023-05-06"],
                    color: "#F68300",
                },
                休: {
                    arr: [
                        "2023-04-29",
                        "2023-04-30",
                        "2023-05-01",
                        "2023-05-02",
                        "2023-05-02",
                    ],
                    color: "#2B8A05",
                },
            },
        };
    },
    methods: {
        dateClick(data) {
            console.log(data);
        },
        yearChange(year) {
             console.log(year);
        },
    },
};
</script>

预览

npm.io

Attributes

参数	说明	类型	可选值	默认值
mode	日历模式	string	year / month	year
show-tool	显示上方工具栏	boolean	true / false	true
show-calendar-mode	显示年月模式切换按钮	boolean	true / false	true
min	最小渲染年	number	1900至2100	1900
max	最大渲染年	number	1900至2100	2100
year	渲染年	srtring/number	—	当前年
month	渲染月	srtring/number	—	当前月
cell-size	每一个日期表格大小	string	—	36px
show-lunar	渲染农历	boolean	—	true
show-festival	渲染节日	boolean	—	true
show-term	渲染节气	boolean	—	true
show-other-month-day	是否显示其他月数据	boolean	-	false
bg-date	胶囊背景数据	array	-	-
badges	带角标数据	object	-	-