How to create different color for Longleave, Fullday, HalfDay in scheduler dhtmlx?

Question

I am new to Scheduler https://docs.dhtmlx.com/

How to change the color as per Holiday type. For example:- Fullday(Single day and long leave), Single Halfday (Am and Pm) and sick leave.

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

I want to change the color as per leave red, blue, green etc. During holiday time, that calender is on-editable.

@NegiRox Scheduler Calender - Day view and Week view https://docs.dhtmlx.com/scheduler/day_view.html — jsjq-finder, Jan 30 '20 at 07:06
Currently I am using if condition if (value.StartTime == 0 && value.EndTime == 24) {} but sick leave is different, that is in all category like full, half, long — jsjq-finder, Jan 30 '20 at 07:08

score 0 · Answer 1 · answered Jan 30 '20 at 17:14

0

To solve the issue, you just need to update the value of css property in addMarkedTimespan method (see the screenshot) and add color in CSS for the specified class.

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

Please check this sample with several marked timespans that have different colors\styles.

Also, you can find more details about this and other properties of addMarkedTimespan method in the documentation here.

answered Jan 30 '20 at 17:14

Polina

412
2
6

HI, Css: gray is ok, but during half day, full day, sickday - So I need different css will load as per leave type. – jsjq-finder Jan 31 '20 at 06:39

score -1 · Answer 2 · answered Jan 30 '20 at 09:34

I think you need attacchEvent function where you need to bind onTemplatesReady to give different colors to your events.

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

here is working fiddle.

How to create different color for Longleave, Fullday, HalfDay in scheduler dhtmlx?

2 Answers2