[CLOSED] Ext:CalendarPanel, How can I change date format to d/M/y?

[FVNoel]

[Daniil]

Hi @FVNoel,

Please clarify where exactly in a CalendarPanel.

Re: EventWindow

Please use:

Ext.calendar.form.field.DateRange.override({
    dateFormat : "y-m-d",
    timeFormat : "H:i"
});

[FVNoel]

We would like to change the date format in the calendar, Here's some examples:



Aswell as in here:



We would also be able to translate the field labels in this form:



And the date format of when you drag and drop an event.

[Daniil]

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') : '&#160;';
                    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 ? ' &mdash; ' : '';

        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);
    }
});

[FVNoel]

Thank you, Everything seems to be working correctly.