From d77275e3d1b3f1b105bf90c01864ed7e42720be9 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Tue, 26 May 2015 09:47:06 +0200
Subject: [PATCH] Fixed #869: add className with id to custom time bars

---
 HISTORY.md                                  | 10 ++--------
 docs/timeline/index.html                    |  5 +++--
 examples/timeline/other/customTimeBars.html |  4 ++--
 lib/timeline/component/CustomTime.js        |  6 +++---
 4 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index 528c5840..a664ec4b 100644
--- a/HISTORY.md
+++ b/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
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 84d320b7..4f92289e 100644
--- a/docs/timeline/index.html
+++ b/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>
 
diff --git a/examples/timeline/other/customTimeBars.html b/examples/timeline/other/customTimeBars.html
index 4794904c..37310165 100644
--- a/examples/timeline/other/customTimeBars.html
+++ b/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 {
diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js
index 8efdb8ca..86aec043 100644
--- a/lib/timeline/component/CustomTime.js
+++ b/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%';