I have a VisJS timeline ranging from January 2017-2018. The timeline opens centered on a three month range mid-year, but I would like it to open every time centered at the current time.

min: new Date(2017, 1, 5),           // lower limit of visible range
max: new Date(2018, 1, 11),          // upper limit of visible range
zoomMin: 1000 * 60 * 60 * 24,        // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24*31*3,   // three months in milliseconds

I have a VisJS timeline ranging from January 2017-2018. The timeline opens centered on a three month range mid-year, but I would like it to open every time centered at the current time.

min: new Date(2017, 1, 5),           // lower limit of visible range
max: new Date(2018, 1, 11),          // upper limit of visible range
zoomMin: 1000 * 60 * 60 * 24,        // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24*31*3,   // three months in milliseconds

• javascript
• vis.js
• vis.js-timeline

2 Answers 2

You may try with something like this (timeline.setWindow()):

const todayStart = new Date();
todayStart.setHours(8, 0, 0, 0);
const todayEnd = new Date();
todayEnd.setHours(18, 0, 0, 0);

console.log(todayStart, ':', todayEnd);
setTimeout(_ => {
  this.timeline.setWindow(todayStart, todayEnd, { animation: true });
});

or better with the moveTo

  this.timeline.moveTo(new Date());//or
  this.timeline.moveTo(new Date(), { animation: true });//or
  this.timeline.moveTo(new Date(), { animation: true }, (props) => {
    console.log("movedTo", props);
  });

you can use start and end on Configuration Options to achieve what you want.

var today = new Date(new Date().setHours(0,0,0,0));
var tomorrow = new Date(new Date().setHours(23,59,59,999)+1);

var options = {
    in: new Date(2018, 1, 5), 
    max: new Date(2019, 1, 11),    
    zoomMax: 1000 * 60 * 60 * 24*31*3, 
    start:today,
    end:tomorrow
};

I created a CodePen implementation of this specific solution.