Get the Sunday column in the Gantt chart

[維国]

hello,

 

How can I get the Saturday and Sunday columns in the Gantt chart and color them?
Do you provide such an interface?

 

We look forward to your reply！

 

 

thank you！

[Dimitar]

Hello,

Kendo Gantt non-working days and hours have a special class k-nonwork-hour applied, which sets them background color different than the one of the work hours and days - Gantt demo.

That class may be used to change the background color through CSS - Dojo snippet:

    <style>
      .k-gantt .k-nonwork-hour {
        background-color: yellow;
      }
    </style>

As a side note, the Gantt does not display non-work days and hours by default. To show them, set showWorkDays and showWorkHours properties to false as on the demo.

Regards,
Dimitar
Progress Telerik

[維国]

hello,

Thank you for your reply.

Get Saturday and Sunday. I get it.

What if I want to get any columns, not Saturdays and Sundays,

such as 2020 / 08 / 28(Friday), 2020 / 09 / 02(Wednesday)... And add colors to these columns?

[Dimitar]

Hello,

There is no inbuilt API for taking reference to random Gantt columns in its timeline part. It is possible to iterate over the columns on Gantt dataBound event and add a custom class to some of them based on custom logic. The following Dojo snippet shows how to set custom class to every cell under Wednesday. Note that as the header text does not provide info about the current year, I am getting the year from the Gantt range.

function onDataBound(e) {
  var myGantt = e.sender;

  var visibleRangeStart = myGantt.range().start;
  var currentYear = new Date(visibleRangeStart).getFullYear();

  var visibleRangeEnd = myGantt.range().end;

  myGantt.timeline.element.find("tr:last-of-type .k-header")
    .each(function (index, item) {

    var $header = $(item);
    var dateText = $header.text();
    // fix the year based on the visible range start/end dates
    var dateAndYear = dateText + " " + currentYear;
    var date = new Date(dateAndYear);

    // own logic to decide non-working days
    // currently, it makes Wednesday non-working

    if (date.getDay() == 3) {
      // add class to the header
      $header.addClass("my-custom-class");

      // iterate the fake columns and add the class
      myGantt.timeline.element.find(".k-gantt-columns td:nth-of-type(" + (index + 1) + ")").addClass("my-custom-class");
    }
  })
}

The Gantt uses the same cells for Day view cells as well and with the above logic all cells in Day view will have the custom class applied. As this is a custom approach, improving it further and fixing any issues is up to the developer using it.

Regards,
Dimitar
Progress Telerik