Implemented field `style` for both items and groups, to set a custom style for individual items.

HISTORY.md

@@ -17,6 +17,8 @@ http://visjs.org
 
 ### Timeline
 
+- Implemented field `style` for both items and groups, to set a custom style for
+  individual items.
 - Fixed height of BackgroundItems not being 100% when timeline has a fixed height.
 - Fixed width of BackgroundItems not being reduced to 0 when zooming out.
 

docs/timeline.html

@@ -149,7 +149,8 @@ The constructor accepts four parameters:
   The Timeline uses regular Arrays and Objects as data format.
   Data items can contain the properties <code>start</code>,
   <code>end</code> (optional), <code>content</code>,
-  <code>group</code> (optional), and <code>className</code> (optional).
+  <code>group</code> (optional), <code>className</code> (optional),
+  and <code>style</code> (optional).
 </p>
 
 <p>
@@ -162,7 +163,7 @@ var items = [
     start: new Date(2010, 7, 15),
     end: new Date(2010, 8, 2),  // end is optional
     content: 'Trajectory A'
-    // Optional: fields 'id', 'type', 'group', 'className'
+    // Optional: fields 'id', 'type', 'group', 'className', 'style'
   }
   // more items...
 ]);
@@ -235,6 +236,15 @@ var items = [
     <td>yes</td>
     <td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
   </tr>
+  <tr>
+    <td>style</td>
+    <td>String</td>
+    <td>no</td>
+    <td>
+      A css text string to apply custom styling for an individual item, for
+      example <code>"color: red; background-color: pink;"</code>.
+    </td>
+  </tr>
   <tr>
     <td>title</td>
     <td>String</td>
@@ -272,7 +282,7 @@ var groups = [
   {
     id: 1,
     content: 'Group 1'
-    // Optional: a field 'className'
+    // Optional: a field 'className', 'style'
   }
   // more groups...
 ]);
@@ -320,6 +330,15 @@ var groups = [
       property <code>group</code> which matches the <code>id</code>
       of the group.</td>
   </tr>
+  <tr>
+    <td>style</td>
+    <td>String</td>
+    <td>no</td>
+    <td>
+      A css text string to apply custom styling for an individual group label, for
+      example <code>"color: red; background-color: pink;"</code>.
+    </td>
+  </tr>
   <tr>
     <td>title</td>
     <td>String</td>

lib/timeline/component/Group.js

@@ -110,6 +110,16 @@ Group.prototype.setData = function(data) {
     util.addClassName(this.dom.axis, className);
     this.className = className;
   }
+
+  // update style
+  if (this.style) {
+    util.removeCssText(this.dom.label, this.style);
+    this.style = null;
+  }
+  if (data && data.style) {
+    util.addCssText(this.dom.label, data.style);
+    this.style = data.style;
+  }
 };
 
 /**

lib/timeline/component/item/Item.js

@@ -238,14 +238,14 @@ Item.prototype._updateTitle = function (element) {
  * @private
  */
 Item.prototype._updateStyle = function(element) {
-  // update style
-  if (this.data.style) {
-    if (this.style) {
-      // remove old styles
-      util.removeCssText(element, this.style);
-    }
+  // remove old styles
+  if (this.style) {
+    util.removeCssText(element, this.style);
+    this.style = null;
+  }
 
-    // append new styles
+  // append new styles
+  if (this.data.style) {
     util.addCssText(element, this.data.style);
     this.style = this.data.style;
   }

test/timeline.html

@@ -69,11 +69,10 @@
     fieldId: '_id'
   });
   items.add([
-    {_id: 0, content: 'item 0', start: now.clone().add(3, 'days').toDate(), title: 'hello title!', style: 'color: red;'},
-    //{_id: 0, content: 'item 0', start: now.clone().add(3, 'days').toDate(), title: 'hello title!'},
+    {_id: 0, content: 'item 0', start: now.clone().add(3, 'days').toDate(), title: 'hello title!'},
     {_id: '1', content: 'item 1<br>start', start: now.clone().add(4, 'days').toDate()},
     {_id: 2, content: 'item 2', start: now.clone().add(-2, 'days').toDate() },
-    {_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate()},
+    {_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate(), style: 'color: red;'},
     {
       _id: 4, content: 'item 4 ',
       start: now.clone().add(0, 'days').toDate(),