Timeline year view

[MatanBo]

Hey!
I am trying to implement a timeline with year view, is there a way to do this with the scheduler?
In all of your example the maximum is month..
Thanks,

[Vladimir Iliev]

Hi Matan,

Currently there is no such "Timeline year" view, however you can create custom view by extending the "Timeline" view (and overriding the "calculateDateRange" method) in order to show the full year. For example of extending the Scheduler build-in views you can check the following example in our CodeLibrary:

• Scheduler: Custom view

Regards,
Vladimir Iliev
Telerik

 

 

[MatanBo]

Thanks alot,
Worked for me...

Matan

[MatanBo]

Another question if I may,
Ive seen you didnt add anything to the kendo.scheduler.js file.
When I tried adding my view with your example,
The scheduler doesnt recognize it unless I add another view to the defaultViews object in kendo.scheduler.js

Thanks,
Matan

[Vladimir Iliev]

Hi Matan,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side when adding custom view to the scheduler. Could you please provide runable demo  (for example in Kendo UI Dojo) where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik

 

 

[MatanBo]

It was actualy my fault, Didnt include the correct file,
Thanks alot Vladimir,

Matan.

[Aaron]

I don't suppose you would be willing to share your code? I've been asked to create a view that's months only, with events per month, that could spans a year. So I'm looking to creating a custom view which is monthly only over a year or more. I've been asked to do this in an impossibly short time line. Any help would be very appreciated.

Thanks!

[George]

Is there any proper documentation available to learn what elements matter in extending a timeline view to create a new? I saw the source code attached in this thread, but I ​couldn't understand what part of it ​was really required to create a custom view. As per your first reply, seems like It only requires to override "calculateDateRange" method to make it work, is that true?

[Vladimir Iliev]

Hello George,

For your convenience I created small demo which you can use as baseline to achieve the desired behavior. The demo shows how to override the "calculateDateRange", "nextDate" and "previousDate" methods of the view:

• Scheduler: Timeline Year view (custom solution)

Regards,
Vladimir Iliev
Telerik

 

 

[George]

Thank you, Vladimir. That was 95% of what I was supposed to implement, though all I was looking for was some documentation to play with this control. I was able to extract Week and Month View implementations from the kendo.all.min.js file to understand the structure.

Thanks, again.

[Aaron]

Hello Vladimir,

 Thank you very much for the code. I have a couple of thoughts and would like your feedback.

In a Year Timeline view, I would like to see a higher level view of the months. Basically without the individual times and days of each month.Having days and hours within days is too granular for what I need. Is there a way to remove the time and day level ​increments and have only the months as the increments?

So I want only each month in the header at the top. Is this possible?

Thanks!

[Vladimir Iliev]

Hi Aaron,

The desired behavior is not supported out of the box and it will require deeper extend of the view (overriding more of the build-in methods) which falls outside the scope of our support service. That why currently I could only suggest to use the previous example as baseline to achieve the desired behavior. 

Regards,
Vladimir Iliev
Telerik

 

 

[Aiyaz]

Hi Vladimir,

i need to generate year view calenders (see attached) with events showing in month blocks.  Is there any way i can do this using the scheduler, gannt or calendar controls?  Im happy to use other controls like pivot grids if that will help achieve this view. 

 

[Vladimir Iliev]

Hi,

The desired behavior is not supported out of the box and custom solution would be needed. For example you can create custom view by extending one of the build-in views or render different scheduler widget for each month (in this case you can use the navigation bar of the top scheduler to navigate the others as well). 

Regards,
Vladimir Iliev
Telerik

 

 

[AkAlan]

Aiyaz, Have you happened on a solution? I have the exact same need. 

[Dennis]

Bumping old thread in case anyone else finds themselves searching for this.

I had a need for a horizontal timeline showing one time-slot for each month, with events grouped vertically by 1 kind of resource.

