Vis.js只顯示時間軸上的營業時間

Question

不知道如何去做，但我在項目中使用vis.js，我需要顯示業務營業時間的時間表。有沒有辦法只顯示工作時間，而不是整個24小時，因爲晚上的工作時間對我的申請毫無意義。

我似乎無法在我的代碼選項中找到文檔中的選項來進行此設置。

Answer 1

你正在尋找的是「隱藏期」例如文檔：http://visjs.org/examples/timeline/other/hidingPeriods.html

要隱藏週末，你提供每任何週末日期：

要隱藏一個週末，隨便選週六開始和接下來的星期一結束並重復設置爲每週。

隱藏時間以外的時間上午9點至下午5點你提供一系列的任意一天中的下午5點開始時間和晚上9點的完成時間：

{ 
    start: '2017-03-04 17:00:00', 
    end: '2017-03-05 09:00:00', 
    repeat: 'daily' 
} 

這裏是下面一個小例子：

var container = document.getElementById('timeline'); 
 

 
// sample timeline entry 
 
var items = new vis.DataSet([{ 
 
    id: 1, 
 
    content: 'foo', 
 
    start: '2017-06-13 10:00:00', 
 
    end: '2017-06-13 16:30:00' 
 
}]); 
 

 
// Configuration for the Timeline 
 
var options = { 
 
    // hide weekends - use any weekend and repeat weekly 
 
    hiddenDates: [{ 
 
     start: '2017-03-04 00:00:00', 
 
     end: '2017-03-06 00:00:00', 
 
     repeat: 'weekly' 
 
    }, 
 
    // hide outside of 9am to 5pm - use any 2 days and repeat daily 
 
    { 
 
     start: '2017-03-04 17:00:00', 
 
     end: '2017-03-05 09:00:00', 
 
     repeat: 'daily' 
 
    } 
 
    ], 
 
    // start and end of timeline 
 
    start: '2017-06-01', 
 
    end: '2017-06-30', 
 
    height: '140px', 
 
    editable: false 
 
}; 
 

 
// Create a Timeline 
 
var timeline = new vis.Timeline(container, items, options);

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script> 
 

 
<h3>Mon-Fri 9am to 5pm working hours timeline example</h3> 
 
<div id="timeline"></div>