Disable start & end datetime input controls

3 posts, 1 answers
  1. Kenny
    Kenny avatar
    11 posts
    Member since:
    Apr 2014

    Posted 18 Feb 2015 Link to this post

    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.
  2. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1442 posts

    Posted 20 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kenny
    Kenny avatar
    11 posts
    Member since:
    Apr 2014

    Posted 20 Feb 2015 in reply to Alexander Popov Link to this post

    Perfect! :) thx.
Back to Top