日历组件
包含农历,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 | 日期表格显示内容 |