Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center Vis.js timeline on current date on open

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
like image 680
user7631026 Avatar asked Oct 06 '17 18:10

user7631026


People also ask

How to use the timeline option template function?

The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field content. See section Templates for a detailed explanation. Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'background'.

How do I use the timeline in HTML?

The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key. An array of fields optionally defined on the timeline items that will be appended as data- attributes to the DOM element of the items.

What is the use of time in SharePoint?

This can be used for example to ensure that a client's time is synchronized with a shared server time. time can be a Date object, numeric timestamp, or ISO date string. Only applicable when option showCurrentTime is true.

What does the width of the timeline option do?

The width of the timeline in pixels or as a percentage. Specifies whether the Timeline can be zoomed by pinching or scrolling in the window. Only applicable when option moveable is set true .


1 Answers

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);
  });
like image 136
Lukasz 'Severiaan' Grela Avatar answered Oct 03 '22 13:10

Lukasz 'Severiaan' Grela