Vis.js show only business hours in timeline

Question

Not sure how to go about it but I'm using vis.js in my project and I need to display a timeline of the open hours of a business. Is there a way to show only the business hours and not the whole 24 hours as having evening hours is pointless for my application.

I cannot seem to find options in the documentation to make this setting in my code options.

Answer 1

The documentation you are looking for is the 'Hiding Periods' example: http://visjs.org/examples/timeline/other/hidingPeriods.html

To hide weekends you provide any weekend dates per:

To hide a weekend, pick any Saturday as start and the following Monday as end and set repeat to weekly.

To hide times outside of e.g. 9am to 5pm you provide a range of any arbitrary day with a start time of 5pm and a finish time of 9pm:

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

Here is a small example below:

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>