Merge branch 'dennissterzenbach-allow-day-scale-show-week-division'

visjs · Jul 10, 2022 · fbdada2 · fbdada2
2 parents 65630be + 0b8b8c7
commit fbdada2
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 2 deletions.
diff --git a/examples/timeline/styling/dayScaleWithCalendarWeek.html b/examples/timeline/styling/dayScaleWithCalendarWeek.html
@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | styling | Show day scale with calendar week</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
+    <script src="../../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link href="../../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        /* alternating column backgrounds */
+        .vis-time-axis .vis-grid.vis-odd {
+            background: #f5f5f5;
+        }
+    </style>
+
+</head>
+<body>
+
+<p>To set a locale for the timeline, specify the option
+    <code>{locale: STRING}</code>.</p>
+<p>
+  To set up a day scale and also shows the corresponding calendar weeks, configure use a time axis with day scale and enable showWeekScale. Then configure the format to output the date/day and the week info accordingly:
+</p>
+<pre>
+<code>
+  {
+    timeAxis: {
+      scale: 'day',
+      step: 1
+    },
+    showWeekScale: true,
+    format: {
+      minorLabels: {day: 'DD.MM'},
+      majorLabels: {day: 'w'}
+    }
+  }
+</code>
+</pre>
+
+<p>The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js
+    objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week
+    numbers will be calculated according to the US week calendar numbering scheme.</p>
+
+<p>
+    <label for="locale">Select a locale:</label>
+    <select id="locale">
+        <option value="en">en</option>
+        <option value="fr">fr</option>
+        <option value="it">it</option>
+        <option value="nl">nl</option>
+        <option value="de" selected>de</option>
+    </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+    var itemCount = 26;
+
+    // DOM element where the Timeline will be attached
+    var container = document.getElementById('visualization');
+
+    // just a group for the effects
+    var groups = new vis.DataSet();
+    groups.add([{id: 1, content: "ISO Weeks"}, {id: 2, content: "US Weeks"}]);
+
+    // Create a DataSet (allows two way data-binding)
+    var items = new vis.DataSet();
+
+    // create a localized moment object based on the current date
+    var USdate = moment().locale('en').hours(0).minutes(0).seconds(0).milliseconds(0);
+
+    // use the locale-aware weekday function to move to the begin of the current week
+    USdate.weekday(0);
+
+    // Iterate and just add a week to use it again in the next iteration
+    for (var i = 0; i < itemCount; i++) {
+        var USweekNumber = USdate.format('w');
+        var USweekStart = USdate.format();
+        var USweekEnd = USdate.add(1, 'week').format();
+        items.add({
+            id: i,
+            group: 2,
+            content: 'US week ' + USweekNumber,
+            start: USweekStart,
+            end: USweekEnd
+        });
+    }
+
+    // create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system
+    var DEdate = moment().locale('de').hours(0).minutes(0).seconds(0).milliseconds(0);
+    DEdate.weekday(0);
+    for (var j = 0; j < itemCount; j++) {
+        var DEweekNumber = DEdate.format('w');
+        var DEweekStart = DEdate.format();
+        var DEweekEnd = DEdate.add(1, 'week').format();
+        items.add({
+            id: itemCount + j,
+            group: 1,
+            content: 'ISO week ' + DEweekNumber,
+            start: DEweekStart,
+            end: DEweekEnd
+        });
+    }
+
+    // Configuration for the Timeline
+    var options = {
+      locale: 'de',
+      timeAxis: {
+        scale: 'day',
+        step: 1
+      },
+      showWeekScale: true,
+      format: {
+        minorLabels: {day: 'DD.MM'},
+        majorLabels: {day: 'w'}
+      }
+    };
+
+    // Create a Timeline
+    var timeline = new vis.Timeline(container, items, groups, options);
+
+    // update the locale when changing the select box value
+    var select = document.getElementById('locale');
+    select.onchange = function () {
+        timeline.setOptions({
+            locale: this.value
+        });
+    };
+    select.onchange();
+</script>
+</body>
+</html>
diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js
@@ -137,7 +137,7 @@ class TimeStep {
     switch (this.scale) {
       case 'year':
         this.current.year(this.step * Math.floor(this.current.year() / this.step));
-        this.current.month(0);
+        this.current.month(0);                            // eslint-disable-line no-fallthrough
       case 'month':        this.current.date(1);          // eslint-disable-line no-fallthrough
       case 'week':                                        // eslint-disable-line no-fallthrough
       case 'day':                                         // eslint-disable-line no-fallthrough
@@ -524,7 +524,7 @@ class TimeStep {
         return (date.hours() == 0);
       case 'weekday': // intentional fall through
       case 'day':
-        return (date.date() == 1);
+        return this.options.showWeekScale ? (date.isoWeekday() == 1) : (date.date() == 1);
       case 'week':
         return (date.date() == 1);
       case 'month':