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

Timeline year view

20 Answers 913 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
MatanBo
Top achievements
Rank 1
MatanBo asked on 01 Dec 2014, 01:15 PM
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,

20 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 02 Dec 2014, 11:01 AM
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:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
MatanBo
Top achievements
Rank 1
answered on 08 Dec 2014, 07:40 AM
Thanks alot,
Worked for me...

Matan
0
MatanBo
Top achievements
Rank 1
answered on 08 Dec 2014, 09:08 AM
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

0
Vladimir Iliev
Telerik team
answered on 08 Dec 2014, 12:25 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
MatanBo
Top achievements
Rank 1
answered on 08 Dec 2014, 02:02 PM
It was actualy my fault, Didnt include the correct file,
Thanks alot Vladimir,

Matan.
0
Aaron
Top achievements
Rank 1
answered on 03 Aug 2015, 08:02 PM

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!

0
George
Top achievements
Rank 1
answered on 04 Aug 2015, 12:45 AM

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?

0
Vladimir Iliev
Telerik team
answered on 04 Aug 2015, 06:30 AM
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:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
George
Top achievements
Rank 1
answered on 04 Aug 2015, 08:24 PM

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.

0
Aaron
Top achievements
Rank 1
answered on 04 Aug 2015, 09:55 PM

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!

0
Vladimir Iliev
Telerik team
answered on 05 Aug 2015, 08:25 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Aiyaz
Top achievements
Rank 1
answered on 08 Sep 2015, 11:03 PM

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. 

 

0
Vladimir Iliev
Telerik team
answered on 10 Sep 2015, 08:47 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AkAlan
Top achievements
Rank 2
answered on 19 Nov 2015, 12:32 AM
Aiyaz, Have you happened on a solution? I have the exact same need. 
0
Dennis
Top achievements
Rank 1
answered on 28 Jan 2020, 09:43 AM

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
}
0
Veselin Tsvetanov
Telerik team
answered on 29 Jan 2020, 12:53 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Martin
Top achievements
Rank 1
answered on 27 Jul 2020, 11:40 AM

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.

0
Veselin Tsvetanov
Telerik team
answered on 29 Jul 2020, 09:43 AM

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

0
Sean
Top achievements
Rank 1
answered on 02 Sep 2020, 07:46 PM

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?

0
Veselin Tsvetanov
Telerik team
answered on 04 Sep 2020, 01:34 PM

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

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
Scheduler
Asked by
MatanBo
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
MatanBo
Top achievements
Rank 1
Aaron
Top achievements
Rank 1
George
Top achievements
Rank 1
Aiyaz
Top achievements
Rank 1
AkAlan
Top achievements
Rank 2
Dennis
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Martin
Top achievements
Rank 1
Sean
Top achievements
Rank 1
Share this question
or