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