首页 > 代码库 > 介绍一款时间表(TimeTable)的用法

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

前言

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

step0

引入相关的css及js文件

<link href="http://www.mamicode.com/css/bootstrap.css" rel="stylesheet" />
    <link href="http://www.mamicode.com/css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="http://www.mamicode.com/css/docs.css" rel="stylesheet" />
    <link href="http://www.mamicode.com/css/tribal-bootstrap.css" rel="stylesheet" />
    <link href="http://www.mamicode.com/css/tribal-timetable.css" rel="stylesheet" />

    <script type="text/javascript" src="http://www.mamicode.com/js/jquery-latest.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/jquery.ba-resize.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/bootstrap-tooltip.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/bootstrap-collapse.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/tribal.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/tribal-shared.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/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

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