Agenda View (v6.0)

Эта статья относится к dhtmlxScheduler версии 6.0 и ниже. Для dhtmlxScheduler 7.0 и выше смотрите детали здесь.

Вид Gantt "Agenda" отображает список предстоящих событий.

По умолчанию левая часть списка в этом виде отображает события, начиная с текущей даты. Чтобы изменить это поведение, используйте свойства agenda_start и agenda_end.

Инициализация

Чтобы добавить вид "Agenda" в планировщик, выполните следующие шаги:

1) Включите расширение Agenda на странице:

scheduler.plugins({
    agenda_view: true
});

2) Добавьте вкладку этого вида в разметку планировщика:

<div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="agenda_tab" style="right:280px;"></div>
    </div>
    ... 
</div>

3) Задайте название для вкладки:

//'agenda_tab' — это имя div. По умолчанию заголовок — 'Agenda' 
scheduler.locale.labels.agenda_tab = "Моя Agenda";

Related sample: Agenda view

GUI: детали

Двойной клик по пустой ячейке списка создает новое событие.
Чтобы отредактировать или удалить событие, дважды кликните по иконке 'Details', расположенной слева от описания события, чтобы открыть lightbox и внести изменения.

Советы по локализации

Вид Agenda содержит 3 метки в locale:

scheduler.locale.labels.{agendaName}_tab — название вкладки вида
scheduler.locale.labels.date — заголовок колонки даты
scheduler.locale.labels.description — заголовок колонки описания

Обычно первая метка задается при добавлении вкладки вида в планировщик. Остальные метки следует изменять только при локализации приложения на язык, отличный от английского.

Установка диапазона отображаемых дат

Чтобы определить диапазон дат, отображаемых в виде Agenda, используйте свойства agenda_end и agenda_start:

//для отображения дат, начиная с 1 июня 2019 года
scheduler.config.agenda_start = new Date(2019, 5, 1); 
 
//для отображения дат до 1 июня 2020 года
scheduler.config.agenda_end = new Date(2020, 5, 1);

Включение кнопок Следующий/Предыдущий/Сегодня

Кнопки "Следующий", "Предыдущий" и "Сегодня" можно включить в виде Agenda, переопределив функции scheduler.date.agenda_start() и scheduler.date.add_agenda().

scheduler.date.agenda_start(date) возвращает начало отображаемого интервала для заданной даты. По умолчанию возвращается фиксированная дата, поэтому вид Agenda не реагирует на нажатия кнопок навигации.

Переопределите эти функции, чтобы, например, возвращать текущий месяц:

scheduler.date.agenda_start = function(date){
  return scheduler.date.month_start(new Date(date)); 
};
 
scheduler.date.add_agenda = function(date, inc){
  return scheduler.date.add(date, inc, "month"); 
};

После этого кнопки навигации будут работать как ожидается.

Ширина колонок

Ширину колонок в виде Agenda можно настраивать с помощью CSS классов:

<style>
  .dhx_agenda_line div{
     width: 300px; 
  }
  .dhx_v_border{
     left: 299px; 
  }
</style>

Columns Width

Связанные руководства

Наверх