Added id parameter to set/getCustomTime methods, docs update

docs/timeline.html

@@ -910,9 +910,9 @@ timeline.clear({options: true}); // clear options only
   </tr>
 
   <tr>
-    <td>getCustomTime()</td>
+    <td>getCustomTime([id])</td>
     <td>Date</td>
-    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
+    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true. If parameter <code>id</code> is provided, time of the custom time bar under that ID is returned.
     </td>
   </tr>
 
@@ -965,6 +965,14 @@ timeline.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr>
+    <td>removeCustomTime(id)</td>
+    <td>none</td>
+    <td>
+      Remove vertical bars previously added to the timeline via <code>addCustomTime</code> method. Parameter <code>id</code> is the ID of the custom vertical bar returned by <code>addCustomTime</code> method.
+    </td>
+  </tr>
+
   <tr>
     <td>setCurrentTime(time)</td>
     <td>none</td>
@@ -974,9 +982,9 @@ timeline.clear({options: true}); // clear options only
   </tr>
 
   <tr>
-    <td>setCustomTime(time)</td>
+    <td>setCustomTime(time [, id])</td>
     <td>none</td>
-    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
+    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method.
     </td>
   </tr>
 

examples/timeline/34_add_custom_timebar.html

@@ -21,7 +21,7 @@
 </p>
 <p>
   <input type="button" id="remove" value="Remove custom vertical bar" />
-  <input type="text" id="barIndex" value="0" />
+  <input type="text" id="barIndex" value="1" />
 </p>
 <p>
   <code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span> event: <span id="timechangeEvent"></span>
@@ -44,6 +44,10 @@
   };
   var timeline = new vis.Timeline(container, items, options);
 
+  // Set first time bar
+  customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
+  timeline.addCustomTime(customDate);
+
   document.getElementById('add').onclick = function () {
     customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
     timeline.addCustomTime(customDate);

lib/timeline/Core.js

@@ -282,25 +282,42 @@ Core.prototype.destroy = function () {
 /**
  * Set a custom time bar
  * @param {Date} time
+ * @param {int} id
  */
-Core.prototype.setCustomTime = function (time) {
+Core.prototype.setCustomTime = function (time, id) {
   if (!this.customTime) {
     throw new Error('Cannot get custom time: Custom time bar is not enabled');
   }
 
-  this.customTime.setCustomTime(time);
+  var barId = util.option.asNumber(id) || 0;
+
+  this.components.forEach(function (element, index, components) {
+    if (element instanceof CustomTime && element.options.id === barId) {
+      element.setCustomTime(time);
+    }
+  });
 };
 
 /**
  * Retrieve the current custom time.
  * @return {Date} customTime
+ * @param {int} id
  */
-Core.prototype.getCustomTime = function() {
+Core.prototype.getCustomTime = function(id) {
   if (!this.customTime) {
     throw new Error('Cannot get custom time: Custom time bar is not enabled');
   }
 
-  return this.customTime.getCustomTime();
+  var barId = util.option.asNumber(id) || 0,
+      customTime = this.customTime.getCustomTime();;
+
+  this.components.forEach(function (element, index, components) {
+    if (element instanceof CustomTime && element.options.id === barId) {
+      customTime = element.getCustomTime();
+    }
+  });
+
+  return customTime;
 };
 
 /**
@@ -355,9 +372,13 @@ Core.prototype.removeCustomTime = function (id) {
 
   this.components.forEach(function (bar, index, components) {
     if (bar instanceof CustomTime && bar.options.id === id) {
-      reduceLastId();
-      components.splice(index, 1);
-      bar.destroy();
+
+      // Only the lines added by the user will be removed
+      if (bar.options.id > 0) {
+        reduceLastId();
+        components.splice(index, 1);
+        bar.destroy();
+      }
     }
   });
 };