POC-以jQuery實作會議室登記狀況顯示

//輸入起/迄整點、寬、高及是否顯示時間標題列，傳回顯示全日時段狀態的<div>

function genTimeline(startHour, endHour, width, height, incHeader) {

    $.Darkthread.tools.addDefaultStyles(".dttl_BookingBlock", {

        ".dttl_BookingBlock": {

            float: "left", position: "absolute",

            margin: "0px", padding: "0px", height: "100%",

            "font-size": "9pt", "background-color": "#dddddd",

            "border-left": "solid #444444 1px",

            "border-right": "solid #444444 1px"

        },

        ".dttl_Timeline": {

            border: "solid black 1px", position: "relative"

        },

        ".dttl_TimelineHeader": {

            border: "solid black 1px",

            backgroundColor: "#dddddd",

            "font-size": "8pt", position: "relative"

        },

        ".dttl_SplitLine": {

            float: "left", position: "absolute",

            "border-left": "solid gray 1px", 

            width: "1px", height: "100%"

        }

    });

    var $tl = $("<div class='dttl_Timeline' />");

    $tl.height(height).width(width);

    var hourWidth = width / (endHour - startHour);

    var $h = $("<div />");

    if (incHeader)

        $h.width(width).height(15).addClass("dttl_TimelineHeader");

    for (var i = startHour; i < endHour; i++) {

        var vLine =

            "<div class='dttl_SplitLine' style='left:" +

            hourWidth * (i - startHour) + "px;' />";

        $tl.append(vLine);

        if (incHeader)

            $h.append("<div>" + i + "</div>").append(vLine);

    }

    if (incHeader) {

        $h.find("div").css({

            float: "left", margin: "0px", width: hourWidth + "px", 

            textAlign: "center"

        });

    }

    var $container = $("<div class='dttl_Container' />");

    $container.append($h).append($tl)

    .data("hourWidth", hourWidth)

    .data("startHour", startHour)

    .data("endHour", endHour);

    return $container;

}

//display會直接顯示在方格中，可支援HTML語法

//detail以title="..."方式處理，請給純文字

//cssOption可為css屬性物件，例如: { border:"...", color:"..." }或是className

//會傳回<div> jQuery物件供後續應用

function addBooking(timeline, startTime, endTime, display, detail, cssOption) {

    if (cssOption == undefined || typeof cssOption == "string") 

        cssOption = { };

    var $tl = $(timeline);

    var sh = $tl.data("startHour"), eh = $tl.data("endHour");

    //將時間先轉成小數

    var p = startTime.split(':');

    var st = parseInt(p[0]) + (parseFloat(p[1]) / 60);

    //小於startHour, 以startHour為準

    if (st < sh) st = sh;

    p = endTime.split(':');

    var et = parseInt(p[0]) + (parseFloat(p[1]) / 60);

    //大於endHour, 以endHour為準

    if (et > eh) et = eh;

    //算出起始位置及寬度

    var hw = $tl.data("hourWidth");

    var w = (et - st) * hw;

    var x = (st - sh) * hw;

    //加入顯示元素

    var $container = $tl.children("div:last");

    var $dv = $("<div class=\"dttl_BookingBlock\"/>");

    $dv.css(cssOption).css({ 

        left: x + "px", width: w + "px",

        opacity: 0.7

    });

    $dv.html("<span style='padding: 2px;'>" + display + "</span>")

    .attr("title", startTime + "-" + endTime + "\n" + detail);

    if (typeof cssOption == "string")

        $dv.addClass(cssOption);

    $container.append($dv);

    return $dv;

}

<script src="jquery-1.4.2.js" type="text/javascript"></script>

<script src="jquery.darkthread.tools.js" type="text/javascript"></script>

<script src="TimelineUtil.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function() {

        var $d = genTimeline(9, 21, 800, 30, true);

        $("body").append($d);

        var $booking;

        //truncText可幫忙取前10個字            

        var longText = "超長文字測試，利用truncDetail()取前10個字元";

        $booking = addBooking($d, "14:30", "17:00",

            $.Darkthread.tools.truncText(longText, 10), longText);

        //允許重疊顯示

        $booking = addBooking($d, "16:30", "20:00", "來亂的", "咬我呀!");

  //cssOption可指定CSS

        var cssOption = { backgroundColor: "green", color: "yellow" };

        $booking = addBooking($d, "09:30", "10:00", "Jeffrey", 

                              "重要會議", cssOption);

        //cssOption傳入字串時，視為className

        $booking = addBooking($d, "10:30", "12:00", 

                                "Meeting", "MouseOver特效", "booking");

        //addBooking會傳回<div>的jQuery物件，可進行加上hover/click事件等操作

        $booking.hover(function() {

            $(this).addClass("inverse");

        }, function() {

            $(this).removeClass("inverse");

        }).css("cursor", "pointer").click(function() {

            alert("Hi!");

        });

        //產生100條時間軸各有12筆登錄，測試速度

        var $tbl = $(

        "<table cellspacing='0' cellpadding='0' style='margin-top: 10px;' />");

        for (var i = 0; i < 100; i++) {

            $tr = $("<tr><td width='10%' /><td width='90%' /></tr>");

            $tr.find("td:first").text("Room" + i);

            var $timeline = genTimeline(9, 21, 800, 30, i == 0);

            $tr.find("td:last").append($timeline);

            $tbl.append($tr);

            for (var j = 9; j < 21; j++) {

                $booking = addBooking($timeline, j + ":00", j + ":30", 

                    "Test-" + i + "-" + j, "Test");

            }

        }

        $("body").append($tbl);

    });

</script>

<style type="text/css">

    .booking

    {

        background-color: Green;

        color: Yellow;

    }

    div.inverse 

    {

        background-color: black;

        color: White;

    }

</style>