Extending agenda view to show whole month or above.

Thread is closed for posting
22 posts, 1 answers
  1. Hans van Rijnswoud
    Hans van Rijnswoud avatar
    72 posts
    Member since:
    Sep 2008

    Posted 20 Aug 2013 Link to this post

    Hi,

    I very like agenda view of new scheduler, but now it has limited functionality.
    Is it possible to show events not only for the one week but, for example, one month or 3 month? So user will see all events for the next one-three month but not only for the next week.

    Is there any configuration that will allow to do this?

    Regards,
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 22 Aug 2013 Link to this post

    Hello Hans,

    I'm afraid that currently changing the time range displayed is not supported without overriding the Agenda View.

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Hans van Rijnswoud
    Hans van Rijnswoud avatar
    72 posts
    Member since:
    Sep 2008

    Posted 22 Aug 2013 Link to this post

    Hi Rosen,

    What's means override? It's means that I should change sources of Scheduler component, or is it means that there is some solution to change view of agenda? In documentation I only see possibilities to change event view but not view of the viewport itself.

    Please explain a little bit completely how is it possible.

    Regards,
  5. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 22 Aug 2013 Link to this post

    Hi Hans,

    Please accept my apologies for not providing more in-depth info in my previous answer.

    What I meant was that a custom view which extends the Agenda should be created. This view should override the endDate method of the built-in view in order to extend the displayed period. Here you can find a simple test page which demonstrates such approach.

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Anupam
    Anupam avatar
    4 posts
    Member since:
    Sep 2013

    Posted 18 Sep 2013 Link to this post

    Two questions:

    Can you show similar example where we can extend the week view (just like the example was extending agenda view)?

    Also what are the fields/members we can override? e.g. In agenda view it overrode endDate but when I tried overwriting startDate it gave an error. So how do I know which fields I can override when I extend the view.
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 19 Sep 2013 Link to this post

    Hello Anupam,

    Overriding Week view start or end date will not work as expected, due to the fact that this view is far more complex and the logic which dates to render are not determined by the start/end dates. Actually it is the opposite way the start and end dates are set by the logic responsible for rendering the view. However, you could show more days by extending the MultiDayView base class as shown here. Note that currently only sequential dates are supported. 

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Anupam
    Anupam avatar
    4 posts
    Member since:
    Sep 2013

    Posted 19 Sep 2013 Link to this post

    Hey Rosen,

    Related question: Is there a way to completely hide hours in the weekly view i.e. show only all day row?

    We tried playing with the majorTick parameter but could not remove all the hours only some of them.

    Thanks.
  9. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 20 Sep 2013 Link to this post

    Hello Anupam,

     I'm afraid that this is not possible.

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Erik
    Erik avatar
    24 posts
    Member since:
    Sep 2013

    Posted 03 Oct 2013 Link to this post

    Hi Rosen,

    Is it possible when clicking on the left upper buttons that the custom agenda view also skips to the next month? Now it only changes + or - 1 day.

    Do you also have an example of setting this up in the razor equivalent? (at least the part where to set the type to "CustomAgenda")

    Best regards,
    Erik
  11. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 04 Oct 2013 Link to this post

    Hello Erik,

    You could control to which date agenda view is navigated by overriding its nextDate and previousDate methods. For example:

    var CustomAgenda = kendo.ui.AgendaView.extend({   
      nextDate: function() {
        var startDate = this.startDate();   
        return new Date(startDate.setMonth(startDate.getMonth() + 1));
      },
      previousDate: function() {
        var endDate = this.endDate();
        return new Date(endDate.setMonth(endDate.getMonth() - 1));       
      }
    });

    I'm afraid that currently setting custom views is not possible when configuring the widget via the ASP.NET MVC wrappers.

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Erik
    Erik avatar
    24 posts
    Member since:
    Sep 2013

    Posted 04 Oct 2013 Link to this post

    Thanks for the reply Rosen!

    Is it possible to "mix" the js for configuring this part and still using the MVC wrappers?
    I already am using the razor parts throughout my project ;-)

    - Erik
  13. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 07 Oct 2013 Link to this post

    Hello Erik,

    I'm not sure what you meant by mixing the js configuration. You can have scheduler configured via JavaScript side-by-side with one configured via the wrapper if this is what you are asking for. Also you may extend all of the scheduler instances on a given page by setting the custom view via the Scheduler prototype:

    <script>
        var MySchedulerView = kendo.ui.DayView.extend({
            name: "customView"
        });
     
        kendo.ui.Scheduler.fn.options.views = [{ type: "MySchedulerView", title: "My View" }];
    </script>
     
    @(Html.Kendo().Scheduler<TaskViewModel>()
        .Name("scheduler")
        //.....
    )

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Erik
    Erik avatar
    24 posts
    Member since:
    Sep 2013

    Posted 07 Oct 2013 Link to this post

    Yes that was what I meant with "mixing" ;-)
    I have tried this with the previous example you gave me about setting the nextDate and previousDate but this does not seem to work.

    So my razor part looks like this:
    @(Html.Kendo().Scheduler<Gusto.Web.Models.Scheduler.TaskViewModel>()
       .Name("scheduler")
       ...
    And then I inserted that js from your example in the header:
    <script type="text/javascript">
    var CustomAgenda = kendo.ui.AgendaView.extend({  
      nextDate: function() {
        var startDate = this.startDate();  
        return new Date(startDate.setMonth(startDate.getMonth() + 1));
      },
      previousDate: function() {
        var endDate = this.endDate();
        return new Date(endDate.setMonth(endDate.getMonth() - 1));      
      }
    </script>
    });
  15. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 08 Oct 2013 Link to this post

    Hi Erik,

    You should make sure that the Custom view type is defined and added to the Scheduler prototype before the initialization of the widget, as shown in the snippet I have provided.

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Erik
    Erik avatar
    24 posts
    Member since:
    Sep 2013

    Posted 10 Oct 2013 Link to this post

    Still not working for me. Tried to put that init js part everywhere so I guess something else is wrong.
    This is what I have (in that exact order):

    <script type="text/javascript">
        var CustomAgenda = kendo.ui.AgendaView.extend({
            nextDate: function () {
                var startDate = this.startDate();
                return new Date(startDate.setMonth(startDate.getMonth() + 1));
            },
            previousDate: function () {
                var endDate = this.endDate();
                return new Date(endDate.setMonth(endDate.getMonth() - 1));
            },
            endDate: function () {
                var date = kendo.ui.AgendaView.fn.endDate.call(this);
                return kendo.date.addDays(date, 31);
            },
            calculateDateRange: function () {
                //create a range of dates to be shown within the view
     
                var selectedDate = this.options.date,
                    start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                    idx, length,
                    dates = [];
     
                for (idx = 0, length = 11; idx < length; idx++) {
                    dates.push(start);
                    start = kendo.date.nextDay(start);
                }
     
                this._render(dates);
            }
        });
     
    </script>
     
    @(Html.Kendo().Scheduler<Gusto.Web.Models.Scheduler.TaskViewModel>()
        .Name("scheduler")
       ...
  17. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 11 Oct 2013 Link to this post

    Erik,

    Obviously you are missing the part where the view is added to the Scheduler widget prototype. This is shown in my original post on the matter:

    kendo.ui.Scheduler.fn.options.views = [{ type: "MySchedulerView", title: "My View" }]

    On a side note as the topic diverge from the thread's original question I would like to ask you to open a new one if additional  questions arise.Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 14 Sep 2014 Link to this post

    I can't quite get the syntax for this use typescript. What would the syntax for extending, and overriding endDate in the AgendaView be when using TypeScript?

    Thanks,
    ~S
  19. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 16 Sep 2014 Link to this post

    Hi Shea,

    Being an internal class the AgendaView definition is not available as TypeScript definition. Therefore, you will need to add this definition yourself in order to extend it. Then you will be able to extend it and provide the custom implementation:

    //add to kendo.all.d.ts
     
    class AgendaView implements SchedulerView {
        endDate(): Date
    }

    // custom agenda view implementation
     
    module kendo.ui {
        export class CustomAgenda extends kendo.ui.AgendaView {
            endDate(): Date {
                var date = new Date(super.endDate().getTime());
                date.setTime(date.getTime() + 31 * 86400000);
                return date;
            }
        }
     
    }

    $("#scheduler").kendoScheduler({
        views: [
             /*..*/
            // "agenda",
            { type: kendo.ui.CustomAgenda, title: "Custom Agenda" }
        ],
        /*..*/    
    });


    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  20. Nariman
    Nariman avatar
    32 posts
    Member since:
    Aug 2013

    Posted 19 Aug 2015 in reply to Rosen Link to this post

    How can i change the startDate and endDate for AgendaView upon rebind of the scheduler? The below function only work when the scheduler is first loaded and not in rebind event. Please kindly advise on the solution

    var CustomAgenda = kendo.ui.AgendaView.extend({
            endDate: function () {
                var date = kendo.ui.AgendaView.fn.endDate.call(this);
                return kendo.date.addDays(date, -7); // take the date and minus 7 days
            }
    });
  21. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 21 Aug 2015 Link to this post

    Hello Nariman,

    I'm not sure I understood your question, nor what you are trying to achieve. Could you please clarify, a small test page which demonstrates the issue will be appreciated.

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  22. jantoine
    jantoine avatar
    7 posts
    Member since:
    Jul 2012

    Posted 01 Sep 2015 in reply to Rosen Link to this post

    <script>
        var MySchedulerView = kendo.ui.DayView.extend({
            name: "customView"
        });
      
        kendo.ui.Scheduler.fn.options.views = [{ type: "MySchedulerView", title: "My View" }];
    </script>

     

    I tried the code above And the title and name of the view is always "MySchedulerView" instead of what is specified.

    What am I doing wrong?

    Thanks.

  23. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 02 Sep 2015 Link to this post

    Hello jantoine,

    I'm not able to observe such issue locally. Please take a look at the attached screenshot.

    Also as your question is not related to the thread's initial topic I would ask you to open a separate support request in which to provide all of the required information in order to recreate the issue locally.

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready