# plancalendar

> 一个包含日视图、周视图、月视图的横向查看日期事件的组件

Latest version **0.1.3** (published 2019-07-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install plancalendar
pnpm add plancalendar
yarn add plancalendar
bun add plancalendar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2019-07-25 |
| First published | 2019-07-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 276.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | duoduoing11 |
| Maintainers | duoduoing |
| Keywords | calendar, Calendar, plancalendar, planCalendar, DD, dd, vue, vue.js, DUODUO, duoduo, cttq, CTTQ |

## Links

- npm: https://www.npmjs.com/package/plancalendar
- npm.io page: https://npm.io/package/plancalendar

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.5.17
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [postcss-pxtorem](https://npm.io/package/postcss-pxtorem.md) ^4.0.1
- [eslint-plugin-html](https://npm.io/package/eslint-plugin-html.md) ^5.0.0
- [vue-awesome-swiper](https://npm.io/package/vue-awesome-swiper.md) ^3.1.3

## Recent versions

- 0.1.3 (latest) — 2019-07-25
- 0.1.2 — 2019-07-18
- 0.1.1 — 2019-07-18
- 0.0.7 — 2019-07-18
- 0.0.5 — 2019-07-15
- 0.0.4 — 2019-07-15
- 0.0.3 — 2019-07-15
- 0.0.2 — 2019-07-15
- 0.0.1 — 2019-07-15

## README

## Welcome to planCalendar

planCalendar是一个包含日视图、周视图、月视图的横向查看日期事件的组件。

  

## planCalendar 有哪些功能

* 日视图：日滑动回调、日期点击回调

* 周视图：周滑动回调

* 月视图：月滑动回调、日期点击回调

  

## Install

```
npm install vue-awesome-swiper --save
npm install planCalendar --save
```

  

## Import

新建 ddVuePlanCalendar.js

```
import Vue from "vue"
import ddVuePlanCalendar from "planCalendar"
import "planCalendar/lib/planCalendar.css"
Vue.use(ddVuePlanCalendar)
```

并在 main.js 中 import

```
import VueAwesomeSwiper from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
import "./ddVuePlanCalendar/ddVuePlanCalendar.js";
Vue.use(VueAwesomeSwiper)

```

  

## Use

在需要使用的组件内直接是用planCalendar标签

```
<template>
	<planCalendar></planCalendar>
</template>
```

  

## Attributes

* 日视图：

	```
	dayView：true | false
	dayViewData：{ // 日视图数据 - 代表20190712、20190723有数据，日期下显示蓝点
		"20190712": true,
		"20190723": true,
	}
	daySlideChange：function // 滑动回调事件
	dayClick：function // 日期点击回调事件
	```
* 周视图：

	```
	weekView：true | false
	weekViewData：{	// 周视图数据 - 代表20190710、20190708有数据，日期下显示蓝点
		"20190710": true,
		"20190708": true,
	}
	```
* 月视图：

	```
	monthView：true | false
	monthViewData： { // 周视图数据 - 代表20190512有两条数据、20190701有四条数据，日期下显示蓝条文字
		"20190512": [
			{
				id: "1",
				name: "工作汇报"
			},
			{
				id: "2",
				name: "出差调研"
			}
		]
		"20190701": [
			{
				id: "1",
				name: "工作汇报"
			},
			{
				id: "2",
				name: "出差调研"
			},
			{
				id: "3",
				name: "部门团建"
			},
			{
				id: "4",
				name: "啦啦啦啦"
			}
		],
	}
	monthSlideChange：function // 滑动回调事件
	monthDayClick：function // 日期点击回调事件
	```

<!-- planCalendar show ![gif1](./img/gif1.gif) -->

---
_Source: https://npm.io/package/plancalendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._