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