Merge pull request #1307 from Abrazan/custom-timeline-title

Added possibility to change (or hide) the title of a CustomTime element.

docs/timeline/index.html

@@ -1196,6 +1196,15 @@ document.getElementById('myTimeline').onclick = function (event) {
       </td>
     </tr>
 
+    <tr>
+      <td>setCustomTimeTitle(title [, id])</td>
+      <td>none</td>
+      <td>Adjust the title attribute of a custom time bar.
+        Parameter <code>title</code> is the string to be set as title. Use empty string to hide the title completely.
+        Parameter <code>id</code> is the id of the custom time bar, and is <code>undefined</code> by default.
+      </td>
+    </tr>
+
     <tr>
       <td>setData({<br>&nbsp;&nbsp;groups: groups,<br>&nbsp;&nbsp;items: items<br>})</td>
       <td>none</td>

lib/timeline/Core.js

@@ -409,6 +409,24 @@ Core.prototype.getCustomTime = function(id) {
   return customTimes[0].getCustomTime();
 };
 
+/**
+ * Set a custom title for the custom time bar.
+ * @param {String} [title] Custom title
+ * @param {number} [id=undefined]    Id of the custom time bar.
+ */
+Core.prototype.setCustomTimeTitle = function(title, id) {
+  var customTimes = this.customTimes.filter(function (component) {
+    return component.options.id === id;
+  });
+
+  if (customTimes.length === 0) {
+    throw new Error('No custom time bar found with id ' + JSON.stringify(id))
+  }
+  if (customTimes.length > 0) {
+    return customTimes[0].setCustomTitle(title);
+  }
+};
+
 /**
  * Retrieve meta information from an event.
  * Should be overridden by classes extending Core

lib/timeline/component/CustomTime.js

@@ -23,16 +23,17 @@ function CustomTime (body, options) {
     moment: moment,
     locales: locales,
     locale: 'en',
-    id: undefined
+    id: undefined,
+    title: undefined
   };
   this.options = util.extend({}, this.defaultOptions);
 
   if (options && options.time) {
     this.customTime = options.time;
   } else {
-    this.customTime = new Date();  
+    this.customTime = new Date();
   }
-  
+
   this.eventParams = {}; // stores state parameters while dragging the bar
 
   this.setOptions(options);
@@ -123,8 +124,12 @@ CustomTime.prototype.redraw = function () {
     locale = this.options.locales['en']; // fall back on english when not available
   }
 
-  var title = locale.time + ': ' + this.options.moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
-  title = title.charAt(0).toUpperCase() + title.substring(1);
+  var title = this.options.title;
+  // To hide the title completely use empty string ''.
+  if (title === undefined) {
+    title = locale.time + ': ' + this.options.moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
+    title = title.charAt(0).toUpperCase() + title.substring(1);
+  }
 
   this.bar.style.left = x + 'px';
   this.bar.title = title;
@@ -159,6 +164,14 @@ CustomTime.prototype.getCustomTime = function() {
   return new Date(this.customTime.valueOf());
 };
 
+/**
+  * Set custom title.
+  * @param {Date | number | string} title
+  */
+CustomTime.prototype.setCustomTitle = function(title) {
+  this.options.title = title;
+};
+
 /**
  * Start moving horizontally
  * @param {Event} event