Fixed #869: add className with id to custom time bars

HISTORY.md

@@ -21,14 +21,8 @@ http://visjs.org
 
 ### Graph2d & Timeline
 
-- Fixed #858, removed usage of deprictated unsubscribe from dataset.
-
-
-## not yet released, version 4.0.1-SNAPSHOT
-
-### Timeline, Graph2d
-
-- Fixed #872: error about deprecated function `unsubscribe`.
+- Fixed #858, #872, fixed usage of deprecated `unsubscribe` from DataSet.
+- Fixed #869: add className with id to custom time bars
 
 
 ## 2015-05-22, version 4.0.0

docs/timeline/index.html

@@ -935,8 +935,9 @@ function (option, path) {
       <td>
         Add new vertical bar representing a custom time that can be dragged by the user.
         Parameter <code>time</code> can be a Date, Number, or String, and is <code>new Date()</code> by default.
-        Parameter <code>id</code> can be Number or String and is <code>undefined</code> by default.<br>
-        Returns id of the created bar.
+        Parameter <code>id</code> can be Number or String and is <code>undefined</code> by default.
+        The <code>id</code>code> is added as CSS class name of the custom time bar, allowing to style multiple time bars differently.
+        The method returns id of the created bar.
       </td>
     </tr>
 

examples/timeline/other/customTimeBars.html

@@ -25,7 +25,7 @@
 </p>
 <p>
   <input type="button" id="remove" value="Remove custom vertical bar">
-  <input type="text" id="barIndex" value="1" placeholder="custom bar ID">
+  <input type="text" id="barIndex" value="t1" placeholder="custom bar ID">
 </p>
 <p>
   <code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
@@ -49,7 +49,7 @@
 
   // Set first time bar
   customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
-  timeline.addCustomTime(customDate, '1');
+  timeline.addCustomTime(customDate, 't1');
 
   document.getElementById('add').onclick = function () {
     try {

lib/timeline/component/CustomTime.js

@@ -34,10 +34,10 @@ function CustomTime (body, options) {
   
   this.eventParams = {}; // stores state parameters while dragging the bar
 
+  this.setOptions(options);
+
   // create the DOM
   this._create();
-
-  this.setOptions(options);
 }
 
 CustomTime.prototype = new Component();
@@ -63,7 +63,7 @@ CustomTime.prototype.setOptions = function(options) {
 CustomTime.prototype._create = function() {
   var bar = document.createElement('div');
   bar['custom-time'] = this;
-  bar.className = 'vis-custom-time';
+  bar.className = 'vis-custom-time ' + (this.options.id || '');
   bar.style.position = 'absolute';
   bar.style.top = '0px';
   bar.style.height = '100%';