Mschedule NPM | npm.io

MonthSchedule 月日程

components setup

npm i mschedule -S

components use

<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>

<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	--	--