Vue.js file schedule component

install

npm install vue-schedule --save

Example

http://jayzou.github.io/demo/vue-schedule/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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: '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.'
				}
				
			]
		]">
			
	</Schedule>
</div>

CommonJS

1
2
3
4
5
6
7
8
var Vue = require('vue');
var Schedule = require('vue-schedule');
new Vue({
    el: '#app',
    components: {
        Schedule: Schedule,
    }
})

ES6

1
2
3
4
5
6
7
8
import Vue from 'vue';
import Schedule from 'vue-schedule';
new Vue({
    el: '#app',
    components: {
        Schedule: Schedule,
    }
})

props

time-ground:时间范围
示例

1
:time-ground="['09:00', '18:00']"

week-ground:星期
示例

1
:week-ground="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']"

task-detail:具体事项，具体事项需要与星期对应
示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
: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',
			}
		
		]
	]
"