Scheduler Date Formatting

[Benjamin]

Hi There,

I have an issue with date formatting in scheduler. I need to change the recurrence end date to have same format as the start and end date. I have attached a screen shot from my work where the end date highlighted in green.

Below is the script template use for the popup window:

 

<script type="text/x-kendo-template" id="CustomEditorTemplate">
     <style type="text/css">
        label{
            font-weight: normal;
            font-family: arial;
        }
        .k-recur-weekday-checkbox{
            margin-right: 0 !important;
        }
        
        
    </style>

    <div class="k-edit-label">
        <label  for="Start">Start</label>
    </div>
    <div data-container-for="start" class="k-edit-field">
        <input name="start" required="required" style="z-index: inherit;" type="datetime"
            data-bind="value:start,invisible:isAllDay" 
            data-format="dd-MMM-yyyy h:mm tt" 
            data-role="datetimepicker" />

        <input name="start" required="required" type="date" style="z-index: inherit;"
            data-bind="value:start,visible:isAllDay"
            data-format="dd-MMM-yyyy"
            data-role="datepicker" />

        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg"></span>
    </div>

    <div class="k-edit-label">
        <label for="End">End</label>
    </div>
    <div data-container-for="end" class="k-edit-field">

        <input name="end" required="required" style="z-index: inherit;" type="datetime"
            data-bind="value:end,invisible:isAllDay" 
            data-format="dd-MMM-yyyy h:mm tt" 
            data-role="datetimepicker" />

        <input name="end" required="required" type="date" style="z-index: inherit;"
            data-bind="value:end,visible:isAllDay"
            data-format="dd-MMM-yyyy"
            data-role="datepicker" />

        <span data-bind="text: endTimezone"></span>
        <span data-for="end" class="k-invalid-msg"></span>
    </div>

    <div class="k-edit-label">
        <label for="IsAllDay">All Day?</label>
    </div>
    <div data-container-for="isAllDay" class="k-edit-field">
        <input data-bind="checked:isAllDay" name="IsAllDay" type="checkbox" value="true" />
    </div>  
    
    <div class="k-edit-label">
        <label for="Type">Type</label>
    </div>
    
    <div data-container-for="Type" class="k-edit-field">
        <div id="resourcesContainer">        
        </div>
    </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" id="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 class="k-textbox" cols="18" data-bind="value:description" id="description" name="description" rows="1">
    </textarea>
    </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('<select 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)
                     });
            
                } else {
                   jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[resource].field))
                    .appendTo(container)
                    .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)
                     }); 
                }
            }     
        })        
    <\/script>
</script>

 

I tried to add kendo culture but no luck.

Could please someone help me to change it?

Thanks.

[Georgi Krustev]

Hello Benjamin,

In general, the RecurrenceEditor uses a DatePicker widget for the until range, which is not designed to show time portion. Also the widget is not exposed for public modification and it is in control of the RecurrenceEditor only. I am afraid that the only to accomplish your goal is to modify a private variables, which is not a recommended approach, because the private variables can change in future. If you need to accomplish your goal at any cost, then please refer to this Dojo demo that shows how to modify the underlying Until datepicker.

Regards,
Georgi Krustev
Telerik

 

 

[Benjamin]

Hi Georgi,

Thanks for your answer it solved my problem.