Kenod UI Scheduler - How to limit the from to date range when all day event check box is not selected

Question

I'm developing a leave management application and I have 2 types of leaves. Full day leave and half day leave. I want to limit the from and to date time pickers to same day if the full day event check box is not clicked in the default popup that appears in the add event popup.

Currently it shows 1 day difference in from and to date pickers when full day event check box is not clicked and user can select any day with any gap in from and to date pickers.

I've tried to do it but failed. Would be grate if someone can help me on doing this.

Thanks.

Answer 1

First you need to add a custom template editor for the popup, here is a simple one

<script id="editor" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input name="title" /></label>
   </p>
   <p>
        <label>All day event: <input type="checkbox" name="isAllDay" data-type="boolean"></label>
  </p>
   <p>
       <label>Start: <input id="customDatePicker1"  name="startDate" /></label>
   </p>
   <p>
       <label>End: <input id="customDatePicker2"  name="endDate" /></label>
   </p>
</script>

Then to add min/max date to limit the date that can be chosen simply modify the edit function. Here i set min date is yesterday and max date is tomorrow, adjust as you wish later on

edit: function (e) {
    var $today = new Date();
        var $yesterday = new Date($today);
        $yesterday.setDate($today.getDate() - 1);
    var $tomorrow = new Date($today);
        $tomorrow.setDate($today.getDate() + 1);
        $("#customDatePicker1").kendoDatePicker({
            max: $tomorrow,
        min: $yesterday,
        value: $today
    });

    $("#customDatePicker2").kendoDatePicker({
            max: $tomorrow,
        min: $yesterday,
        value: $today
    });

  },

Here is the link to the kendo dojo

Answer 2

Developing popup using editor template is rework coz developer has to design everything from scratch again. Instead of this is there any other solution that we can use with the kendo MVC popup. some change event.