common-schedule v0.0.2

common-schedule

基于Vue的日程排班表

安装

npm install common-schedule

使用

<commonSchedule
      start="2019-1-12 12:00:00"
      end="2019-12-12 12:00:00"
      :datas="scheduleData"
      :width="180"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >
    </commonSchedule>

datas数据格式

const scheduleData = {
    '川A89UZ0': {
        xName: '川A89UZ0', //
        sche: [
            {
                start: '2019-08-14 12:30', // 开始时间
                end: '2019-09-14 15:30', // 结束时间
                eventName: '成都-上海', // 事件
            },
        ],
    },
    ...
}

完整示例

<template>
  <div id="app">
    <commonSchedule
      start="2018-8-12 12:00:00"
      end="2018-12-12 12:00:00"
      :datas="scheduleData"
      :width="180"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >
      <template slot="content" slot-scope="props">
        {{props.content.carNum}}
      </template>
      <template slot="time" slot-scope="props">
        {{props.content.year}}
      </template>
      <template slot="sche-name" slot-scope='props'>
        {{props.content.name}}
      </template>
      <template slot="detail" slot-scope="props">
        <div>
          {{props.content.carNum}}
        </div>
      </template>
    </commonSchedule>
  </div>
</template>

<script>
import commonSchedule from 'common-schedule';
import scheduleData from './components/schedule/demoData';

export default {
  components: {
    commonSchedule
  },
  data() {
    return {
      scheduleData,
    }
  },
  methods: {
    addHandle(params) {
      console.log('添加方法');
      console.log(params);
    },
    removeHandle(params) {
      console.log('删除方法');
      console.log(params);
    }
  }
}
</script>

参数说明

属性

方法

slot