# vue-multi-calendar

> vue多功能日历

Latest version **2.1.4** (published 2022-08-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-multi-calendar
pnpm add vue-multi-calendar
yarn add vue-multi-calendar
bun add vue-multi-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.1.4 |
| Published | 2022-08-17 |
| First published | 2022-08-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 127.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jin.qianqian |
| Maintainers | kisslife8 |

## Links

- npm: https://www.npmjs.com/package/vue-multi-calendar
- npm.io page: https://npm.io/package/vue-multi-calendar

## Recent versions

- 2.1.4 (latest) — 2022-08-17
- 2.1.3 — 2022-08-17
- 2.1.2 — 2022-08-17
- 2.1.1 — 2022-08-17
- 2.1.0 — 2022-08-17
- 2.0.2 — 2022-08-17
- 2.0.1 — 2022-08-17
- 2.0.0 — 2022-08-17
- 1.1.2 — 2022-08-15
- 1.1.1 — 2022-08-15
- 1.1.0 — 2022-08-15
- 1.0.1 — 2022-08-15
- 1.0.0 — 2022-08-15

## README

### vue-multi-calendar

---

#### 1. Summary

​	vue-multi-calendar vue多功能日历\
   https://www.npmjs.com/package/vue-multi-calendar\


#### 2. Code Struct

```bash
<template>
  <div>
    <div style="width: 500px; margin: 0 auto;">
      <div class="row">
        <button @click="$refs.Calendar.changeMonth(-1)">上个月</button>
        <button @click="$refs.Calendar.changeMonth(1)">下个月</button>
        选中的日期: {{ date }}  {{ changedYM }}
      </div>
      <vueMultiCalendar 
        ref="Calendar" 
        :selectedDate.sync="date" 
        :YYYYMM.sync="YYYYMM"
        :changedYM.sync="changedYM"
        :selectedMode="selectedMode" 
        :weekNames="weekNames"
        :displayMode.sync="displayMode" 
        :events="events" 
        :showCalendarHeader="true"
        @dayClick="dayClick" />

        <div class="row"><button @click="change">点击我改变 ["2021-01-09", "2021-01-10"]</button> {{ YYYYMM }}</div>
    </div>
  </div>
</template>

<script>
import vueMultiCalendar from 'vue-multi-calendar'
export default {
  name: "index",
  components: { vueMultiCalendar },
  data() {
    return {
      YYYYMM: '',
      weekNames: ["一", "二", "三", "四", "五", "六", "日"],
      date: ["2021-01-09", "2021-01-10"],
      displayMode: "month", //week周维度显示  month月维度显示
      events: ['2021-01-05', '2021-01-12', '2021-01-15'], //有事件的日期list，日期底部dot表示
      selectedMode: "range", // single: 单选 range: 范围选
    };
  },
  methods: {
    dayClick(day) {
      console.log(day)
    },
    change() {
      this.date = ["2021-02-05", "2021-02-12"]
      this.events.push('2021-02-10')
    }
  },
}
</script>
<style lang="less" scoped>
.row { padding: 10px 0; overflow:hidden;}
button { 
  background:#fff; 
  padding: 4px 20px; 
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 10px;
}
</style>
```

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