# kuan-vue-calendar

> 一个小巧轻量的 vue 日历组件和 picker，支持单选、多选、区域选择

Latest version **2.0.2** (published 2019-08-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install kuan-vue-calendar
pnpm add kuan-vue-calendar
yarn add kuan-vue-calendar
bun add kuan-vue-calendar
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2019-08-01 |
| First published | 2019-03-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 80.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | luzhongk@126.com |
| Maintainers | luzhongk |
| Keywords | kuan-vue-calendar, calendar, vue, vue-calendar, luzhongk |

## Links

- npm: https://www.npmjs.com/package/kuan-vue-calendar
- Repository: https://github.com/kuan1/kuan-vue-calendar
- Homepage: https://github.com/kuan1/kuan-vue-calendar#readme
- Issues: https://github.com/kuan1/kuan-vue-calendar/issues
- npm.io page: https://npm.io/package/kuan-vue-calendar

## Recent versions

- 2.0.2 (latest) — 2019-08-01
- 2.0.1 — 2019-07-31
- 2.0.0 — 2019-07-21
- 1.0.3 — 2019-03-12
- 1.0.1 — 2019-03-11
- 1.0.0 — 2019-03-10

## README

# kuan-vue-calendar

一个小巧轻量的 vue 日历组件和 picker，支持单选、多选、区域选择

[预览地址](https://kuan1.github.io/kuan-vue-calendar/)

## 安装

```bash
yarn add kuan-vue-calendar
# or
npm i kuan-vue-calendar -S
```

## 使用

```html
<template>
  <div class="test-container">
    <h2 class="sub-title">日历单选</h2>
    <calendar v-model="value" />
    <button @click="alert('value')" class="test-btn">确定</button>
    <h2 class="sub-title">日历多选</h2>
    <calendar v-model="value2" mode="multiple" />
    <button @click="alert('value2')" class="test-btn">确定</button>
    <h2 class="sub-title">日历区间</h2>
    <calendar v-model="value3" mode="range" />
    <button @click="alert('value3')" class="test-btn">确定</button>
    <h2 class="sub-title">日历picker</h2>
    <calendar-picker v-model="value3" mode="range" />
    <button @click="alert('value3')" class="test-btn">确定</button>
  </div>
</template>

<script>
  import { Calendar, CalendarPicker } from 'kuan-vue-calendar'

  export default {
    components: {
      Calendar,
      CalendarPicker
    },
    data() {
      return {
        value: '2019-07-21', // 单选
        value2: ['2019-07-09', '2019-07-20'], // 多选
        value3: ['2019-07-09', '2019-07-20'] // 区间
      }
    },
    methods: {
      alert(key) {
        alert(JSON.stringify(this[key]))
      }
    }
  }
</script>
```

## 修改日志

2.0.2

- 显示星期（日历必有的功能，感谢这里的提醒[issues/3](https://github.com/kuan1/kuan-vue-calendar/issues/3)）

  2.0.0

- 日历重写、使用方法发生改变
- 添加日历 picker
- bug 修复

  1.0.0

- 样式修改
- bug 修改

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