Как создать разные цвета для Longleave, Fullday, HalfDay в планировщике dhtmlx? - PullRequest
Новая
       34

Как создать разные цвета для Longleave, Fullday, HalfDay в планировщике dhtmlx?

1 голос
/ 30 января 2020

Я новичок в планировщике https://docs.dhtmlx.com/

Как изменить цвет в зависимости от типа праздника. Например: - Полный день (один день и длительный отпуск), один полдня (Am и Pm) и отпуск по болезни. 

$.each(JSON.parse(result.engineerHolidayList), function (key, value) {
    scheduler.addMarkedTimespan({
        start_date: new Date(value.StartYear, value.StartMonth, value.StartDate, value.StartTime),
        end_date: new Date(value.EndYear, value.EndMonth, value.EndDate, value.EndTime),
        css: "worktime",
        type: "dhx_time_block",
        sections: {
            "timeline": [value.section_id]
        }
    });
});

Я хочу изменить цвет согласно отпуску красный, синий, зеленый и т. Д. c. Во время отпуска этот календарь доступен для редактирования.

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Чтобы решить эту проблему, вам просто нужно обновить значение свойства css в методе addMarkedTimespan (см. снимок экрана ) и добавить цвет в CSS для указанного класса. 

css:"gray" //draws a DIV and applies the 'gray' css class to it

Проверьте этот образец с несколькими отмеченными временными панелями, которые имеют разные цвета \ стили.

Также вы можете найти более подробную информацию об этом и других свойствах addMarkedTimespan метод в документации здесь .

0 голосов
/ 30 января 2020

Я думаю, вам нужна функция attacchEvent , где вам нужно связать onTemplatesReady , чтобы придать вашим событиям разные цвета. 

scheduler.attachEvent("onTemplatesReady", function(){

  function findInArray(array, key) {
    for (var i = 0; i < array.length; i++) {
      if (key == array[i].key)
        return array[i];
    }
    return null;
  }

  function getRoomType(key) {
    return findInArray(scheduler.serverList("roomTypes"), key).label;
  }

  function getRoomStatus(key) {
    return findInArray(scheduler.serverList("roomStatuses"), key);
  }

  function getRoom(key) {
    return findInArray(scheduler.serverList("rooms"), key);
  }

  scheduler.templates.timeline_scale_label = function (key, label, section) {
    var roomStatus = getRoomStatus(section.status);
    return ["<div class='timeline_item_separator'></div>",
            "<div class='timeline_item_cell'>" + label + "</div>",
            "<div class='timeline_item_separator'></div>",
            "<div class='timeline_item_cell'>" + getRoomType(section.type) + "</div>",
            "<div class='timeline_item_separator'></div>",
            "<div class='timeline_item_cell room_status'>",
            "<span class='room_status_indicator room_status_indicator_"+section.status+"'></span>",
            "<span class='status-label'>" + roomStatus.label + "</span>",
            "</div>"].join("");
  };

  scheduler.templates.event_class = function (start, end, event) {
      return "event_" + (event.status || "");
  };
});

здесь работает скрипка .

...