Временная шкала 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);
Другие вопросы по тегам