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>