Units View

к сведению

Данный вид доступен исключительно в версии Scheduler PRO.

Вид Units организует ось X на основе определённого свойства событий, а не только времени.

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

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

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

scheduler.plugins({
    units: true
});

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

<div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="unit_tab"></div>
    </div>
    ...    
</div>

3. Задайте метку для вкладки:

//'unit_tab' — это имя нашего div
scheduler.locale.labels.unit_tab = "Unit"

4. Используйте метод createUnitsView для создания вида:

scheduler.createUnitsView({
    name:"unit",
    property:"unit_id", // свойство события для отображения юнитов
    list:[              // определяет юниты, отображаемые в виде
        {key:1, label:"Section A"},
        {key:2, label:"Section B"},
        {key:3, label:"Section C"}  
    ]
});

Units view

Загрузка данных в вид

В отличие от стандартных видов, таких как Day, Month или Year, многоресурсные виды, такие как Units и Timeline, требуют наличия дополнительного обязательного поля в событиях:

• property - (string) имя свойства данных, используемого для назначения событий определённым юнитам

scheduler.createUnitsView({
    name:"unit",
    property:"unit_id", 
    list:[             
        {key:1, label:"Section A"},
        {key:2, label:"Section B"},
        {key:3, label:"Section C"}  
    ]
});

scheduler.init('scheduler_here');
scheduler.parse([
    {id:1, text:"Task1", start_date:"2019-09-17 12:00", end_date:"2019-09-18 21:00", 
    unit_id:"1"},
     {id:2, text:"Task2", start_date:"2019-09-17 09:00", end_date:"2019-09-17 21:00", 
    unit_id:"3"},
     {id:3, text:"Task3", start_date:"2019-09-17 15:00", end_date:"2019-09-18 15:00", 
    unit_id:"2"}
]);                                 

События назначаются юнитам по совпадению значения unit_id с соответствующим list.key.

Units view

Динамическое изменение секций

Для динамического обновления списка юнитов в Units view используйте методы serverList и updateCollection.

Отображение юнитов на несколько дней

Чтобы отобразить юниты, охватывающие несколько дней, используйте параметр days:

scheduler.createUnitsView({
    name:"week_unit",
    property:"section_id",
    list:sections,
    days:3 /*!*/
});

Multiday Units view

Это добавит вторую горизонтальную шкалу, отображающую дни.

Для настройки формата этой второй шкалы используйте шаблон scheduler.templates[name+"_second_scale_date"]:

scheduler.templates.units_second_scale_date = function(date) {
    return scheduler.templates.week_scale_date(date);
};

Обратите внимание:

1. Первая шкала определяется как обычно с помощью scale_text_template. Высоту можно настроить через scale_height.
2. Вы можете скрыть ненужные временные интервалы во второй горизонтальной шкале, следуя подходу, описанному в Скрытие единиц времени на оси X в представлении.
3. Параметры size и step не применяются к мультидневным юнитам.
4. Экспорт в PDF поддерживается только с новым сервисом, а не с старыми инструментами экспорта.
5. Чтобы изменить начальный день отображаемого интервала, используйте функцию scheduler.date.(units_name)_start:

scheduler.date.units_start = function (date) {
    return scheduler.date.week_start(date);
};

Назначение событий нескольким юнитам

Начиная с версии 4.1, появилась возможность назначать события нескольким юнитам одновременно.

Для включения этой функции:

1. Активируйте расширение Multisection на странице
2. Установите свойство multisection в true
3. (Необязательно) Активируйте расширение "multiselect", чтобы использовать контрол Multiselect для удобного переключения секций

<script src="codebase/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css">

<script>
    scheduler.plugins({
        multisection: true, /*!*/
        multiselect: true,
        units: true
    });
    scheduler.config.multisection = true; /*!*/
    scheduler.init('scheduler_here');
</script>

После этого вы можете указать несколько секций (по умолчанию разделитель - запятая, см. section_delimiter) в соответствующем свойстве события, и оно будет отображаться во всех этих юнитах:

