timetable

功能描述

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

依赖的模块

无

快速使用

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

  1. //code

相关html 结构

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

主要css样式

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

关键js接口

  2.     //准备课表数据：本地或网络获取
  3.     //列表坚向显示
  4.     var courseList = [
  5.         ['英语', '英语', '', '', '', '', '数学', '数学', '', '', '', '选修'],
  6.         ['', '', '信号与系统', '信号与系统', '模拟电子技术基础', '模拟电子技术基础', '', '', '', '', '', ''],
  7.         ['大学体育', '大学体育', '形势与政策', '形势与政策', '', '', '电路、信号与系统实验', '电路、信号与系统实验', '', '', '', ''],
  8.         ['', '', '', '', '电装实习', '电装实习', '', '', '', '大学体育', '大学体育', ''],
  9.         ['', '', '数据结构与算法分析', '数据结构与算法分析', '', '', '', '', '信号与系统', '信号与系统', '', ''],
  10.     ];
  12.     //课表顶部周数据
  13.     var week = window.innerWidth > 360 ? ['周一', '周二', '周三', '周四', '周五'] :
  14.         ['一', '二', '三', '四', '五'];
  16.     //当前星期几
  17.     var day = new Date().getDay();
  19.     //课表左侧时间数据
  20.     var courseType = [
  21.         [{index: '1', name: '8:30'}, 1], //index: 序号, name:  显示的名称, 1: 占几个坚向的单元格
  22.         [{index: '2', name: '9:30'}, 1],
  23.         [{index: '3', name: '10:30'}, 1],
  24.         [{index: '4', name: '11:30'}, 1],
  25.         [{index: '5', name: '12:30'}, 1],
  26.         [{index: '6', name: '14:30'}, 1],
  27.         [{index: '7', name: '15:30'}, 1],
  28.         [{index: '8', name: '16:30'}, 1],
  29.         [{index: '9', name: '17:30'}, 1],
  30.         [{index: '10', name: '18:30'}, 1],
  31.         [{index: '11', name: '19:30'}, 1],
  32.         [{index: '12', name: '20:30'}, 1]
  33.     ];
  35.     var Timetable = new Timetables({
  36.         el: '#timetable_id',       //课表dom元素id
  37.         timetables: courseList,    //课表数据
  38.         week: week,                //课表顶部周数据
  39.         timetableType: courseType, //课表左侧时间数据
  40.         highlightWeek: day,        //高亮显示的周几
  41.         merge: true,               //是否合并同样课程的单元格
  42.         gridOnClick: function (e) {//点击课表中的课程显示详情
  43.             alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
  44.         },
  45.         styles: {
  46.             Gheight: 50            //自定义表格高度
  47.         }
  48.     });

特别说明

无