Feb 05, 2013, 4:56 AM
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.
Thank you.
I applied code from this solution forums.ext.net/showthread.php?21830
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.
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.
