1

Using the Calendar component in Extjs 7.0 we noticed that the header cells didn't line up correctly with their columns if the language was set to Dutch:

calendar

When checking the source code I found the place where these values are added in the cell html; In Ext.calendar.header.Base, in the setHeaderText function the following code exists:

var me = this,
            D = Ext.Date,
            value = me.getValue(),
            format = me.getFormat(),
            domFormat = me.domFormat,
            cells = me.cells,
            len = cells.length,
            useDates = me.useDates,
            cell, i;

        if (!value) {
            return;
        }

        value = D.clone(value);

        for (i = 0; i < len; ++i) {
            cell = cells[i];

            if (useDates) {
                cell.setAttribute('data-date', D.format(value, domFormat));
            }

            cell.setAttribute('data-day', value.getDay());
            cell.innerHTML = D.format(value, format);
            value = D.add(value, D.DAY, 1);
        }

The innerHtml is set by formatting the Date(D) object which results in the 3 characters of that day. If you change this to just setting a 4 char value like cell.innerHTML = 'Test' the headers line up just fine:

Test

But for some reason this doesn't work when using the D.format value. If somebody has any idea what causes this, I would love to hear.

I can't seem to test if this also goes wrong in another language cause for some reason my packages can't be loaded in anymore.

MonkeySleeve
  • 35
  • 6

1 Answers1

1

You can set(or fix) localization override localization constants. Calendar use Ext.Date.dayNames and Ext.Date.getShortDayName().

All constants list you can see in localization package.

Fiddle example

pvlt
  • 1,843
  • 1
  • 10
  • 19
  • Hi, thank you for the example. We have made our own Localization class since we needed to load the translations from our own server which should override the 'Locale' property. When i changed the dayNames and getShortDayName function in there I didn't notice a difference so maybe this override isn't doing what I think it should be doing. But then I'm unsure where it gets it's translations from. – MonkeySleeve Apr 28 '20 at 11:16
  • Ah, I found that in our app.json we set the "locale": "nl", and in Ext-local-nl.js it actually sets the dayNames. So if I change them in there I see them change in my calendar. But still the headers are aligned with the columns tho, that's a shame. – MonkeySleeve Apr 28 '20 at 11:28
  • Aligned with column like on first your screenshot? it looks like you did something with styles – pvlt Apr 28 '20 at 11:32
  • Yea aligned like in the first screenshot, we didn't add any styles to the Calendar component. We just used it straight out of the box. But I tried adding a width to the calendar-header-cell and for some reason this fixes it. Even if i resize the window or use different phone using the device toolbar it still looks good. – MonkeySleeve Apr 29 '20 at 07:09