china-calendar/README.md

#### 安装 ``` npm install ```

#### 日历组件
##### 包含农历，24节气，节假日的日历

#### 安装
```
npm install
```

#### 运行
```
npm run serve
```

#### 构建
```
npm run build
```
####  使用

```html
<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>
```
##### 预览
![](./src/assets/日历.png)

### 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](https://github.com/wangdaodao/vue-lunar-calendar-pro)
[calendar.js](https://github.com/jjonline/calendar.js)