Disable start & end datetime input controls

[Kenny]

Hey guys,

I have a requirement stating that when an event is being updated the start and end dates should not be able to be editted in the popup.
In case its a new event ( thus having a TaskID of 0 ) the input controls should be enabled as it is normally.

At the moment I have the following custom edit template:

<script id="customEditorTemplate" type="text/x-kendo-template">
    @*<div class="k-edit-label"><label for="title">Title</label></div>
    <div data-container-for="title" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">
    </div>*@

    <div class="k-edit-label"><label for="start">Start</label></div>
    <div data-container-for="start" class="k-edit-field" class="disableMe">
        <input type="text" class="disableMe"
               data-role="datetimepicker" 
               data-interval="15"
               data-type="date" 
               data-format="dd/MM/yyyy hh:mm tt"
               data-bind="value:start,invisible:isAllDay" 
               name="start"/>
        <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" data-format="dd/MM/yyyy" class="disableMe" />
        <span data-bind="text: startTimezone" class="disableMe"></span>
        <span data-for="start" class="k-invalid-msg" style="display: none;" class="disableMe"></span>
    </div>

    <div class="k-edit-label"><label for="end">End</label></div>
    <div data-container-for="end" class="k-edit-field">
        <input type="text" data-type="date" data-format="dd/MM/yyyy hh:mm tt" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
        <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" data-format="dd/MM/yyyy" />
        <span data-bind="text: endTimezone"></span>
        <span data-bind="text: startTimezone, invisible: endTimezone"></span>
        <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
    </div>

    <div class="k-edit-label"><label for="isAllDay">All day event</label></div>
    <div data-container-for="isAllDay" class="k-edit-field">
        <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
    </div>
    
    <div class="k-edit-label"><label for="ApplyCallgroupOffsets">Apply callgroup offsets</label></div>
    <div data-container-for="ApplyCallgroupOffsets" class="k-edit-field">
        <input type="checkbox" name="ApplyCallgroupOffsets" data-type="boolean" data-bind="checked:ApplyCallgroupOffsets">
    </div>
    
    @*<div class="k-edit-label"><label for="recurrenceRule">Repeat</label></div>
    <div data-container-for="recurrenceRule" class="k-edit-field">
        <div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
    </div>*@

    <div class="k-edit-label"><label for="description">Description</label></div>
    <div data-container-for="description" class="k-edit-field">
        <textarea name="description" class="k-textbox" data-bind="value:description"></textarea>
    </div>
    
    <div class="k-edit-label"><label for="Person">Person</label></div>
    <div data-container-for="PersonID" class="k-edit-field" id="resourcesDiv0"></div>
    
    <div class="k-edit-label"><label for="Callgroup">Callgroup</label></div>
    <div data-container-for="CallgroupID" class="k-edit-field" id="resourcesDiv1"></div>
    
    <script>
       jQuery(function() {
            var container = jQuery("\#resourcesContainer");
            var resources = jQuery("\#scheduler").data("kendoScheduler").resources;
                
            for( resource = 0; resource<resources.length; resource++) 
            {
                if(resources[resource].multiple)
                {
                    jQuery(kendo.format('<div class="k-edit-label"><label for="{0}">{0}</label></div>', resources[resource].title))
                     .appendTo(container);
    
                    container.append('<div data-container-for="" class="k-edit-field"></div>');

                    jQuery(kendo.format('<select style="background-color: white;" data-bind="value: {0}" name="{0}">', resources[resource].field))
                        .appendTo(container)
                        .kendoMultiSelect({
                            dataTextField: resources[resource].dataTextField,
                            dataValueField: resources[resource].dataValueField,
                            dataSource: resources[resource].dataSource,
                            valuePrimitive: resources[resource].valuePrimitive,
                            itemTemplate: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField),
                            tagTemplate: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                        });
    
                    container.append("</div>");
                } else {
                    var resourcesContainer = jQuery("\#resourcesDiv" + resource);

                   jQuery(kendo.format('<select style="background-color: white;" data-bind="value: {0}" name="{0}" id="resourceList{0}">', resources[resource].field))
                    .appendTo(resourcesContainer)
                    .kendoDropDownList({
                        dataTextField: resources[resource].dataTextField,
                        dataValueField: resources[resource].dataValueField,
                        dataSource: resources[resource].dataSource,
                        valuePrimitive: resources[resource].valuePrimitive,
                        optionLabel: "None",
                        template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField),
                        change: function(e)
                        {
                            // Get the selected callgroup its offsets and show it in the popup:

                            var value = parseInt(this.value());
                            var callgroup = _.findWhere(schedulerVM.chosenCallgroups(), { id: value });

                            appendCallgroupOffsetsToPopup(callgroup);
                        }                     
                     });
    
                }
            }
        
            jQuery("\.k-dropdown").css('background-color', 'white');
    
            // Get the first callgroup and show its offsets in the popup:

            var callgroup = schedulerVM.chosenCallgroups()[0];
            appendCallgroupOffsetsToPopup(callgroup);
    
            function appendCallgroupOffsetsToPopup(callgroup) {
                $("\#callgroupOffsets").remove();

                if(callgroup)
                {
                    var title = "Start offset: " + ("0" + callgroup.defaultTimeFromHours).slice(-2) + ":" + ("0" + callgroup.defaultTimeFromMinutes).slice(-2) + "\\nEnd offset: " + ("0" + callgroup.defaultTimeTillHours).slice(-2) + ":" + ("0" + callgroup.defaultTimeTillMinutes).slice(-2);
                
                    var callgroupDiv = jQuery("\#resourcesDiv1");
                    callgroupDiv.append("<a id='callgroupOffsets' href='\#' title='" + title + "'><i class='fa fa-info-circle' style='margin-left: 5px;'></i></a>");
                }
            }

        })
    <\/script>

</script>

Anyone?
Thanks in advance.

Kind Regards,
Kenny.

[Alexander Popov]

Hello Kenny,

I would suggest checking this example in which similar behavior is achieved using the Scheduler's edit event handler. 

Regards,
Alexander Popov
Telerik

 

 

[Kenny]

Perfect! :) thx.