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

最新推荐文章于 2025-03-06 15:38:47 发布

weixin_34128501

最新推荐文章于 2025-03-06 15:38:47 发布

阅读量1k

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000007565231

版权

本文介绍了一个基于Vue.js的日程安排组件的使用方法及配置选项。通过安装vue-schedule包，开发者可以轻松地在应用中集成日程表功能。文章提供了具体的配置参数示例，包括设置时间范围、工作日和任务详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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