# mschedule

> ## components setup ``` npm i mschedule -S ```

Latest version **0.1.7** (published 2022-09-01) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2022-09-01 |
| First published | 2022-02-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 596 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | WQ |
| Maintainers | readw |

## Links

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

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.11

## Recent versions

- 0.1.7 (latest) — 2022-09-01
- 0.1.6 — 2022-02-11
- 0.1.5 — 2022-02-10
- 0.1.4 — 2022-02-09
- 0.1.3 — 2022-02-09
- 0.1.2 — 2022-02-09

## README

# MonthSchedule 月日程

## components setup
```
npm i mschedule -S
```

### components use
``` html
<template>
  <div id="app">
        <MSchedule :scheduleList="plan" :isExpend="false" :hasNumExpend="3" @handleDetail="handleDetail" @chooseEntireCard="chooseEntireCard"
                   @changeMonth="changeMonth">
          <template v-slot:card="{row}">
            <span>时段：{{ row.timePeriod }}</span>
            <span>课程：{{ row.course }}</span>
          </template>
        </MSchedule>
  </div>
</template>
```
``` javascript
<script>
import Vue from 'vue'
import MSchedule from 'mschedule'
import "mschedule/dist/mschedule.css";
Vue.use(mschedule)
export default {
  data() {
    /**
     * 获取当天时间
     * @returns {string}
     */
    function getCurDay(num = 0) {
      var datetime = new Date();
      var year = datetime.getFullYear();
      var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
      let day = datetime.getDate()
      if ((day + num) > 0) {
        day = (day + num) < 10 ? "0" + (datetime.getDate() + num) : datetime.getDate() + num;
      } else {
        day = (day - num) < 10 ? "0" + (datetime.getDate() - num) : datetime.getDate() - num;
      }
      return `${year}-${month}-${day}`
    }
    return {
       plan: [
        {
          date: getCurDay(),
          status: 1,
          timePeriod: '08:00~10:00',
          course: '高等数学撒旦发射点发射点发射点发射点地方圣诞氛围范围方法书店发时段 '
        },
        {
          date: getCurDay(),
          status: 2,
          timePeriod: '14:00~16:00',
          course: '高等数学撒旦发射点发射点发射点发射点地方圣诞氛围范围方法书店发时段'
        },
        {
          date: getCurDay(),
          status: 3,
          timePeriod: '10:00~12:00',
          course: '高等数学撒旦发射点发射点发射点发射点地方圣诞氛围范围方法书店发时段'
        },
        {
          date: getCurDay(),
          status: 3,
          timePeriod: '14:00~16:00',
          course: '高等数学撒旦发射点发射点发射点发射点地方圣诞氛围范围方法书店发时段'
        },
        {
          date: getCurDay(2),
          status: 3,
          timePeriod: '16:00~18:00',
          course: '高等数学撒旦发射点发射点发射点发射点地方圣诞氛围范围方法书店发时段 '
        },
        {
          date: getCurDay(1),
          status: 3,
          timePeriod: '16:00~18:00',
          course: '高等数学撒旦发射点发射点发射点发射点地方圣诞氛围范围方法书店发时段 '
        }
      ],
    }
  },
  methods: {
    /**
     * 点击日程查看详情
     * @param row
     */
    handleDetail(row){
      console.log(row)
    },
    /**
     * 切换周
     * @param date
     */
    changeWeek(date){
      console.log(date)
    },
    /**
     * 点击日期查看数据
     * @param date
     */
    chooseEntireCard(row) {
      console.log(row);
    },
  },
}
</script>
```

### Attributes
|参数|说明|类型|可选值|默认值|
|---|---|---|---|---|
|cardStatus|卡片内容对应状态信息颜色：title对应状态 color对应背景颜色|Object|--|{1: {title: '已过期',color: '#8E8E93'},2: { title: '进行中',color: '#FF6200'},3: {title: '未开始',color: '#3291F8'},}
|scheduleList|日程数据：date:必须存在的字段；status：对应3种状态 与cardStatus中的key值对应|Array|--|--
|isExpend|每天数据多时是否展开或收缩|Boolean|true/false|默认为false，不展开
|hasNumExpend|当每日数据超过几个时进行显示展开与缩放|Number|--|默认为2，超过2条数据时显示展开与缩放功能

### Events
|名字|说明|类型|可选值|默认值|
|---|---|---|---|---|
|handleDetail|查看每个卡片日程详情|function|--|--
|chooseEntireCard|查看整个日期卡片详情|function|--|--
|changeMonth|通过切换月份改变日期|function|--|--

### slot
|name|说明
|---|---|
|card|卡片内容

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