//輸入起/迄整點、寬、高及是否顯示時間標題列，傳回顯示全日時段狀態的<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;
}