I coded timeline via vis.js. And I appended custom time item using by addCustomTime().

My situation is.

I want add fixed custom time, but It move when I drag it. Anbybody know how to prevent custom item move?

  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2013-04-20'},
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
  
  timeline.addCustomTime('2013-04-21'); // I want this item not moving.

<link href=".19.1/vis.min.css" rel="stylesheet"/>
<script src=".19.1/vis-timeline-graph2d.min.js"></script>

<div id="visualization"></div>

I coded timeline via vis.js. And I appended custom time item using by addCustomTime().

My situation is.

I want add fixed custom time, but It move when I drag it. Anbybody know how to prevent custom item move?

  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2013-04-20'},
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
  
  timeline.addCustomTime('2013-04-21'); // I want this item not moving.

<link href="https://cdnjs.cloudflare./ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/vis/4.19.1/vis-timeline-graph2d.min.js"></script>

<div id="visualization"></div>

• javascript
• css
• timeline
• vis.js

Share Improve this question Follow asked Apr 20, 2017 at 6:14 lv0gun9lv0gun9 62188 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

https://github./almende/vis/issues/1296

I added this code to css.

.vis-custom-time {
    pointer-events: none;
}

As @dapriett said in this ment in the GitHub issue that @lv0gun9 linked, you can do this instead:

timeline.addCustomTime(date, id)
timeline.customTimes[timeline.customTimes.length - 1].hammer.off("panstart panmove panend");

This disables the move events on the custom time element. With @lv0gun9's css solution you'll also disable the tooltip that tells you the element's precise date when hovering on it.