china-calendar

安装
677
vue 24节气 农历 lunar calendar 节假日
Install
npm install china-calendar
Latest Version:0.1.3
Vue:2
Last Updated:Apr 25, 2023
Links: npm
Maintainer: rollcall2000
日历组件
包含农历，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>
预览

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 - -

Events

事件名称 说明 回调参数
year-change 切换年 年
month-change 切换月 月
date-click 日期点击 date对象，包含所有的属性

Methods

方法名 说明 参数
refresh 重新渲染日历 -

Slots

  name  说明  
date-cell 日期表格显示内容

感谢

vue-lunar-calendar-pro calendar.js

Related Packages

vue-solar-lunar

支持Vue | Vue3的公历转农历插件

1,352 16
农历 公农互转 公历 公历农历互转
@aurouscia/vue-lunar-date-select

vue3公历农历联动日期选择器

840
vue 农历 china cn component date lunar select vue3 日期 +1
vue-lunar-full-calendar

vue-fulcalendar

6,821 162
24节气 vue 24 solar calendar chinese lunar calendar fullcalendar holidays js lunar lunarfullcalendar +3
vue

The progressive JavaScript framework for building modern web UI.

588,019,132 54,801
vue
@vueuse/shared
372,738,348 22,398
vue utils vue-use

Version History

Version Released Vue License
0.1.3 ^2.6.14
0.1.2 ^2.6.14
0.1.1 ^2.6.14
0.1.0 ^2.6.14