Start + end date of month view

[lee]

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

[Vladimir Iliev]

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

[lee]

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

[Vladimir Iliev]

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

[lee]

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);
        }
}

[Michael]

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

 

 

[Philip]

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

[Vladimir Iliev]

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:

• Scheduler (Kendo UI): Server filtering
• Scheduler (MVC wrapper): Server filtering

Regards,
Vladimir Iliev
Telerik

 

 

[Prashant]

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

[Vladimir Iliev]

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

 

 

[lee]

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

 

 

[lee]

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>

[Prashant]

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.

[Prashant]

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

[lee]

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);
        }
    });

}

 

[lee]

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

[Prashant]

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??

[lee]

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

 

[Prashant]

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.

[lee]

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;
}

 

[Prashant]

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

[lee]

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.

[Prashant]

how can i override the read method outside of scheduler definition?

[Prashant]

datasource.fetch is not a function...when trying to navigate...any pointers??

[Vladimir Iliev]

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

 

 

[Chad]

its works in chrome but fails in  IE

[Ivan Danchev]

Hello Chad,

Could you please elaborate more on what exactly fails in IE? The original thread subject is "how to get the Scheduler month view's start and end dates". The approach Vladimir suggested works identically in IE11, Firefox and Chrome at my end: dojo example.

Regards,
Ivan Danchev
Progress Telerik