Kendo Scheduler DatePicker events

3
votes

How can I set event for Kendo Scheduler Start and End date DatePicker control? I want to put some logic when Start or End date changes from DatePicker control but I don't know how to do.

I tried to bind event like below but it is not working for me:

start: { 
   type: "date",
   from: "StartDate",
   validation: { required: true },
   event: { change: "onStartDateChange('start')" }
 }
3
javascriptangularjskendo-uikendo-schedulerkendo-datepicker

3 Answers

0
votes

You can select those DatePicker and add your new function when scheduler triggering edit event.

here is some code snippet you need to add

$("#scheduler").kendoScheduler({
  edit: scheduler_edit // add on scheduler edit events
  //remove for clarity
});

next you need to find DatePicker components using jquery and bind it with new function. While Scheduler edit popup window provide with 2 type different datepicker you need to select carefully whether as DatePicker or DateTimePicker 

function scheduler_edit(e) {
  console.log("edit");
  var startDatePicker = $("input[name=start][data-role=datepicker]").data().kendoDatePicker;
  startDatePicker.bind("change", newFuncForDatePicker);
}

function newFuncForDatePicker(e) {
   console.log(this.value());
}

for complete sample, you can look into this dojo

0
votes

I think Your datePicker is not bind in kendo scheduler.If you have change some date and append this date in another datePicker you can use like this example This is my edit function you can use edit function or others function as you like:

 edit: function (e) {
        //get date from event
         var getDateFromEvent = e.event.start;//or you can use different types of date like that
         var datePicker = $("[name=signUpDueDate]").data("kendoDatePicker");
         datePicker.value(getDateFromEvent).format("MM/DD/YYYY"));                                         
         datePicker.trigger("change");
};

This is your controller Then you can use html like that

 <div class="col-xs-12 col-sm-3 form-group">
   <div data-container-for="earlySignupDate">
      <input id="signUpDueDate" name="signUpDueDate" class="pull-left" type="text" data-type="date" data-role="datepicker" data-bind="value: SignUpDueDate" />
  </div>
</div>
0
votes

Like this:

<script>
$("#scheduler").kendoScheduler({
  edit: function(e)
  {
    // clone for input[name=end]
    e.container.find("input[name=start]")
     .data()
     .kendoDateTimePicker.bind("change", function(e) {
        var value = this.value(); 
        // value has the new datetime
        console.log(value);
    });
  }
});  
</script>

Se my dojo: http://dojo.telerik.com/@svejdo1/AWoNU