A simple, stylish calendar & schedule component for Vue.js applications.

Date _Time

Documentation

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', 				}  			] 		] 	"

change log

vue1.x


You May Also Like