<!DOCTYPE HTML> <html> <head> <title>Timeline | Grid styling</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> <script src="../../../dist/vis.js"></script> <link href="../../../dist/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> Week numbers are calculated based on locales. For this to properly work, the timeline must be loaded with a version of moment.js including locales.</p> <p>To set a locale for the timeline, specify the option <code>{locale: STRING}</code>.</p> <p>To set the scale to use week numbers, use for example <code>{scale: 'week', step: 1}</code>.</p> <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="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 = {timeAxis: {scale: 'week', step: 1}, locale: 'de'}; // 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>