Vue.js file schedule component
npm install vue-schedule --save
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> var Vue = require('vue');
var Schedule = require('vue-schedule');
new Vue({
el: '#app',
components: {
Schedule: Schedule,
}
}) import Vue from 'vue';
import Schedule from 'vue-schedule';
new Vue({
el: '#app',
components: {
Schedule: Schedule,
}
})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',
}
]
]
"
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent