介绍一款时间表(TimeTable)的用法

前言

最近在为某培训机构开发教务管理系统，其中遇到的比较多的就是课表的展示，在google中搜索一番之后，找到了一款比较好的timetable，所以和大家一起分享一下。
在线demo: http://timetable.askblog.net/Timetable.htm

step0

引入相关的css及js文件

<link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="css/docs.css" rel="stylesheet" />
    <link href="css/tribal-bootstrap.css" rel="stylesheet" />
    <link href="css/tribal-timetable.css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.ba-resize.js"></script>
    <script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
    <script type="text/javascript" src="js/bootstrap-collapse.js"></script>
    <script type="text/javascript" src="js/tribal.js"></script>
    <script type="text/javascript" src="js/tribal-shared.js"></script>
    <script type="text/javascript" src="js/tribal-timetable.js"></script>

step1

timetable主体有三部分组成：横轴的时间分段，纵轴的日期分段以及主体的事件。

横轴显示为：

<div class="tt-times">
    <div class="tt-time" data-time="0">
                    09<span class="hidden-phone">.00</span></div>
                ...
</div>

纵轴显示为：

<div class="tt-days">
                <div class="tt-day" data-day="0">
                    11-11</div>
                ...

</div>

主体显示为：

<div class="timetable" data-days="8" data-hours="8">
            <ul class="tt-events">
                <li class="tt-event btn-success"  data-day="0" data-start="0" data-duration="2.5">
                    数理统计<br />
                    09:00 - 11:30<br />
                    金老师</li>
                    ....
            </ul>
</div>

data-days中指定了纵轴的日期的范围大小，而data-hours中指定了横轴的时间范围大小。
主体事件中相关字段的解释如下：

• data-day 事件序号
• data-start 非常重要的字段即事件的开始时间，后面介绍具体的计算方法
• data-duration 顾名思义即为事件的持续时间

关于data-start的计算
(当前事件的开始时间 - 横轴的开始时间) / 3600s 从而获得小时数

总结

本文主要介绍了一款基于Bootstrap的时间表timetable的用法，以及托管在github上的示例代码。

代码

• https://github.com/gschen/timetable

引用

• http://static.triballabs.net/Bootstrap/Timetable.htm