Vis.js only show working hours in timeline
Not sure how to do this, but I am using vis.js in my project and I need to display a business timeline. Is there a way to show only the hours of operation and not the entire 24 hours as evening hours are meaningless to my application.
I can't find options in the documentation to make this setting in my code settings.
source to share
The documentation you're looking for is an example "Hiding Periods": http://visjs.org/examples/timeline/other/hidingPeriods.html
To hide the weekend, you provide any weekend:
To hide the weekend, select any Saturday as the start and the next Monday at the end, and set it to repeat weekly.
To hide the time outside, for example From 9 AM to 5 PM, you provide a range of any arbitrary day with a start time of 5 PM and an end time of 9 PM:
{
start: '2017-03-04 17:00:00',
end: '2017-03-05 09:00:00',
repeat: 'daily'
}
Below is a small example:
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>
source to share