Agenda View (v6.0)

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

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

Agenda view

примечание

По умолчанию левая часть списка в этом виде отображает события, начиная с текущей даты. Чтобы изменить это поведение, используйте свойства 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"></div>
    </div>
    ...    
</div>

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

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

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"); 
}; 

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

Related sample Next/Previous/Today buttons in Agenda view

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

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

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

Related sample Adjusting width of columns

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

• Общие инструкции по настройке
• Шаблоны представления Agenda
• Загрузка данных
• Скины
• Локализация