How to change time format in select time combobox of EventEditWindow Calendar

  1. #1

    How to change time format in select time combobox of EventEditWindow Calendar

    Dear Sir,

    I would like to change time format from am/pm to 24Hrs (00:00-24:00) in select time combobox of EventEditWindow & EditDetailWindow.
    Could you please advice.

    Click image for larger version. 

Name:	EventEditWindow.jpg 
Views:	261 
Size:	62.6 KB 
ID:	5541

    Click image for larger version. 

Name:	EditDetailWindow.jpg 
Views:	224 
Size:	49.6 KB 
ID:	5542


    Thank you.

    I applied code from this solution forums.ext.net/showthread.php?21830

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mycalendar.aspx.cs" Inherits="KRIS.mycalendar" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">  
        <title>Ext.Net Full Custom and Local Calendar</title> 
        <style type="text/css">
            .ext-color-4,
            .ext-ie .ext-color-4-ad,
            .ext-opera .ext-color-4-ad {
                color: #663300;
            }
            .ext-cal-day-col .ext-color-4,
            .ext-dd-drag-proxy .ext-color-4,
            .ext-color-4-ad,
            .ext-color-4-ad .ext-cal-evm,
            .ext-color-4 .ext-cal-picker-icon,
            .ext-color-4-x dl,
            .ext-color-4-x .ext-cal-evb {
                background: #663300;
            }
            .ext-color-4-x .ext-cal-evb,
            .ext-color-4-x dl {
                border-color: #7C3939;
            }
              
            .ext-color-5,
            .ext-ie .ext-color-5-ad,
            .ext-opera .ext-color-5-ad {
                color: #660066;
            }
            .ext-cal-day-col .ext-color-5,
            .ext-dd-drag-proxy .ext-color-5,
            .ext-color-5-ad,
            .ext-color-5-ad .ext-cal-evm,
            .ext-color-5 .ext-cal-picker-icon,
            .ext-color-5-x dl,
            .ext-color-5-x .ext-cal-evb {
                background: #660066;
            }
            .ext-color-5-x .ext-cal-evb,
            .ext-color-5-x dl {
                border-color: #660066;
            }
                              
            .ext-color-6,
            .ext-ie .ext-color-6-ad,
            .ext-opera .ext-color-6-ad {
                color: #7F0000;
            }
            .ext-cal-day-col .ext-color-6,
            .ext-dd-drag-proxy .ext-color-6,
            .ext-color-6-ad,
            .ext-color-6-ad .ext-cal-evm,
            .ext-color-6 .ext-cal-picker-icon,
            .ext-color-6-x dl,
            .ext-color-6-x .ext-cal-evb {
                background: #7F0000;
            }
            .ext-color-6-x .ext-cal-evb,
            .ext-color-6-x dl {
                border-color: #7C3939;
            }
      
            .ext-color-7,
            .ext-ie .ext-color-7-ad,
            .ext-opera .ext-color-7-ad {
                color: #000000;
            }
            .ext-cal-day-col .ext-color-7,
            .ext-dd-drag-proxy .ext-color-7,
            .ext-color-7-ad,
            .ext-color-7-ad .ext-cal-evm,
            .ext-color-7 .ext-cal-picker-icon,
            .ext-color-7-x dl,
            .ext-color-7-x .ext-cal-evb {
                background: #000000;
            }
            .ext-color-7-x .ext-cal-evb,
            .ext-color-7-x dl {
                border-color: #7C3939;
            }
        </style>
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
          
        <script src="MyEventRecord.js" type="text/javascript"></script>
      
        <script type="text/javascript">
            Ext.calendar.DayBodyTemplate.override({
                applyTemplate: function(o) {
                    this.today = new Date().clearTime();
                    this.dayCount = this.dayCount || 1;
    
                    var i,
                        days = [],
                        dt = o.viewStart.clone(),
                        times;
    
                    for (i = 0; i < this.dayCount; i++) {
                        days[i] = dt.add(Date.DAY, i);
                    }
    
                    times = [];
                    dt = new Date().clearTime();
                    for (i = 0; i < 24; i++) {
                        times.push(dt.format('H:i')); //the default value is 'ga'.
                        //Change to a respective format, see the link below.
                        dt = dt.add(Date.HOUR, 1);
                    }
    
                    return Ext.calendar.DayBodyTemplate.superclass.applyTemplate.call(this, {
                        days: days,
                        dayCount: days.length,
                        times: times
                    });
                }
            });
        </script>
        
        <script type="text/javascript">
            var CompanyX = {
                getCalendar: function() { return CompanyX.CalendarPanel1; },
                getStore: function() { return CompanyX.EventStore1; },
                getWindow: function() { return CompanyX.EventEditWindow1; },
                customWindow: function() {
                    // event edit window localization 
                    var win = this.getWindow();
                    var form = win.formPanel;
                    var titleItem = form.get('title');
                    dateRangeItem = form.get('date-range');
                    calendarItem = form.get('calendar');
                    detailsLnk = win.fbar.get(0);
                    saveBtn = win.fbar.get(2);
                    deleteBtn = win.fbar.get(3);
                    cancelBtn = win.fbar.get(4);
                    titleItem.fieldLabel = 'Title'; // Title  
                    dateRangeItem.fieldLabel = 'When';   // When
                    dateRangeItem.toText = 'To';       // to
                    dateRangeItem.allDayText = 'Is all day';  // Is all day
                    calendarItem.fieldLabel = 'Group';  // Calendar group
                    detailsLnk.text = '<a href="#" id="tblink">Edit Details</a>';    // Edit Details
                    saveBtn.text = 'Save';        // Save button
                    deleteBtn.text = 'Delete';        // Delete button
                    cancelBtn.text = 'Cancel';       // Cancel button
    
                    // date-range date format
                    win.get(0).get(1).on('render', function() {
                        this.startDate.format = 'd-m-Y';
                        this.endDate.format = 'd-m-Y';
                        this.startTime.format = 'H:i';
                        this.endTime.format = 'H:i';
                    });
                },
                updateTitle: function(startDt, endDt) {
                    var msg = '';
                    if (startDt.clearTime().getTime() == endDt.clearTime().getTime()) {
                        msg = startDt.format('F j, Y');
                    }
                    else if (startDt.getFullYear() == endDt.getFullYear()) {
                        if (startDt.getMonth() == endDt.getMonth()) {
                            msg = startDt.format('F j') + ' - ' + endDt.format('j, Y');
                        }
                        else {
                            msg = startDt.format('F j') + ' - ' + endDt.format('F j, Y');
                        }
                    }
                    else {
                        msg = startDt.format('F j, Y') + ' - ' + endDt.format('F j, Y');
                    }
                    this.Panel1.setTitle(msg);
                },
                setStartDate: function(picker, date) {
                    this.getCalendar().setStartDate(date);
                },
                rangeSelect: function(cal, dates, callback) {
                    this.record.show(cal, dates);
                    this.getWindow().on('hide', callback, cal, { single: true });
                },
                dayClick: function(cal, dt, allDay, el) {
                    this.record.show.call(this, cal, {
                        StartDate: dt, IsAllDay: allDay
                    }, el);
                },
                record: {
                    add: function(win, rec) {
                        win.hide();
                        rec.data.IsNew = false;
                        // save the event to database and update the event store
                        CompanyX.record.save(rec);
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was added');
                    },
                    update: function(win, rec) {
                        win.hide();
                        rec.commit();
                        // update the event in the database
                        CompanyX.record.upd(rec);
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
                    },
                    remove: function(win, rec) {
                        CompanyX.record.del(rec);
                        // remove the event from the database
                        this.getStore().remove(rec);
                        win.hide();
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was deleted');
                    },
                    editFormAdd: function(win, rec) {
                        // called from the eventeditform EventAdd 
                        // save the event to database and update the event store
                        CompanyX.record.save(rec);
                    },
                    editFormUpdate: function(win, rec) {
                        // called from the eventeditform EventUpdate
                        // update the event in the database
                        CompanyX.record.upd(rec);
                    },
                    editFormDelete: function(win, rec) {
                        // called from the eventeditform EventDelete
                        // delete the event from database
                        CompanyX.record.del(rec);
                    },
                    edit: function(win, rec) {
                        win.hide();
                        CompanyX.getCalendar().showEditForm(rec);
                    },
                    resize: function(cal, rec) {
                        rec.commit();
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
                    },
                    move: function(cal, rec) {
                        rec.commit();
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was moved to ' + rec.data.StartDate.format('F jS' + (rec.data.IsAllDay ? '' : ' \\a\\t g:i a')));
                    },
                    show: function(cal, rec, el) {
                        CompanyX.getWindow().show(rec, el);
                    },
                    save: function(rec) {
                        // save the event data to database                   
                        Ext.net.DirectMethod.request({
                            url: "RemoteService3.asmx/Save",
                            json: true,
                            cleanRequest: true,
                            params: {
                                e: rec.data
                            },
                            success: function(result) {
                                // update record with db-assigned id                  
                                rec.data.EventId = result.EventId;
                                // add to store
                                CompanyX.getStore().add(rec);
                            }
                        });
                    },
                    upd: function(rec) {
                        // update event data in the database
                        // event data row is found in the database using EventId
                        Ext.net.DirectEvent.request({
                            url: "RemoteService3.asmx/Update",
                            json: true,
                            cleanRequest: true,
                            extraParams: {
                                e: rec.data
                            }
                        });
                    },
                    del: function(rec) {
                        Ext.net.DirectEvent.request({
                            url: "RemoteService3.asmx/Delete",
                            json: true,
                            cleanRequest: true,
                            extraParams: { e: rec.data }
                        });
                    }
                }
            };
     
            var calendar_beforeRender = function (calendar, store) {
                // localize event edit form
                var form = calendar.get(calendar.id + '-edit');
                form.titleTextAdd = 'form title when add';         // form title when add
                form.titleTextEdit = 'form title when edit';    // form title when edit
     
                // left col
                var lcol = form.get('left-col');
                lcol.get(0).fieldLabel = 'Title';   // Title
                dateRangeItem = lcol.get(1);
                dateRangeItem.fieldLabel = 'When';       // When
                dateRangeItem.toText = 'to';       // to
                dateRangeItem.allDayText = 'Is all day';  // Is all day
     
                // date-range date format
                dateRangeItem.on('render', function () {
                    this.startDate.format = 'd-m-Y';
                    this.endDate.format = 'd-m-Y';
                    this.startTime.format = 'H:i';
                    this.endTime.format = 'H:i';
                });
    
                lcol.get(2).fieldLabel = 'Calendar group';       // Calendar group
                lcol.get(3).fieldLabel = 'Reminder';  // Reminder
     
                // right col
                var rcol = form.get('right-col');
                rcol.get(0).fieldLabel = 'Notes';  // Notes
                rcol.get(1).fieldLabel = 'Location';       // Location
                rcol.get(2).fieldLabel = 'Url';        // Url
     
                // footer
                form.fbar.get(0).text = 'Save';   // Save
                form.fbar.get(1).text = 'Delete';     // Delete
                form.fbar.get(2).text = 'Cancel';        // Cancel
     
                // add new fields           
                // here a data-bound combo is added to the form
                // The "customStore" store is decleared in markup  and databound in code behind
                var cmb = new Ext.form.ComboBox({
                    id: 'ComboBox1',
                    fieldLabel: 'CustomField',
                    store: store,
                    dataIndex: 'MyCustomField1',
                    mode: 'local',
                    displayField: 'lastname',
                    valueField: 'id',
                    anchor: '90%',
                    triggerAction: 'all',
                    selectOnFocus: true,
                    typeAhead: true
                });
     
                lcol.add(cmb);
            };
        </script>
    </head>
    <body>  
        <form id="Form1" runat="server">  
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" />  
              
            <ext:Store ID="CustomStore" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="id">
                        <Fields>
                            <ext:RecordField Name="id" Type="Int" />
                            <ext:RecordField Name="lastname" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
      
            <ext:Viewport ID="Viewport1" runat="server" Layout="fit">      
                <Items>          
                    <ext:CalendarPanel ID="CalendarPanel1" runat="server" Height="500">              
                        <EventStore ID="EventStore1"
                                    runat="server"
                                    IgnoreExtraFields="false">
                        </EventStore>              
                        <GroupStore ID="GroupStore1" runat="server">                  
                            <Groups>                      
                            <ext:Group CalendarId="1" Title="Group 1" />                      
                            <ext:Group CalendarId="2" Title="Group 2" />                      
                            <ext:Group CalendarId="3" Title="Group 3" />                      
                            <ext:Group CalendarId="4" Title="Group 4" />
                            <ext:Group CalendarId="5" Title="Group 5" />
                            <ext:Group CalendarId="6" Title="Group 6" />
                            <ext:Group CalendarId="7" Title="Group 7" />
                            </Groups>              
                        </GroupStore>              
                        <Listeners>                  
                            <EventClick Fn="CompanyX.record.show" Scope="CompanyX" />                  
                            <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />                  
                            <RangeSelect Fn="CompanyX.rangeSelect" Scope="CompanyX" />                  
                            <EventMove Fn="CompanyX.record.move" Scope="CompanyX" />                  
                            <EventResize Fn="CompanyX.record.resize" Scope="CompanyX" />                  
                            <BeforeRender Handler="calendar_beforeRender(this, #{CustomStore});" />  
                            <EventAdd Fn="CompanyX.record.editFormAdd" Scope="CompanyX" />
                            <EventUpdate Fn="CompanyX.record.editFormUpdate" Scope="CompanyX" />
                            <EventDelete Fn="CompanyX.record.editFormDelete" Scope="CompanyX" />
                        </Listeners>                              
                        </ext:CalendarPanel>      
                    </Items>  
                </ext:Viewport>  
                  
                <ext:EventEditWindow      
                    ID="EventEditWindow1"      
                    runat="server"      
                    Hidden="true"      
                    GroupStoreID="GroupStore1"
                    TitleTextAdd="New Event"
                    TitleTextEdit="Edit Event">      
                    <Listeners>          
                        <EventAdd Fn="CompanyX.record.add" Scope="CompanyX" />          
                        <EventUpdate Fn="CompanyX.record.update" Scope="CompanyX" />          
                        <EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />          
                        <EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />      
                        <Render Fn="CompanyX.customWindow" Scope="CompanyX" />
                    </Listeners>  
                </ext:EventEditWindow>  
      
        </form>
        </body>
    </html>
    Last edited by Aod47; Feb 05, 2013 at 4:59 AM.
  2. #2
    I tried add "Locale" to this line

    <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" Locale="" />
    Time format change to 24Hrs when use 'de-DE' culture but WeekHeader and DayHeader change to German language too. T-T

    I think culture 'en-IN' or 'en-IE' most suitable http://www.basicdatepicker.com/samples/cultureinfo.aspx

    but still show British time format.
  3. #3
    Yes, the problem is that the combobox items retain the AM/PM format even after you set:

    this.startTime.format = 'H:i'
    or
    this.endTime.format = 'H:i'
    I took a look at the javascript code and found out both startTime and endTime fill a store with the time values. So, here is a solution to the problem:

        // daterange date format
        dateRangeItem.on('render', function () {
            this.startDate.format = 'd/m/Y';
            this.startTime.format = 'H:i';
            this.endDate.format = 'd/m/Y';
            this.endTime.format = 'H:i';
    
            var localTimes = ['13:00', '14:00'];            //  sample: your localized time values for the comboboxes
            this.endTime.getStore().removeAll();         // empty combobox
            this.endTime.getStore().loadData(localTimes);   // load your localized time values
        });
    OMG! I think I need this too, for my own project :)

    Also, I'll add this post to the solution thread.
  4. #4
    I have tried you code. Edit Detail Window display time in format 24Hr but New Event Window or Edit Event Window still display AM/PM.

    Very appreciate for your help.
  5. #5
    Quote Originally Posted by Aod47 View Post
    I have tried you code. Edit Detail Window display time in format 24Hr but New Event Window or Edit Event Window still display AM/PM.

    Very appreciate for your help.
    You must apply the same customization (i.e., apply time format and load combobox items) in the CompanyX.customWindow function which is called by the Render listener of the EventEditWindow listener.
  6. #6
    Quote Originally Posted by Mimisss View Post
    You must apply the same customization (i.e., apply time format and load combobox items) in the CompanyX.customWindow function which is called by the Render listener of the EventEditWindow listener.
    Yes, you are right. :)

    Thank you very much again.

Similar Threads

  1. Replies: 2
    Last Post: Mar 28, 2012, 1:39 PM
  2. Replies: 5
    Last Post: Sep 13, 2011, 8:44 PM
  3. Replies: 4
    Last Post: Apr 25, 2011, 8:35 AM
  4. Time Field Time Format Setting
    By Dinesh.T in forum 1.x Help
    Replies: 0
    Last Post: Aug 18, 2009, 3:21 AM
  5. Replies: 3
    Last Post: May 21, 2009, 10:55 AM

Tags for this Thread

Posting Permissions