# wang_calendar

**Repository Path**: laoyaowang/wang_calendar

## Basic Information

- **Project Name**: wang_calendar
- **Description**: vue3 + ts 日历日程组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-03-05
- **Last Updated**: 2024-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

=======
# wang_calendar

## 介绍
> vue3 + ts 日历日程组件
> 采用 vue + ts 完成整个项目，可以用在vue项目中


## 安装教程

### 1.  安装
```sh
# yarn
yarn install wang-calendar
# npm
npm i wang-calendar
# pnpm
pnpm install wang-calendar
```
### 2.  注册组件
```js
// 全局注册使用 main.js
import WangCalendar from 'wang-calendar'
import 'wang-calendar/style.css'

app.use(WangCalendar)

// 局部注册使用  App.vue
import { WangCalendar, WangScrollbar } from 'wang-calendar'
import 'wang-calendar/style.css'
```

### 3.  使用

```vue
<wang-calendar v-model="date" :events="events" />
<WangScrollbar :height?="xxx" :width?="xxx">
    <!-- 你的内容 -->
</WangScrollbar>
```

## 使用说明

### 1. 属性

|属性名|说明|类型|可选值|默认值|
|---|---|---|---|---|
|v-model|日期|Date|-|new Date()|
|events|日程|{ id: number, begin: string, end: string, title: string,[key: string]: any }[]|-|-|
|height|组件高度|number|>=500|500|


### 2. 事件

|事件名|说明|回调参数|
|---|---|---|
|clickDays|当用户点击日期单元格的时候触发|{ day: string, date: Date }|
|clickEvents|当用户点击日程显示块的时候触发|{ index: number, id: number }|

### 3. 插槽

|名称|说明|
|---|---|
|day|日历在月份视图下日期单元格显示自定义内容,参数为{ type?: 'prev' \| 'current' \| 'next', day: string, date: Date, isSelected?: boolean, isToday?: boolean }|