HTML jQuery 日程時間
使用 HTML jQuery 日程時間插件可以幫助您輕松創建自己的日程時間表。這個插件可以允許您定義一天中的時間段，并且以可視化方式呈現出來。
首先，需要在網頁的頭部引入 jquery 和 jquery.schedule.js文件。代碼如下：
<head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="jquery.schedule.js"></script> </head>接下來，需要定義一個 HTML
元素作為插件的容器，以及插件所需的日程數據。代碼如下：
<div id="schedule"></div>
<script>
var schedules = [
{
start: "08:00",
end: "09:00",
text: "早上會議"
},
{
start: "13:00",
end: "14:30",
text: "午餐時間"
},
{
start: "15:00",
end: "18:00",
text: "下午工作時間"
}
];
$("#schedule").schedule({
widthTime: 60, // 時間間隔，默認60（分鐘）
colors: {
// 一天中的不同時間段不同的顏色
header: "#fff",
timecell: "#f3f3f3",
default: "#fff",
actived: "#ffcc66",
disabled: "#666"
},
sections: [
{ name: "客戶部門", start: "08:00", end: "18:00" },
{ name: "IT部門", start: "08:00", end: "18:00" },
],
startTime: "08:00", // 工作開始時間
endTime: "18:00", // 工作結束時間
times: schedules, //日程時間數組
});
</script>最后，打開頁面即可看到您所定義的日程時間表。
在以上代碼中，我們定義了三個日程時間，分別是早上會議、午餐時間、下午工作時間。通過設置不同的起始時間和結束時間，可以幫助我們輕松創建一個精細的日程時間表。
總之， HTML jQuery 日程時間插件為我們提供了一種非常簡單有效的方式來組織我們的日程安排，讓我們可以輕松地記錄和管理我們的工作任務。