Start + end date of month view

25 posts, 1 answers
  1. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 24 Oct 2013 Link to this post

    I am late binding the schedule data and would like to get the start and end date of the current view in jquery, in particular the month view.
    Acquiring the focused date works and at a push I could grab data a month wither way, but ideally I would just like to get data for current view
    var scheduler = $("#divHistorySchedule").data("kendoScheduler");
    -- works
    alert(scheduler.Date());
    -- fails
    alert(scheduler.StartTime);
    Thanks,
    Lee
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 25 Oct 2013 Link to this post

    Hi Lee,

     
    You can get the current view using the view method and then get the current "startTime" or "startDate" using the view methods. Please check the example below:

    var scheduler = $("#divHistorySchedule").data("kendoScheduler");
    var view = scheduler.view();
     
    alert(view.startDate());
    alert(view.startTime());

    Kind 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. Kendo UI is VS 2017 Ready
  4. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 25 Oct 2013 Link to this post

    Thanks, that works OK for the static view.

    Hit another issue related to this, I am using the navigate event to load the next months data, the e.date parameter on the navigate function shows the correct date, but accessing the start\end date via the view still has the range for the previous month (the one I am navigating from rather than navigating to).

    When in month view and navigating from October 2013 to November 2013 by clicking the next month button
    navigate: function (e) {
      var view = $("#divHistorySchedule").data("kendoScheduler").view();
     
      alert(view.startDate().toString("dd/MM/yyyy")); -- returns 29/09/2013
      alert(view.endDate().toString("dd/MM/yyyy")); -- returns 09/11/2013
      alert(e.date.toString("dd/MM/yyyy")); -- returns 01/11/2013
                 
      ...
    }
    Whereas I really need the start\end date of November, not October.  Is there a way I can bind the post navigate event?

    I can code round this by deriving view start\end from the e parameter on the navigate event, but wanted to check if there was an easier way.

    Thanks,
    Lee
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 28 Oct 2013 Link to this post

    Hi Lee,

     
    You can use the navigate event "date" parameter which holds the next date that will be shown in the view. 

    e.g.:

    function onNavigate(e) {
        alert(e.date);
    }

    Kind 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. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 28 Oct 2013 Link to this post

    Thanks, but I was after the start\end of the month (including the overlapping days from next\previous month.

    I have coded round it like this for the moment, but I would recommend that the range values are added to the navigate parameters at some point.

    (Code based on supposition first day column is always Sunday and number of cells displayed is 6 x 7)

    $("#divHistorySchedule").kendoScheduler({
            height: 600,
            views: [
                {
                    type: "month",
                    eventHeight: 50,
                    selected: true
                }],
            timezone: "Etc/UTC",
            editable: false,
            navigate: function (e) {
                var startDate = e.date.clone();
                var endDate = e.date.clone();
                startDate.addDays(startDate.getDate() * -1).addDays(startDate.getDay() * -1);
                endDate = startDate.clone().addDays(41);
     
                LoadScheduleData(startDate, endDate);
            }
    }
  7. Michael
    Michael avatar
    2 posts
    Member since:
    Apr 2015

    Posted 30 Apr 2015 Link to this post

    I am having the same issue, when I handle the Navigate event, the view.startDate() and view.endDate() are the prior values, I need them to be the next values.    e.Date does not really work.     So, if they are in a week view and hit the Next button, I need the next weeks start and end dates.  If they switch to the month view, I need the first day shown on the calendar as the startDate() and the last day shown on the calendar as the endDate().   This is not what I am getting...

     

     

  8. Philip
    Philip avatar
    2 posts
    Member since:
    Oct 2013

    Posted 01 May 2015 in reply to Michael Link to this post

    Hi Michael,

    I recommend using datejs for this issue https://code.google.com/p/datejs/ and mixing it with the code I posted.

    You can acquire week date range using something like

    var endDate = Date.today().next().friday()    // Returns the date of the next Friday.
    var startDate = Date.today().last().monday()    // Returns the date of the previous Monday

    Hope that helps.

    Lee

  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 04 May 2015 Link to this post

    Hi Michael,

    I would suggest to check the following example in our CodeLibrary which demonstrates how to get the next view start / end dates in order to load filtered set of events:

    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. Prashant
    Prashant avatar
    8 posts
    Member since:
    Apr 2016

    Posted 14 Apr in reply to Vladimir Iliev Link to this post

    var scheduler = $("#divHistorySchedule").data("kendoScheduler");

     

    when i write this i get unidentified token error in Javascript.Can you please tell me what am i missing

  11. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 14 Apr Link to this post

    Hello Lee,

    As your question is out of the original topic of this support conversation, may I kindly ask you to open a new support thread for the Scheduler? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.


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

    Posted 14 Apr in reply to Vladimir Iliev Link to this post

    Hi Vladamir,

    I resolved this issue myself and posted a response 3 years ago, so do not really feel a need any more resolution.  I think this has come back on your radar because user "Prashant" recently replied to the thread. Thanks for your support though, I have always appreciated just how good the Telerik support team is.

    Prashant, if you are receiving this reply please note that instead of $("#divHistorySchedule") you will need to add a jquery selector identifying the scheduler on your page.  For example If you have assigned the scheduler to a div with an id on "MyScheduler" you will need to enter $("#MyScheduler"), or if you have assigned a class of MySchedulerClass then use $(".MySchedulerClass ")

    Hope that helps.

    Lee

     

     

  13. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 14 Apr in reply to Prashant Link to this post

    Please note that instead of
    $("#divHistorySchedule") you will need to add a jquery selector
    identifying the scheduler (or div you want scheduler to appear in) on your page.  For example If you have
    assigned the scheduler to a div with an id of "MyScheduler" you will
    need to enter $("#MyScheduler"), or if you have assigned a class of
    MySchedulerClass then use $(".MySchedulerClass ").

    To fix your immediate issue, enter this in your html:

    <div id="divHistorySchedule"></div>

  14. Prashant
    Prashant avatar
    8 posts
    Member since:
    Apr 2016

    Posted 14 Apr in reply to lee Link to this post

    Hi Lee,

     

    The problem that i am trying to solve is that when the page is loaded i want to fire an ajax request which takes the start and end dates from the current view and gets events only of the current month.But getting this error.Can you please tell me where is the problem and how can i send the start and end dates in the on ready event of the page.

  15. Prashant
    Prashant avatar
    8 posts
    Member since:
    Apr 2016

    Posted 14 Apr in reply to Prashant Link to this post

    The problem being that since in the onReady event the celandar has not loaded yet and i am trying to fetch the view.So getting undefined error.Please help me with this
  16. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 14 Apr in reply to Prashant Link to this post

    You will need to:

    1. Set start date of schedule on page load - Something like this should suffice http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#methods-date

    2. Load the data for the scheduler.  If you are loading all the data just use the normla datasource method, if like me your users can have lots of data you can load a months worth of data as per my previous post (the one with navigate event) and then use something like:

    function LoadSchedulerData(startDate, endDate, closeWindow, scheduleView) {
        if (IsMobile()) {
            return;
        }
        $.ajax({
            url: getServiceRoot() + "GetBookingHistorySchedule",
            data: {
                viewMode: scheduleView,
                startDateStr: startDate.toString("dd/MM/yyyy"),
                endDateStr: endDate.toString("dd/MM/yyyy"),
                random: new Date().getTime()
            },
            dataType: "json",
            type: "GET",
            timeout: 20000,
            contentType: "application/json; charset=utf-8",
            success: function (data) {

                var dataObj = $.map(data.d, function (item) {
                    return {
                        start: item.start,
                        end: item.end,
                        title: item.title,
                        color: item.color
                    };
                });

                var dataSource = new kendo.data.SchedulerDataSource({
                    data: dataObj
                });

                var scheduler = $("#divHistorySchedule").data("kendoScheduler");
                scheduler.setDataSource(dataSource);
            }
        });

    }

     

  17. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 14 Apr in reply to lee Link to this post

    ..and call it like

    LoadSchedulerData(
            $("#divHistorySchedule").data("kendoScheduler").view().startDate(),
            $("#divHistorySchedule").data("kendoScheduler").view().endDate(),
            closeWindow,
            $("#divHistorySchedule").data("kendoScheduler").view().name
        );

    I included viewmode so I could determine how much data should be loaded on the server side.

  18. Prashant
    Prashant avatar
    8 posts
    Member since:
    Apr 2016

    Posted 14 Apr in reply to lee Link to this post

    But i do not want to set the dates i want to simply use the date of the view.So that when the url inside transport --> read fires i can pass start and end dates of the grid as URL params.How to do that?? getting start and end dates of grid on page load??
  19. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 14 Apr in reply to Prashant Link to this post

    So you want to invoke the results from a RESTful service when the page loads?  Is that right.

    I would suggest looking at the parameterMap concept of the kendo transport definitions, you can then pass back parameters via REST, OData, Post variables, etc.  Plenty of examples from Google, here are a few I found

    http://jsbin.com/udifit/1/edit?html,js,output

    http://www.telerik.com/forums/create-update-detsroy-transport-methods

     

  20. Prashant
    Prashant avatar
    8 posts
    Member since:
    Apr 2016

    Posted 14 Apr in reply to lee Link to this post

    I am able to call the restful service but i am unable to pass start and end dates of the view to it because the calendar has not yet initialised.
  21. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 14 Apr in reply to Prashant Link to this post

    Well either you can guess the start\end date based upon the initial load of the page - if always loading for today or url param, derive from either using datejs or momentjs to find start\end of month via javascript call.

    Other option is when your calendar is initialized, then hook into the navigate event which is called when scheduler rolls up

    navigate: function (e) {
                    var bounds = GetScheduleBounds(e.view, e.date);
                    LoadSchedulerData(bounds[0], bounds[1], true, e.view);
                },

     

    ...

    function GetScheduleBounds(view, focusDate) {

        var result = [];
        var startDate = focusDate.clone();
        var endDate = focusDate.clone();

        switch (view) {
            case "agenda":
                startDate.addDays(-1);
                endDate.addDays(11);
                break;

            case "month":
                startDate.addDays(startDate.getDate() * -1).addDays(startDate.getDay() * -1);
                endDate = startDate.clone().addDays(41);
                break;
        }

        result.push(startDate);
        result.push(endDate);
        return result;
    }

     

  22. Prashant
    Prashant avatar
    8 posts
    Member since:
    Apr 2016

    Posted 14 Apr in reply to lee Link to this post

    Can i change the datasource read event after the calendar has loaded....that way i will be able to get the dates from the calendar itself.Can you help me how to override the data source and fire the ajax from it when the page load has completed so the url params will not go empty
  23. lee
    lee avatar
    12 posts
    Member since:
    Oct 2013

    Posted 14 Apr in reply to Prashant Link to this post

    Sorry the only way I have found is as above using separate method - I found using the transport definitions useful but restrictive.  Is probably possible but you may want to create new support ticket to get an answer.
  24. Prashant
    Prashant avatar
    8 posts
    Member since:
    Apr 2016

    Posted 14 Apr in reply to lee Link to this post

    how can i override the read method outside of scheduler definition?
  25. Prashant
    Prashant avatar
    8 posts
    Member since:
    Apr 2016

    Posted 14 Apr Link to this post

    datasource.fetch is not a function...when trying to navigate...any pointers??
  26. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 17 Apr Link to this post

    Hello Prashant,

    As I already mention your questions are out of the original topic of this support conversation - that why I would ask you once again to open a new support thread for the Scheduler. In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.
     
    Regards,
    Vladimir Iliev
    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