A CalendarPanel is quite week for localization, i.e. there is a big lack of the localization properties.
So, I can suggest the following solution. It is quite cumbersome, but working.
1. Date formats.
Please search for "hello" in these overrides.
Date formats
Ext.calendar.template.BoxLayout.override({
applyTemplate: function (o) {
Ext.apply(this, o);
var w = 0, title = '', first = true, isToday = false, showMonth = false, prevMonth = false, nextMonth = false,
weeks = [[]],
today = Ext.calendar.util.Date.today(),
dt = Ext.Date.clone(this.viewStart),
thisMonth = this.startDate.getMonth();
for (; w < this.weekCount || this.weekCount == -1; w++) {
if (dt > this.viewEnd) {
break;
}
weeks[w] = [];
for (var d = 0; d < this.dayCount; d++) {
isToday = Ext.calendar.util.Date.equalDates(dt, today);
showMonth = first || (dt.getDate() == 1);
prevMonth = (dt.getMonth() < thisMonth) && this.weekCount == -1;
nextMonth = (dt.getMonth() > thisMonth) && this.weekCount == -1;
if (dt.getDay() == 1) {
// The ISO week format 'W' is relative to a Monday week start. If we
// make this check on Sunday the week number will be off.
weeks[w].weekNum = this.showWeekNumbers ? Ext.Date.format(dt, 'W') : ' ';
weeks[w].weekLinkId = 'ext-cal-week-' + Ext.Date.format(dt, 'Ymd');
}
if (showMonth) {
if (isToday) {
title = this.getTodayText();
}
else {
title = "HELLO 1!";
// Override the following:
// title = Ext.Date.format(dt, this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
}
}
else {
var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
title = isToday ? this.getTodayText() : Ext.Date.format(dt, dayFmt);
}
weeks[w].push({
title: title,
date: Ext.Date.clone(dt),
titleCls: 'ext-cal-dtitle ' + (isToday ? ' ext-cal-dtitle-today' : '') +
(w == 0 ? ' ext-cal-dtitle-first' : '') +
(prevMonth ? ' ext-cal-dtitle-prev' : '') +
(nextMonth ? ' ext-cal-dtitle-next' : ''),
cellCls: 'ext-cal-day ' + (isToday ? ' ext-cal-day-today' : '') +
(d == 0 ? ' ext-cal-day-first' : '') +
(prevMonth ? ' ext-cal-day-prev' : '') +
(nextMonth ? ' ext-cal-day-next' : '')
});
dt.setHours(1);
dt = Ext.calendar.util.Date.add(dt, { hours: 26 });
first = false;
}
}
return this.applyOut({
weeks: weeks
}, []).join('');
},
getTodayText: function () {
var dt = Ext.Date.format(new Date(), 'l, F j, Y'),
fmt,
todayText = this.showTodayText !== false ? this.todayText : '',
timeText = this.showTime !== false ? ' <span id="' + this.id + '-clock" class="ext-cal-dtitle-time">' +
Ext.Date.format(new Date(), 'g:i a') + '</span>' : '',
separator = todayText.length > 0 || timeText.length > 0 ? ' — ' : '';
if (this.dayCount == 1) {
return "HELLO 2!";
//return dt + separator + todayText + timeText;
}
fmt = this.weekCount == 1 ? 'D j' : 'j';
return "HELLO 3!";
// return todayText.length > 0 ? todayText + timeText : Ext.Date.format(new Date(), fmt) + timeText;
}
});
Ext.calendar.dd.DropZone.override({
onNodeOver: function (n, dd, e, data) {
var D = Ext.calendar.util.Date,
start = data.type == 'eventdrag' ? n.date : D.min(data.start, n.date),
end = data.type == 'eventdrag' ? D.add(n.date, { days: D.diffDays(data.eventStart, data.eventEnd) }) :
D.max(data.start, n.date);
if (!this.dragStartDate || !this.dragEndDate || (D.diffDays(start, this.dragStartDate) != 0) || (D.diffDays(end, this.dragEndDate) != 0)) {
this.dragStartDate = start;
this.dragEndDate = D.add(end, { days: 1, millis: -1, clearTime: true });
this.shim(start, end);
var range = Ext.Date.format(start, 'n/j');
if (D.diffDays(start, end) > 0) {
range += '-' + Ext.Date.format(end, 'n/j');
}
var msg = Ext.util.Format.format(data.type == 'eventdrag' ? this.moveText : this.createText, range);
data.proxy.updateMsg("HELLO 4!");
//data.proxy.updateMsg(msg);
}
return this.dropAllowed;
}
});
2. EventDetails form.
I can recommend to override the entire EventDetails's initComponent method.
EventDetails form
Ext.calendar.form.EventDetails.override({
initComponent: function() {
this.addEvents({
/**
* @event eventadd
* Fires after a new event is added
* @param {Ext.calendar.form.EventDetails} this
* @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added
*/
eventadd: true,
/**
* @event eventupdate
* Fires after an existing event is updated
* @param {Ext.calendar.form.EventDetails} this
* @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated
*/
eventupdate: true,
/**
* @event eventdelete
* Fires after an event is deleted
* @param {Ext.calendar.form.EventDetails} this
* @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted
*/
eventdelete: true,
/**
* @event eventcancel
* Fires after an event add/edit operation is canceled by the user and no store update took place
* @param {Ext.calendar.form.EventDetails} this
* @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
*/
eventcancel: true
});
this.titleField = new Ext.form.Text({
fieldLabel : 'Hello 5!',
name : Ext.calendar.data.EventMappings.Title.name,
anchor : '90%'
});
this.dateRangeField = new Ext.calendar.form.field.DateRange({
fieldLabel : 'When',
singleLine : false,
anchor : '90%'
});
this.reminderField = new Ext.calendar.form.field.ReminderCombo({
name : 'Reminder',
anchor : '70%'
});
this.notesField = new Ext.form.TextArea({
fieldLabel : 'Notes',
name : Ext.calendar.data.EventMappings.Notes.name,
grow : true,
growMax : 150,
anchor : '100%'
});
this.locationField = new Ext.form.Text({
fieldLabel : 'Location',
name : Ext.calendar.data.EventMappings.Location.name,
anchor : '100%'
});
this.urlField = new Ext.form.Text({
fieldLabel: 'Web Link',
name: Ext.calendar.data.EventMappings.Url.name,
anchor: '100%'
});
var leftFields = [this.titleField, this.dateRangeField, this.reminderField],
rightFields = [this.notesField, this.locationField, this.urlField];
if (this.calendarStore) {
this.calendarField = new Ext.calendar.form.field.CalendarCombo({
store: this.calendarStore,
anchor: '70%',
name: Ext.calendar.data.EventMappings.CalendarId.name
});
leftFields.splice(2, 0, this.calendarField);
};
this.items = [{
id: 'left-col',
columnWidth: 0.65,
layout: 'anchor',
border: false,
items: leftFields
},
{
id: 'right-col',
columnWidth: 0.35,
layout: 'anchor',
border: false,
items: rightFields
}];
this.fbar = [{
text: 'Save',
scope: this,
handler: this.onSave
},
{
cls: 'ext-del-btn',
itemId: this.id+'-del-btn',
text: 'Delete',
scope: this,
handler: this.onDelete
},
{
text: 'Cancel',
scope: this,
handler: this.onCancel
}];
Ext.calendar.form.EventDetails.superclass.initComponent.apply(this, arguments);
}
});