Timeline year view

21 posts, 1 answers
  1. MatanBo
    MatanBo avatar
    9 posts
    Member since:
    Nov 2014

    Posted 01 Dec 2014 Link to this post

    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,
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 02 Dec 2014 Link to this post

    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!
     
  3. MatanBo
    MatanBo avatar
    9 posts
    Member since:
    Nov 2014

    Posted 08 Dec 2014 Link to this post

    Thanks alot,
    Worked for me...

    Matan
  4. MatanBo
    MatanBo avatar
    9 posts
    Member since:
    Nov 2014

    Posted 08 Dec 2014 in reply to Vladimir Iliev Link to this post

    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

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 08 Dec 2014 Link to this post

    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!
     
  6. MatanBo
    MatanBo avatar
    9 posts
    Member since:
    Nov 2014

    Posted 08 Dec 2014 Link to this post

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

    Matan.
  7. Aaron
    Aaron avatar
    14 posts
    Member since:
    May 2015

    Posted 03 Aug 2015 in reply to MatanBo Link to this post

    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!

  8. George
    George avatar
    16 posts
    Member since:
    Mar 2012

    Posted 03 Aug 2015 Link to this post

    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?

  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 04 Aug 2015 Link to this post

    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!
     
  10. George
    George avatar
    16 posts
    Member since:
    Mar 2012

    Posted 04 Aug 2015 in reply to Vladimir Iliev Link to this post

    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.

  11. Aaron
    Aaron avatar
    14 posts
    Member since:
    May 2015

    Posted 04 Aug 2015 in reply to Vladimir Iliev Link to this post

    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!

  12. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 05 Aug 2015 Link to this post

    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!
     
  13. Aiyaz
    Aiyaz avatar
    1 posts
    Member since:
    Nov 2010

    Posted 08 Sep 2015 in reply to Vladimir Iliev Link to this post

    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. 

     

  14. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 10 Sep 2015 Link to this post

    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!
     
  15. AkAlan
    AkAlan avatar
    118 posts
    Member since:
    Jun 2009

    Posted 18 Nov 2015 in reply to Aiyaz Link to this post

    Aiyaz, Have you happened on a solution? I have the exact same need. 
  16. Dennis
    Dennis avatar
    1 posts
    Member since:
    Feb 2019

    Posted 28 Jan 2020 in reply to Aaron Link to this post

    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
    }
  17. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1235 posts

    Posted 29 Jan 2020 Link to this post

    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.
  18. Martin
    Martin avatar
    1 posts
    Member since:
    Oct 2019

    Posted 27 Jul 2020 in reply to Veselin Tsvetanov Link to this post

    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.

  19. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1235 posts

    Posted 29 Jul 2020 Link to this post

    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

  20. Sean
    Sean avatar
    13 posts
    Member since:
    Sep 2010

    Posted 02 Sep 2020 in reply to Veselin Tsvetanov Link to this post

    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?

  21. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1235 posts

    Posted 04 Sep 2020 Link to this post

    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/.

Back to Top