Prefixed css classes of the TimeAxis grid (Fixed #836)

docs/timeline/index.html

@@ -1522,28 +1522,28 @@ var options = {
       <td>Description</td><td>values</td>
     </tr>
     <tr>
-      <td>Alternating columns</td><td class="mid"><code>even</code>, <code>odd</code></td>
+      <td>Alternating columns</td><td class="mid"><code>vis-even</code>, <code>vis-odd</code></td>
     </tr>
     <tr>
-      <td>Current date</td><td class="mid"><code>today</code>, <code>tomorrow</code>, <code>yesterday</code>, <code>current-week</code>, <code>current-month</code>, <code>current-year</code></td>
+      <td>Current date</td><td class="mid"><code>vis-today</code>, <code>vis-tomorrow</code>, <code>vis-yesterday</code>, <code>vis-current-week</code>, <code>vis-current-month</code>, <code>vis-current-year</code></td>
     </tr>
     <tr>
-      <td>Hours</td><td class="mid"><code>h0</code>, <code>h1</code>, ..., <code>h23</code></td>
+      <td>Hours</td><td class="mid"><code>vis-h0</code>, <code>vis-h1</code>, ..., <code>vis-h23</code></td>
     </tr>
     <tr>
-      <td>Grouped hours</td><td class="mid"><code>h0-h4</code> to <code>h20-h24</code></td>
+      <td>Grouped hours</td><td class="mid"><code>vis-h0-h4</code> to <code>vis-h20-h24</code></td>
     </tr>
     <tr>
-      <td>Weekday</td><td class="mid"><code>monday</code>, <code>tuesday</code>, <code>wednesday</code>, <code>thursday</code>, <code>friday</code>, <code>saturday</code>, <code>sunday</code></td>
+      <td>Weekday</td><td class="mid"><code>vis-monday</code>, <code>vis-tuesday</code>, <code>vis-wednesday</code>, <code>vis-thursday</code>, <code>vis-friday</code>, <code>vis-saturday</code>, <code>vis-sunday</code></td>
     </tr>
     <tr>
-      <td>Days</td><td class="mid"><code>date1</code>, <code>date2</code>, ..., <code>date31</code></td>
+      <td>Days</td><td class="mid"><code>vis-date1</code>, <code>vis-date2</code>, ..., <code>vis-date31</code></td>
     </tr>
     <tr>
-      <td>Months</td><td class="mid"><code>januari</code>, <code>februari</code>, <code>march</code>, <code>april</code>, <code>may</code>, <code>june</code>, <code>july</code>, <code>august</code>, <code>september</code>, <code>october</code>, <code>november</code>, <code>december</code></td>
+      <td>Months</td><td class="mid"><code>vis-januari</code>, <code>vis-februari</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td>
     </tr>
     <tr>
-      <td>Years</td><td class="mid"><code>year2014</code>, <code>year2015</code>, ...</td>
+      <td>Years</td><td class="mid"><code>vis-year2014</code>, <code>vis-year2015</code>, ...</td>
     </tr>
   </table>
 
@@ -1551,17 +1551,17 @@ var options = {
 
   <pre class="prettyprint lang-html">&lt;style&gt;
   /* alternating column backgrounds */
-  .vis-time-axis .grid.odd {
+  .vis-time-axis .grid.vis-odd {
     background: #f5f5f5;
   }
 
   /* gray background in weekends, white text color */
-  .vis-time-axis .vis-grid.saturday,
-  .vis-time-axis .vis-grid.sunday {
+  .vis-time-axis .vis-grid.vis-saturday,
+  .vis-time-axis .vis-grid.vis-sunday {
     background: gray;
   }
-  .vis-time-axis .vis-text.saturday,
-  .vis-time-axis .vis-text.sunday {
+  .vis-time-axis .vis-text.vis-saturday,
+  .vis-time-axis .vis-text.vis-sunday {
     color: white;
   }
 &lt;/style&gt;

examples/timeline/32_grid_styling.html

@@ -12,17 +12,17 @@
     }
 
     /* alternating column backgrounds */
-    .vis-time-axis .vis-grid.odd {
+    .vis-time-axis .vis-grid.vis-odd {
       background: #f5f5f5;
     }
 
     /* gray background in weekends, white text color */
-    .vis-time-axis .vis-grid.saturday,
-    .vis-time-axis .vis-grid.sunday {
+    .vis-time-axis .vis-grid.vis-saturday,
+    .vis-time-axis .vis-grid.vis-sunday {
       background: gray;
     }
-    .vis-time-axis .vis-text.saturday,
-    .vis-time-axis .vis-text.sunday {
+    .vis-time-axis .vis-text.vis-saturday,
+    .vis-time-axis .vis-text.vis-sunday {
       color: white;
     }
   </style>

lib/timeline/TimeStep.js

@@ -535,32 +535,32 @@ TimeStep.prototype.getClassName = function() {
   var step = this.step;
 
   function even(value) {
-    return (value / step % 2 == 0) ? ' even' : ' odd';
+    return (value / step % 2 == 0) ? ' vis-even' : ' vis-odd';
   }
 
   function today(date) {
     if (date.isSame(new Date(), 'day')) {
-      return ' today';
+      return ' vis-today';
     }
     if (date.isSame(moment().add(1, 'day'), 'day')) {
-      return ' tomorrow';
+      return ' vis-tomorrow';
     }
     if (date.isSame(moment().add(-1, 'day'), 'day')) {
-      return ' yesterday';
+      return ' vis-yesterday';
     }
     return '';
   }
 
   function currentWeek(date) {
-    return date.isSame(new Date(), 'week') ? ' current-week' : '';
+    return date.isSame(new Date(), 'week') ? ' vis-current-week' : '';
   }
 
   function currentMonth(date) {
-    return date.isSame(new Date(), 'month') ? ' current-month' : '';
+    return date.isSame(new Date(), 'month') ? ' vis-current-month' : '';
   }
 
   function currentYear(date) {
-    return date.isSame(new Date(), 'year') ? ' current-year' : '';
+    return date.isSame(new Date(), 'year') ? ' vis-current-year' : '';
   }
 
   switch (this.scale) {
@@ -578,24 +578,24 @@ TimeStep.prototype.getClassName = function() {
       if (this.step == 4) {
         hours = hours + '-h' + (hours + 4);
       }
-      return 'h' + hours + today(date) + even(date.hours());
+      return 'vis-h' + hours + today(date) + even(date.hours());
 
     case 'weekday':
-      return date.format('dddd').toLowerCase() +
+      return 'vis-' + date.format('dddd').toLowerCase() +
           today(date) + currentWeek(date) + even(date.date());
 
     case 'day':
       var day = date.date();
       var month = date.format('MMMM').toLowerCase();
-      return 'day' + day + ' ' + month + currentMonth(date) + even(day - 1);
+      return 'vis-day' + day + ' vis-' + month + currentMonth(date) + even(day - 1);
 
     case 'month':
-      return date.format('MMMM').toLowerCase() +
+      return 'vis-' + date.format('MMMM').toLowerCase() +
           currentMonth(date) + even(date.month());
 
     case 'year':
       var year = date.year();
-      return 'year' + year + currentYear(date)+ even(year);
+      return 'vis-year' + year + currentYear(date)+ even(year);
 
     default:
       return '';