How to get the latest end date in DataSet Items withe vis.js Timeline

Question

I have implemented a timeline using vis.js with the following options :

  var timeline_items = new vis.DataSet();
  var timeline_groups = new vis.DataSet();

  var start = new Date(1970, 0, 1, 0, 0, 0, 0);
  var end = new Date(1970, 00, 01, 0, 1, 0, 0);

  var options = {
      zoomKey: "ctrlKey",
      horizontalScroll: true,
      verticalScroll: true,
      orientation: "top",
      moveable: true,
      zoomable : true,
      editable: true,
      min: start,
      max: end,
      start: start,
      end: end,
      zoomMax: 10000000,
      zoomMin: 1000,
      stack:false,
      showCurrentTime: true,
      multiselect: true,
      multiselectPerGroup: true,
  };

The timeline works perfectly for a video editor timeline with the options. Now I intend to get the latest available date in the timeline for the case of a drag & drop action :

function handleDragStart(event) {
  event.target.id = event.currentTarget.id;
  event.target.addEventListener('dragend', handleDragEnd, false);
}

function handleDragEnd(event) {
  newItem_dropped = $("#" + event.target.id);
  var latest_date  = options.min;
  for (var i = 0; i < timeline_items.get().length; i++) {
    if (latest_date < timeline_items.get()[i].end) {
      latest_date = timeline_items.get()[i].end;
    }
  }

  var start = Math.round((latest_date - options.min));
  var end   = Math.round((latest_date - options.min)) + 
                $(newItem_dropped).attr('data-entity-segment-end') - 
                $(newItem_dropped).attr('data-entity-segment-start');
  var link  = $(newItem_dropped).attr('data-src');

  parsed_start = parseMillisecondsIntoReadableTime(start);
  parsed_end   = parseMillisecondsIntoReadableTime(end);

  timeline_items.add({
    id: $(newItem_dropped).attr('id'),
    group: "timeline_video_group_id", // truck,
    start: new Date(1970, 0, 1, parsed_start[0], parsed_start[1], parsed_start[2], 
                    parsed_start[3]),
    end: new Date(1970, 0, 1, parsed_end[0], parsed_end[1], parsed_end[2], 
                  parsed_end[3]),
    content: "<img src='" + link + "'></img>",
    className: 'imagecontainer'
  });
}

Particularly, in the DragEnd function I try to to calculate latest date for the items in the DataSet for the timeline, but it does not calculate it correctly.

How should I get the latest available date in the timeline ?

Answer 1

Adding this function for getting latest date available solved my problem :

function rearrange_timeline_min_max_value()
{
    console.log("timeline_get_latest_date start");
    var rearranged_timeline_date = timeline_get_latest_date();

    if (rearranged_timeline_date < new Date(1970, 0, 1, 00, 01, 00, 000)) {
        rearranged_timeline_date.setSeconds(60);
    } else if (options.max < timeline_get_latest_date()) {
        console.log("timeline_get_latest_date atest data before : " + timeline_get_latest_date());

        rearranged_timeline_date.setSeconds(
            rearranged_timeline_date.getSeconds() + 30
        );

        console.log("timeline_get_latest_date atest data after : " + timeline_get_latest_date());
    }

    timeline.setOptions({min: new Date(1970, 0, 1, 00, 00, 00, 000),
                         max: rearranged_timeline_date});
    timeline.fit();
    timeline.redraw();
    console.log("timeline_get_latest_date end");
}