Gantt - Looking at days in Month view

[Ben]

In the Gantt chart, there are four types of views listed: day, week, month, year. Currently, the week type has week headings with day sub-headings that are snapped to. The Month view has week sub-headings, and the items snap to the weeks. 

I am interested in a Month type view, but instead of each week listed as sub-headings under each month, I'd like to use each day of the month, so moving/resizing tasks would display and snap to days instead of weeks on the month type view. Is this possible?

[Petar]

Hi Ben,

I've just sent you a reply to the same question in the private ticket you've submitted.

Just in case someone wants to implement the same as your scenario, below I will share my reply for a second time. If you have additional questions related to the suggested implementation, we can continue the communication in the private thread. 

Here is a StackBlitz example demonstrating how the desired functionality can be implemented. To achieve the targeted functionality, we have to define a custom view using the below code in the created hook of the application.

window.kendo.ui.GanttDailyView = kendo.ui.GanttView.extend({
  name: 'customDaily',

  options: {
    monthHeaderTemplate: kendo.template(
      "#=kendo.toString(start, 'MMM yyyy')#"
    ),
    dateHeaderTemplate: kendo.template("#=kendo.toString(start, ' d')#"),
    dayHeaderTemplate: kendo.template("#=kendo.toString(start, 'ddd')#"),
  },

  range: function (range) {
    this.start = new Date('2021-06-01T00:00:00');
    this.end = new Date('2021-08-01T00:00:00');
  },

  _daysInMonth: function (date) {
    var result = new Date(
      date.getFullYear(),
      date.getMonth() + 1,
      0
    ).getDate();
    console.log(result);
    return result;
  },

  _generateSlots: function (incrementCallback, span) {
    var slots = [],
      slotStart = new Date(this.start),
      slotEnd;

    while (slotStart < this.end) {
      slotEnd = new Date(slotStart);
      incrementCallback(slotEnd);

      slots.push({
        start: slotStart,
        end: slotEnd,
        span: span === null ? this._daysInMonth(slotStart) : span,
      });

      slotStart = slotEnd;
    }

    return slots;
  },

  _createSlots: function () {
    return [
      this._generateSlots(function (date) {
        date.setMonth(date.getMonth() + 1);
      }, null),
      this._generateSlots(function (date) {
        date.setDate(date.getDate() + 1);
      }, 1),
    ];
  },

  _layout: function () {
    return [
      this._slotHeaders(
        this._slots[0],
        kendo.template(this.options.monthHeaderTemplate)
      ),
      this._slotHeaders(
        this._slots[1],
        kendo.template(this.options.dateHeaderTemplate)
      ),
      this._slotHeaders(
        this._slots[1],
        kendo.template(this.options.dayHeaderTemplate)
      ),
    ];
  },
});

Then in the Gantt's template definition, we have the following:

<kendo-gantt
  id="gantt"
  :height="'500'"
  :editable-create="false"
  :data-source="datasource"
  :dependencies="dependencydatasource"
>
  <kendo-gantt-view
    :type="'kendo.ui.GanttDailyView'"
    :title="'custom'"
  ></kendo-gantt-view>
  <kendo-gantt-view :type="'month'"></kendo-gantt-view>
</kendo-gantt>

With the code in yellow, we pass the custom template to the Gantt View. With the code in green, we set the title of our custom view.

If you want to hide, for example, the weekday in the custom view, you can remove the last element in the array returned by the _layout method.

  _layout: function () {
    return [
      this._slotHeaders(
        this._slots[0],
        kendo.template(this.options.monthHeaderTemplate)
      ),
      this._slotHeaders(
        this._slots[1],
        kendo.template(this.options.dateHeaderTemplate)
      ),
      this._slotHeaders(
        this._slots[1],
        kendo.template(this.options.dayHeaderTemplate)
      ),
    ];
  }

I hope the above details will help you achieve the functionality that you need. 

Petar
Progress Telerik