How to create vis.js timeline without gaps

Question

I am working with the vis.js timeline (http://visjs.org/docs/timeline/).

I want to achieve that it is not possible to have gaps between the elements.

If someone is removing an element between other elements the and adding a new element to the gap the new element should auto-fit into the gap.
If someone is updating the time (size) of an element by resizing, it should also auto fit to the next element.
I need an validation that all elements in all groups are filled between a given date range.

These are my editable options:

 editable: {
     add: true,         // add new items by double tapping
     updateTime: true,  // drag items horizontally
     updateGroup: false, // drag items from one group to another
     remove: true,       // delete an item by tapping the delete button top right
     overrideItems: false  // allow these options to override item.editable
 },

It is not allowed to move the elements between the groups.

My first guess is to use the onMove function but I couldn't figure out how to find the previous and next element do adjust the start and end.

Maybe someone else had the same problem and found a solution.

If I remember correctly, the timeline elements should be fully customizable with CSS. Have you tried styling with CSS rather than JS? — Jeff
Its not an styling issue, I'm using the timeline as an UI for creating / updating elements — julian.danz

João Menighin João Menighin · Accepted Answer · 2018-04-03T01:18:20

I had a similar scenario in which dragging an element would rearrenge all the others and dragging an element to another group would make it snap just after the last element.

There is no easy option to set to do this. Basically you have to listen to these events and keep track of where are your elements in order to update it.

For example, in your first case what you have to do is:

Listen for onAdd() event
Search through the elements of that group where this new element will be created by looking at the start and end times.
Update this new item to have the start equals to the end of the previous element and have the end equals to the start of the next element.

Here's a simple JS Fiddle to get you started: http://jsfiddle.net/rj35mbvd/

In this fiddle, everytime you try to add an item, it is added between the two elements already present in the timeline.

How to create vis.js timeline without gaps

2 Answers