This is a migrated thread and some comments may be shown as answers.

Get the Sunday column in the Gantt chart

3 Answers 78 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
維国
Top achievements
Rank 1
Veteran
維国 asked on 25 Aug 2020, 08:25 AM

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!

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 26 Aug 2020, 11:54 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
維国
Top achievements
Rank 1
Veteran
answered on 27 Aug 2020, 05:42 AM

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?

0
Dimitar
Telerik team
answered on 28 Aug 2020, 03:10 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Gantt
Asked by
維国
Top achievements
Rank 1
Veteran
Answers by
Dimitar
Telerik team
維国
Top achievements
Rank 1
Veteran
Share this question
or