This is a migrated thread and some comments may be shown as answers.
Scheduler Date Formatting
2 Answers 121 Views
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Benjamin asked on 19 May 2015, 04:32 AM

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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 21 May 2015, 07:40 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Benjamin
Top achievements
Rank 1
answered on 26 May 2015, 06:08 AM

Hi Georgi,

Thanks for your answer it solved my problem.

 

Asked by
Benjamin
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Benjamin
Top achievements
Rank 1
Share this question
or