vue-schedule
Vue.js file schedule component
install
npm install vue-schedule --save Example
http://jayzou.github.io/demo/vue-schedule/index.html
<div id="app"> <Schedule :time-ground="['09:00', '18:00']" :week-ground="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']" :task-detail="[ [ { dateStart: '09:30', dateEnd: '10:30', title: '开会', }, { dateStart: '11:30', dateEnd: '13:50', title: '开会', } ] ]"> </Schedule> </div>CommonJS
//main.js var Vue = require('vue'); const Schedule = require('vue-schedule') Vue.use(Schedule) new Vue({ el: '#app', template: '<App/>', components: { App } })ES6
import Vue from 'vue'; import Schedule from 'vue-schedule' Vue.use(Schedule) new Vue({ el: '#app', template: '<App/>', components: { App } })props
time-ground: 时间范围 示例
:time-ground="['09:00', '18:00']"week-ground: 星期 示例
:week-ground="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']"color: 颜色填充 示例
:color="['#2B2E4A','#521262','#903749','#53354A','#40514E','#537780']"task-detail: 具体事项，具体事项需要与星期对应 示例
:task-detail = " [ [ { dateStart: '09:30', dateEnd: '10:30', title: 'Metting', detail: 'Metting (German: Mettingen) is a commune in the Moselle department in Grand Est in north-eastern France.' }, { dateStart: '11:30', dateEnd: '13:50', title: 'Metting', detail: 'Metting (German: Mettingen) is a commune in the Moselle department in Grand Est in north-eastern France.' } ], [ { dateStart: '10:30', dateEnd: '12:00', title: 'Metting', }, { dateStart: '12:30', dateEnd: '14:50', title: 'Metting', } ], [ { dateStart: '12:30', dateEnd: '13:30', title: 'Metting', }, { dateStart: '15:30', dateEnd: '16:50', title: 'Metting', } ], [ { dateStart: '09:50', dateEnd: '10:50', title: 'Metting', }, { dateStart: '11:30', dateEnd: '13:50', title: 'Metting', } ], [ { dateStart: '12:30', dateEnd: '13:30', title: 'Metting', }, { dateStart: '14:30', dateEnd: '15:50', title: 'Metting', } ] ] "
