timetable

功能描述

本插件是在第三方插件修改而来，提供显示课表，备忘录等自定义显示效果。用例参见 example 目录

依赖的插件

无

快速使用

页面中引入timetable.js 和 timetable_skin1.css或timetable_skin2.css 样式可自已覆盖参考example页面

//code

相关html 结构

    <div id="timetable_id" class="timetable"></div>

主要css样式

    .timetable {padding: 15px 10px;} //课表容器相关

关键js接口


    //准备课表数据：本地或网络获取
    //列表坚向显示
    var courseList = [
        ['英语', '英语', '', '', '', '', '数学', '数学', '', '', '', '选修'],
        ['', '', '信号与系统', '信号与系统', '模拟电子技术基础', '模拟电子技术基础', '', '', '', '', '', ''],
        ['大学体育', '大学体育', '形势与政策', '形势与政策', '', '', '电路、信号与系统实验', '电路、信号与系统实验', '', '', '', ''],
        ['', '', '', '', '电装实习', '电装实习', '', '', '', '大学体育', '大学体育', ''],
        ['', '', '数据结构与算法分析', '数据结构与算法分析', '', '', '', '', '信号与系统', '信号与系统', '', ''],
    ];

    //课表顶部周数据
    var week = window.innerWidth > 360 ? ['周一', '周二', '周三', '周四', '周五'] :
        ['一', '二', '三', '四', '五'];

    //当前星期几
    var day = new Date().getDay();

    //课表左侧时间数据
    var courseType = [
        [{index: '1', name: '8:30'}, 1], //index: 序号, name:  显示的名称, 1: 占几个坚向的单元格
        [{index: '2', name: '9:30'}, 1],
        [{index: '3', name: '10:30'}, 1],
        [{index: '4', name: '11:30'}, 1],
        [{index: '5', name: '12:30'}, 1],
        [{index: '6', name: '14:30'}, 1],
        [{index: '7', name: '15:30'}, 1],
        [{index: '8', name: '16:30'}, 1],
        [{index: '9', name: '17:30'}, 1],
        [{index: '10', name: '18:30'}, 1],
        [{index: '11', name: '19:30'}, 1],
        [{index: '12', name: '20:30'}, 1]
    ];
    
    var Timetable = new Timetables({
        el: '#timetable_id',       //课表dom元素id
        timetables: courseList,    //课表数据
        week: week,                //课表顶部周数据
        timetableType: courseType, //课表左侧时间数据
        highlightWeek: day,        //高亮显示的周几
        merge: true,               //是否合并同样课程的单元格
        gridOnClick: function (e) {//点击课表中的课程显示详情
            alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
        },
        styles: {
            Gheight: 50            //自定义表格高度
        }
    });

特别说明

无

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24