The scheduler would crash if a time-slot was set to take up more than 24 hours, but the performance hit of drawing 356 slots per resource was too great. Luckily, I only had to rewrite 1 function (_addContent) to make it work again. I also modified the function creating the slots (_addTimeSlotToCollection) so that it had the variable duration of its given month instead of a constant interval defined by majorTickLength / minorTickCount. (footnote: I'm very impressed with the versatility of the code to support my haphazard changes)

The code you need is here. Apologies for no working example, I haven't much time at the moment.

With the following options:

schedulerOptions = {
    ...
    views: [
        {
            selected: true,
            type: "TimeLineYear",
            title: "yearview, yay!",
            // Tick lenghts have been hard-coded into the year-view.
        },
    ],
}

 

As well as this code which must be visible in the global scope: 

// Refer to kendo.scheduler.timelineview.js to see origial implementation.
var TimelineYear = kendo.ui.TimelineView.extend({
    nextDate() {
        return firstDayOfNextMonth(this.startDate());
    },
    previousDate() {
        return firstDayOfPreviousMonth(this.startDate());
    },
    options: {
        selectedDateFormat: "{0:D} - {1:D}"
    },
    name: "TimelineYear",
    calculateDateRange() {
        //create a range of dates to be shown within the view
        var start = firstDayOfThisMonth(this.options.date);
        var dates = [];

        for (var idx = 0; idx < 12; idx++) {
            if (start.getDate() === 1)
                dates.push(start);

            start = firstDayOfNextMonth(start);
        }

        this._render(dates);
    },
    // Use our own extension to TimeLineGroupedView where ticks longer than 1 day isn't a problem.
    // This means grouping by dates isn't an option.
    _getGroupedView() {
        return new TimeLineGroupedYearView(this);
    },
    // This is the method that adds the internal time-slots. It has been copy-pasted and modified to make the slots end at the last day of the month instead of just spanning 1 tick
    _addTimeSlotToCollection: function (group, cells, cellIndex, cellOffset, dateIndex, time, interval) {
        var cell = cells[cellIndex + cellOffset];
        var collection = group.getTimeSlotCollection(0);
        var currentDate = this._dates[dateIndex];
        var currentTime = Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
        var start = currentTime + time;

        // This is the part of this function that I messed with
        var newEnd = lastDayOfThisMonth(new Date(start));
        var end = kendo.date.toUtcTime(newEnd);


        cell.setAttribute('role', 'gridcell');
        cell.setAttribute('aria-selected', false);
        collection.addTimeSlot(cell, start, end, true);
    },
});

// Refer to kendo.scheduler.timelineview.js to see origial implementation.
var TimeLineGroupedYearView = kendo.ui.scheduler.TimelineGroupedView.extend({
    init: function (view) {
        var that = this;
        kendo.ui.scheduler.TimelineGroupedView.fn.init.call(that, view);
    },
    /*
     * Method responsible for rendering the cells of the scheduler view.
     * This is what would fail if the tick length exceeded one day.
     * The original one was a whole bunch of for-loops, one of which wouldn't be entered if MS_PER_DAY/tick-length rounded to nearest integer was 0.
     *
     * So yeah, we are ignoring a lot of the options-API, and all the weird ways you can group the dates and events.
     * Anything but a horizontal timeline of events, vertically grouped by resources will fail miserably unless this function is modified.
     * This version also doesn't add the k-nonwork-hour and k-today classes, because they aren't relevant in a year view. */
    _addContent: function (dates, columnCount, groupsCount, rowCount, start, end, slotTemplate, isVerticalGrouped) {
        var view = this._view;
        var html = '';

        for (var rowIdx = 0; rowIdx < rowCount; rowIdx++) {
            html += '<tr>';

            for (var idx = 0, length = columnCount; idx < length; idx++) {

                var resources = function (groupIndex) {
                    return function () {
                        return view._resourceBySlot({ groupIndex: groupIndex });
                    };
                };

                html += '<td>';

                html += slotTemplate({
                    date: dates[idx],
                    resources: resources(rowIdx),
                });

                html += '</td>';
            }

            html += '</tr>';
        }
        return html;
    },
})


// Helper functions have been put into the global scope to save time. You can inline them or put them into your own system as you please.
function firstDayOfNextMonth(date) {
  let result = new Date(date.getTime());

  result.setMonth(result.getMonth() + 1);
  result.setDate(1);

  return result;
}

function firstDayOfThisMonth(date){
  let result = new Date(date.getTime());

  result.setDate(1);

  return result;
}

function firstDayOfPreviousMonth(date){
  let result = new Date(date.getTime());

  result.setMonth(result.getMonth() - 1);
  result.setDate(1);

  return result;
}

/**
* Returns the first day of the month, unless it already is the first, in which case it returns the first day of the previous month.
* Used for navigation in the calendar.
*/
function firstDayOfThisOrPreviousMonth(date){
  if (date.getDate() === 1)
      return firstDayOfPreviousMonth(date);
  else
      return firstDayOfThisMonth(date);
}

function lastDayOfThisMonth(date) {
  return new Date(date.getFullYear(), date.getMonth() + 1, 0)    // month starts at 1, so zero should be the last day of the previous month etc
}

[Veselin Tsvetanov]

Hi Dennis,

Thank you for your input on the discussion. I believe that the suggested implementation would be very useful for other developers too. Moreover, it appears to be a good starting point for a future built-in Timeline year view.

Regards,
Veselin Tsvetanov
Progress Telerik

[Martin]

Could I please add a 'me too' request for properly supported timeline views with a whole month per cell, and also one with a week per cell?

I've had to implement my own, with customised copies of _addTimeSlotToCollection and _calculateSlotRanges, in addition to the usual customised calculateDateRange.

This kind of thing is likely to break in any future update of the kendo library, so I would prefer not to need to resort to this!

Thanks.

[Veselin Tsvetanov]

Hello Martin,

Here is the feature request item on the discussed:

https://feedback.telerik.com/kendo-jquery-ui/1406207-timelineyear-view-with-slots-that-last-one-month

I would recommend you to cast your vote for it, as that is how we measure the interest among the community.

Regards,
Veselin Tsvetanov
Progress Telerik

[Sean]

This is a very old request and I'm not seeing any reasonably good solution, so I'm checking to see if there's an update on the ability to do this.

Syncfusion supports this very nicely "out of the box" - demo here:  https://ej2.syncfusion.com/angular/demos/#/material/schedule/year

Will you please provide guidance as to how to get here using Kendo so I don't have to switch to a competitor?

[Veselin Tsvetanov]

Hello Sean,

Thank you for raising the discussion again.

I have just discussed the feature with the product management to increase its awareness. The request will be taken into consideration for our upcoming releases. We will closely monitor the discussion on the feedback portal and will track the votes for it.

Regards,
Veselin Tsvetanov
Progress Telerik