Временная шкала vis.js добавляет кнопки для отображения дня недели или месяца
Я пытаюсь создать систему "бронирования" с помощью vis.js, так как мне нравится макет горизонтального масштабирования и возможность добавлять элементы, которые необходимо забронировать. Мне нужно добавить кнопки, которые при клике будут отображать текущий день, неделю или месяц на временной шкале.
<div id=""visualization></div>
<ul class="btn-cluster">
<li class="btn-cluster__item btn"><a class="btn-cluster__link--day">day</a></li>
<li class="btn-cluster__item btn"><a class="btn-cluster__link--day">week</a></li>
<li class="btn-cluster__item btn"><a class="btn-cluster__link--day">month</a></li>
</ul>
var container = document.getElementById('visualization');
var groups = {};
var items = new vis.DataSet([
{
id: 'item1',
content: 'item content'
},
]) ;
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, groups, options);
1 ответ
Решение
Чтобы установить представление на временной шкале для указанного пользователем диапазона, такого как день, неделя или месяц, вы можете использовать
timeline.setWindow(start, end [, options])
Например, если вы хотите установить временную шкалу, чтобы сфокусироваться на сегодняшнем дне с шириной просмотра 24 часа, вы можете сделать следующее.
var ONE_DAY_IN_MS = 1000 * 60 * 60 * 24;
var now = new Date();
var nowInMs = now.getTime();
var oneDayFromNow = nowInMs + ONE_DAY_IN_MS;
timeline.setWindow(nowInMs, oneDayFromNow);