Available only in PRO Edition

Units View

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

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

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

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

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

scheduler.plugins({
    units: true
});

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

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

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

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

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

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

Related sample: 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.

Related sample: Units view

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

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

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

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

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

Related sample: Multiday Units view

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

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

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

Первая шкала определяется как обычно с помощью scale_text_template. Высоту можно настроить через scale_height.
Вы можете скрыть ненужные временные интервалы во второй горизонтальной шкале, следуя подходу, описанному в Скрытие единиц времени на оси X в представлении.
Параметры size и step не применяются к мультидневным юнитам.
Экспорт в PDF поддерживается только с новым сервисом, а не с старыми инструментами экспорта.

Чтобы изменить начальный день отображаемого интервала, используйте функцию scheduler.date.{units_name}_start:

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

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

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

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

Активируйте расширение Multisection на странице
Установите свойство multisection в true
(Необязательно) Активируйте расширение "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',  ...}]);

Данные для секций оси 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);

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

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

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

Units scrolling

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

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

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

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

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

Наверх