# @cool_zjy/vue-calendars

> Multifunctional calendar component for Vue

Latest version **0.0.1** (published 2018-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cool_zjy/vue-calendars
pnpm add @cool_zjy/vue-calendars
yarn add @cool_zjy/vue-calendars
bun add @cool_zjy/vue-calendars
```

## 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.0.1 |
| Published | 2018-08-09 |
| First published | 2018-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Zhang Visper |
| Maintainers | cool_zjy |
| Keywords | Vue calendar datepicker |

## Links

- npm: https://www.npmjs.com/package/@cool_zjy/vue-calendars
- Repository: https://github.com/coolzjy/vue-calendars
- Homepage: https://github.com/coolzjy/vue-calendars#readme
- Issues: https://github.com/coolzjy/vue-calendars/issues
- npm.io page: https://npm.io/package/@cool_zjy/vue-calendars

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2018-08-09

## README

# vue-calendars
一个极简的日历控件。

## 使用
```html
<day :month="now" :selected="selected" @click="select"></day>
```

```js
import { Day } from 'vue-calendars'

export default {
  data: {
    const now = new Date()
    return {
      now,
      selected: { start: now, end: now }
    }
  },

  methods: {
    select (date) {
      this.selected = { start: date, end: date }
    }
  },

  components: { Day }
}
```

## API
### Props
Prop | 类型 | 描述 | 默认值/必需
--- | --- | --- | ---
month(year) | Date | 日历展示的月份（在月日历中为年份） | 必需
filter | Function (Date => Boolean) | 过滤日历中可以选择的项 | `() => true`
selected | Object({ start: Date, end: Date }) | 设置选中项 |
pending | Array([ Date, Date ]) | 设置未决选中项 | `[]`

### Events
Event | 参数 | 描述
--- | --- | ---
click | date | 点击日历中某一项时触发
enter | date | 鼠标移入日历中某一项时触发
leave | date | 鼠标移出日历中某一项时触发

> ⚠️注意：事件参数提交的 date 对象为开始的时间点，即：选中一天时结果为该天 00:00:00，选中一周时结果为该周周一 00:00:00，选中一月时结果为该月 1 日 00:00:00。

## 示例
参考 examples 文件夹。

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