scheduler.createUnitsView({
    name: "unit",
    list: [
        {key: 1, label: "James Smith"},
        {key: 2, label: "John Williams"},
        {key: 3, label: "David Miller"},
        {key: 4, label: "Linda Brown"}],
    property: "section_id", /*!*/
    ...
});
scheduler.init('scheduler_here', new Date(2019, 5, 30), "unit");

scheduler.parse([
    { id:1, text:"Task A", section_id:'1',         ...},/*!*/
    { id:2, text:"Task B", section_id:'1,3',     ...},/*!*/
    { id:3, text:"Task C", section_id:'4',         ...},/*!*/
    { id:4, text:"Task D", section_id:'2,3,4',     ...}/*!*/
]);

Multisection events in Timeline and Units view

Данные для секций оси X

Значения, отображаемые на оси X, задаются через параметр list:

scheduler.createUnitsView({
    name:"unit",
    ...
    list:[
        {key:1, label:"Section A"},
        {key:2, label:"Section B"},
        {key:3, label:"Section C"} 
    ]
});

Каждый элемент list должен содержать два обязательных свойства:

• key - уникальный идентификатор
• label - отображаемое имя

Данные для секций оси X с сервера

Для загрузки данных секций с сервера используйте:

• На клиенте - метод serverList:

scheduler.createUnitsView({
    name:"unit",
    property:"type_id",
    list:scheduler.serverList("units"),
    size:20,                                     
    step:1
});

где serverList возвращает список с именем 'units'.

• На сервере

Ответ для метода load должен включать коллекцию с именем серверного списка, отформатированную в JSON следующим образом:

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 15:00:00",
          "end_date":"2019-03-04 16:00:00",
          "text":"Team meeting",
          "type_id":"1"
      },
      {
          "id":"2",
          "start_date":"2019-03-02 17:00:00",
          "end_date":"2019-03-04 18:00:00",
          "text":"Strategy meeting",
          "type_id":"2"
      }
   ], 
   "collections": {/*!*/
      "units":[/*!*/      
         {"value":"1","label":"Conference room 1"},/*!*/
         {"value":"2","label":"Conference room 2"},/*!*/
         {"value":"3","label":"Conference room 3"}/*!*/
      ]/*!*/
   }/*!*/
}

В качестве альтернативы можно использовать коннектор OptionsConnector:

<?php
    include('connector-php/codebase/scheduler_connector.php');//подключение файла

    $res="mysql_connect(""localhost","root","");//подключение к серверу с БД
    mysql_select_db("sampleDB");//подключение к БД, 'sampleDB' — имя БД

    $list = new OptionsConnector($res, $dbtype);
    $list->render_table("types","type_id","type_id(value),name(label)");
    
    $scheduler = new schedulerConnector($res, $dbtype);
    //используем то же имя, что и на клиенте — 'units'
    $scheduler->set_options("units", $list); 
    $scheduler->render_table("events","id","start_date,end_date,text,type_id");
?>

Также можно сформировать коллекцию вручную без использования dhtmlxConnector. В этом случае обновите коллекцию методом updateCollection:

scheduler.updateCollection("units", new_sections_array);

Loading Units sections from the server

Прокрутка юнитов

Если юнитов много, для горизонтальной прокрутки можно использовать параметры size и step:

scheduler.createUnitsView({
    name:"unit",
    ...
    size:10, // количество видимых юнитов одновременно
    step:5   // количество юнитов для прокрутки за шаг
});

Horizontal scrolling sections in Units view

Пропуск событий, не относящихся ни к одному юниту

По умолчанию события, не совпадающие ни с одним из определённых юнитов, отображаются в первом юните. Начиная с версии 3.0, вы можете полностью пропускать такие события.

Для этого установите свойство skip_incorrect:

scheduler.createUnitsView({
    name:"unit",
    ...
    skip_incorrect:true
});

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

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