# vue2-日历组件

**Repository Path**: zhaochong2/vue2-calendar-component

## Basic Information

- **Project Name**: vue2-日历组件
- **Description**: vue2简单日历组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-08-11
- **Last Updated**: 2024-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# calendar

一个 vue2 的简单日历组件

支持的功能

-   月份切换
-   年份切换
-   高亮指定日期
-   黑夜模式

![Alt text](https://s1.ax1x.com/2023/08/11/pPnauCt.png)

![Alt text](https://s1.ax1x.com/2023/08/11/pPnam4I.png)

## props

| 名称            | 类型          | 默认值     | 说明                                    |
| :-------------- | :------------ | :--------- | :-------------------------------------- |
| width           | Number/String | '600px'    | 日历的宽度                              |
| highlight       | Number/String | ''         | 日历的高度                              |
| theme           | String        | ''         | 主题颜色(可选'dark')                    |
| currentTime     | String        | 系统年月日 | 初始化的时间(xxxx-xx-xx)                |
| autoMonthSwitch | Boolean       | true       | 点击非当前月日期,是否自动跳转到目标月份 |

## events

| 名称      | 说明                                 |
| :-------- | :----------------------------------- |
| change    | change(item),切换日期时的回调事件    |
| dateClick | dateClick(item),点击日期时的回调事件 |

## slot

| 名称   | 说明           |
| :----- | :------------- |
| header | 日历头部的插槽 |

## methods

| 名称        | 说明                            |
| :---------- | :------------------------------ |
| prevMonth   | 切换到上一个月                  |
| nextMonth   | 切换到下一个月                  |
| prevYear    | 切换到上一年                    |
| nextYear    | 切换到下一年                    |
| backToToday | 切换到今天(受 currentTime 影响) |

## 使用方法

使用 npm 安装

```sh
npm i vue2-calendar-cc
```

```vue
<template>
	<div>
		<Calendar width="600px" theme="dark" :currentTime.sync="currentTime"></Calendar>
	</div>
</template>

<script>
import Calendar from 'vue2-calendar-cc';
export default {
	components: {
		Calendar,
	},
	data() {
		return {
			currentTime: '2023-01-01',
		};
	},
};
</script>

<style>
@import url('../node_modules/vue2-calendar-cc/dist/style.css');
</style>
```