diff --git a/docs/timeline.html b/docs/timeline.html index d537db95..0b1cf53c 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -1344,6 +1344,67 @@ To load a locale into the Timeline not supported by default, one can add a new l </style> +

Grid Backgrounds

+

+ The background grid of the time axis can be styled, for example to highlight + weekends or to create grids with an alternating white/lightgray background. +

+

+ Depending on the zoom level, the grids get certain css classes attached. + The following classes are available: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Descriptionvalues
Alternating columnseven, odd
Current datetoday, tomorrow, yesterday, current-week, current-month, current-year
Hours0h, 1h, ..., 23h
Grouped hours0-4h to 20-24h
Weekdaymonday, tuesday, wednesday, thursday, friday, saturday, sunday
Daysdate1, date2, ..., date31
Monthsjanuari, februari, march, april, may, june, july, august, september, october, november, december
Yearsyear2014, year2015, ...
+ +

Examples:

+ + 
<style>
+  /* alternating column backgrounds */
+  .vis.timeline .timeaxis .grid.odd {
+    background: #f5f5f5;
+  }
+
+  /* gray background in weekends, white text color */
+  .vis.timeline .timeaxis .grid.saturday,
+  .vis.timeline .timeaxis .grid.sunday {
+    background: gray;
+  }
+  .vis.timeline .timeaxis .text.saturday,
+  .vis.timeline .timeaxis .text.sunday {
+    color: white;
+  }
+</style>
+
+ +

Data Policy

All code and data is processed and rendered in the browser. diff --git a/examples/timeline/32_grid_styling.html b/examples/timeline/32_grid_styling.html new file mode 100644 index 00000000..ac4506c0 --- /dev/null +++ b/examples/timeline/32_grid_styling.html @@ -0,0 +1,53 @@ + + + + Timeline | Grid styling + + + + + + + +

+ + + + \ No newline at end of file diff --git a/examples/timeline/index.html b/examples/timeline/index.html index c02c1182..37912cd4 100644 --- a/examples/timeline/index.html +++ b/examples/timeline/index.html @@ -42,6 +42,7 @@

29_hiding_times.html

30_subgroups.html

31_background_areas_with_groups.html

+

32_grid_styling.html

requirejs_example.html

diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js index 4ba64bc0..ffe3f9de 100644 --- a/lib/timeline/TimeStep.js +++ b/lib/timeline/TimeStep.js @@ -581,9 +581,9 @@ TimeStep.prototype.getClassName = function() { today(date) + currentWeek(date) + even(date.date()); case 'day': - var d = date.date(); + var day = date.date(); var month = date.format('MMMM').toLowerCase(); - return 'date' + d + ' ' + month + currentMonth(date) + even(d - 1); + return 'day' + day + ' ' + month + currentMonth(date) + even(day - 1); case 'month': return date.format('MMMM').toLowerCase() + diff --git a/lib/timeline/component/TimeAxis.js b/lib/timeline/component/TimeAxis.js index 4d219e4f..30fc9e52 100644 --- a/lib/timeline/component/TimeAxis.js +++ b/lib/timeline/component/TimeAxis.js @@ -225,7 +225,7 @@ TimeAxis.prototype._repaintLabels = function () { } if (this.options.showMinorLabels) { - this._repaintMinorText(x, step.getLabelMinor(), orientation); + this._repaintMinorText(x, step.getLabelMinor(), orientation, className); } if (isMajor && this.options.showMajorLabels) { @@ -233,7 +233,7 @@ TimeAxis.prototype._repaintLabels = function () { if (xFirstMajorLabel == undefined) { xFirstMajorLabel = x; } - this._repaintMajorText(x, step.getLabelMajor(), orientation); + this._repaintMajorText(x, step.getLabelMajor(), orientation, className); } if (this.options.showMajorLines == true) { prevLine = this._repaintMajorLine(x, orientation, className); @@ -253,7 +253,7 @@ TimeAxis.prototype._repaintLabels = function () { widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) { - this._repaintMajorText(0, leftText, orientation); + this._repaintMajorText(0, leftText, orientation, className); } } @@ -273,9 +273,10 @@ TimeAxis.prototype._repaintLabels = function () { * @param {Number} x * @param {String} text * @param {String} orientation "top" or "bottom" (default) + * @param {String} className * @private */ -TimeAxis.prototype._repaintMinorText = function (x, text, orientation) { +TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) { // reuse redundant label var label = this.dom.redundant.minorTexts.shift(); @@ -284,7 +285,6 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) { var content = document.createTextNode(''); label = document.createElement('div'); label.appendChild(content); - label.className = 'text minor'; this.dom.foreground.appendChild(label); } this.dom.minorTexts.push(label); @@ -293,6 +293,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) { label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0'; label.style.left = x + 'px'; + label.className = 'text minor ' + className; //label.title = title; // TODO: this is a heavy operation }; @@ -301,9 +302,10 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) { * @param {Number} x * @param {String} text * @param {String} orientation "top" or "bottom" (default) + * @param {String} className * @private */ -TimeAxis.prototype._repaintMajorText = function (x, text, orientation) { +TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className) { // reuse redundant label var label = this.dom.redundant.majorTexts.shift(); @@ -311,13 +313,13 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) { // create label var content = document.createTextNode(text); label = document.createElement('div'); - label.className = 'text major'; label.appendChild(content); this.dom.foreground.appendChild(label); } this.dom.majorTexts.push(label); label.childNodes[0].nodeValue = text; + label.className = 'text major ' + className; //label.title = title; // TODO: this is a heavy operation label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px'); diff --git a/lib/timeline/component/css/timeaxis.css b/lib/timeline/component/css/timeaxis.css index e880304d..d6631eb1 100644 --- a/lib/timeline/component/css/timeaxis.css +++ b/lib/timeline/component/css/timeaxis.css @@ -35,7 +35,6 @@ .vis.timeline .timeaxis .grid.vertical { position: absolute; - width: 0; border-left: 1px solid; } diff --git a/test/timeline.html b/test/timeline.html index b80ae3fb..0af0ec6f 100644 --- a/test/timeline.html +++ b/test/timeline.html @@ -23,6 +23,16 @@ #visualization .grid.vertical.odd { background: #f5f5f5; } + + #visualization .grid.vertical.saturday, + #visualization .grid.vertical.sunday { + background: gray; + } + + #visualization .text.saturday, + #visualization .text.sunday { + color: white; + }