分享一个自己写的vue组件#vue-schedule#

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: '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

    var Vue = require('vue');
    var Schedule = require('vue-schedule');
    new Vue({
        el: '#app',
        components: {
            Schedule: Schedule,
        }
    })

ES6

    import Vue from 'vue';
    import Schedule from 'vue-schedule';
    new Vue({
        el: '#app',
        components: {
            Schedule: Schedule,
        }
    })

props

time-ground:时间范围
示例

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

week-ground:星期
示例

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

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