如何在调度程序 dhtmlx 中为 Longleave、Fullday、HalfDay 创建不同的颜色？答案

【问题标题】：How to create different color for Longleave, Fullday, HalfDay in scheduler dhtmlx?如何在调度程序 dhtmlx 中为 Longleave、Fullday、HalfDay 创建不同的颜色？
【发布时间】：2020-05-15 16:56:51
【问题描述】：

我是调度程序的新手https://docs.dhtmlx.com/

如何根据假期类型更改颜色。例如：- 全天（单天和长假）、单半天（上午和下午）和病假。

$.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]
        }
    });
});

我想根据离开红色、蓝色、绿色等更改颜色。在假期期间，该日历是可编辑的。

【问题讨论】：

您使用的是哪个日历？
@NegiRox Scheduler 日历 - 日视图和周视图 docs.dhtmlx.com/scheduler/day_view.html
目前我正在使用 if 条件 if (value.StartTime == 0 && value.EndTime == 24) {} 但病假不同，即在所有类别中，例如 full、half、long

标签： jquery asp.net-mvc dhtmlx dhtmlx-scheduler

【解决方案1】：

我认为您需要 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 || "");
  };
});

这里正在工作fiddle。

【讨论】：

【解决方案2】：

要解决此问题，您只需更新addMarkedTimespan 方法中css 属性的值（参见screenshot）并在CSS 中为指定的类添加颜色。

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

请检查this sample 具有不同颜色\样式的几个标记时间跨度。

此外，您可以在文档here 中找到有关此属性和addMarkedTimespan 方法的其他属性的更多详细信息。

【讨论】：

嗨，CSS：灰色还可以，但在半天、全天、病假期间 - 所以我需要根据休假类型加载不同的 CSS。