Set default time in Scheduler editor window when adding task in month view

[Erik]

When double clicking on a day in the month view of the scheduler, the editor will show a default start and end date with time 0:00
I would like so set these to a specific time value where end date is the same as the start date and the time is set from start 9:00 - end 17:00.

I tried this using the add and edit events but it does not work. If I set the time in the edit event, the datetime picker still shows 0:00 but when I click the dropdown has selected the set time (in this case 9:00). I'm not able to set the end date the same as the start date.

Please advise.

[Alexander Popov]

Hi Erik,

I am afraid that currently this behavior is not supported out of the box, however it could be achieved using a custom solution. I would recommend you the following approach:

1. Subscribe for the Scheduler's edit event 
2. Once the event is triggered get the DateTimePicker you want to limit 
3. Attach a handler to the DateTimePicker's open event 
4. Hide the hours you do no want to show 

For convenience I prepared this small example, I hope it helps.

Regards,
Alexander Popov
Telerik

[Erik]

Hi Alexander,

Thanks for the example, but it's not what I'm looking for. All times should still be available.

I just want to set the end date the same as the start date and default (not limit) the value to be from 9:00-18:00
Can I get a reference to the DateTimePicker, like you did in your example, and set the value to be the same date as the start date? And can I also use this to set the time?

Is that possible?

- Erik

[Erik]

I now have part of the solution.

In the edit event I can set the date and time, but I only want to do this with a new task (an existing task should keep the already inserted date/time). This is what I have now:
function scheduler_edit(e) {

function scheduler_edit(e) {
    // Only set if new event (need to find out how)

    e.event.set("end", new Date(2013, 4, 7, 16, 0));

}

Almost there so: how do I get the value of the start date from the event? How do I check if this is a new task.

[Erik]

Ok, so I added the add event to set a global var and check if this is a new task and that seems to work:

Strangely enough, the setting of the end date works but the start date/time not. With the code below the time is stuck on 0:00 and when I click the dropdown of the start time it is set to 18:00? Can you help me with that last piece of the puzzle? ;-)

function scheduler_edit(e) {

 

    if (isNewTask) {

        var startdate = e.event.start;

        startdate.setHours(8);

        e.event.set("start", startdate);

 

        var enddate = e.event.start;

        enddate.setHours(18);

        e.event.set("end", enddate);

    }

    isNewTask = false;

}

 

function scheduler_add(e) {

    isNewTask = true;

}


[Alexander Popov]

Hello Erik,

I apologize for this misunderstanding. Indeed, you can still use the edit event to get the widget's instance and set a new value. In order to differentiate between adding and editing an event, you can use the event's isNew property: 

$("#scheduler").kendoScheduler({

    edit: function(e){

      if(e.event.isNew){

        var start = e.container.find("[name=start][data-role=datetimepicker]");
           var end = e.container.find("[name=end][data-role=datetimepicker]"); 


        $(start).data("kendoDateTimePicker").value(new Date()); //set start date to the current date and time
           $(end).data("kendoDateTimePicker").value(new Date()); //set enddate to the current date and time


      }

    },

Regards,
Alexander Popov
Telerik

[Mathieux]

isNew is not a property but a funciotn should be isNew() instead of isNew

[Janusz]

I've notticed that your solution works (in my case) only if I set:

var startdate = model.start;
startdate.setHours(8);
model.set("start", startdate);

var enddate = model.end;
enddate.setHours(18);
model.set("end", enddate);

//prevent to show 00:00 hour
$("#startDateTime").data("kendoDateTimePicker").value(new Date(model.start));
$("#endDateTime").data("kendoDateTimePicker").value(new Date(model.end));

[Veselin Tsvetanov]

Hi Janusz,

Thank you for your input on the discussion. It may be useful for other developers tackling the same scenario.

Regards,
Veselin Tsvetanov
Progress Telerik