Some Preset headers do not work

[braincept]

We have configured 6 different viewmodes. The whole preset configuration is based on the documentation of localization. (https://bryntum.com/docs/scheduler/#guides/customization/localization.md).

As you can see in the screenshots attached the viewmodes: minuteAndHour, hourAndDay and weekAndDay seem to be correct.
Compared to the viewmodes: weekAndMonth, monthAndYear and year which do not look correct, especially the second row.

Any idea what we are doing wrong?

Here is the PresetManager configuration:

PresetManager: {
                        minuteAndHour: {
                            topDateFormat: 'ddd MM/DD/YY',
                            middleDateFormat: 'HH:mm'
                        },
                        hourAndDay: {
                            topDateFormat: 'ddd MM/DD/YY',
                            middleDateFormat: 'HH:mm'
                        },
                        weekAndDay: {
                            middleDateFormat: 'YYYY',
                            bottomDateFormat: 'D MMM',
                        },
                        weekAndMonth: {
                            topDateFormat: 'YYYY',
                            middleDateFormat: 'ddd'
                        },
                        monthAndYear: {
                            topDateFormat: 'YYYY',
                            middleDateFormat: 'MMMM'
                        },
                        year: {
                            topDateFormat: 'YYYY',
                            middleDateFormat: 'MMMM'
                        }
                    }

[braincept]

These are the 3 viewmodes that not work

[Maxim Gorkovsky]

Modes in the last post do work.
Year preset has two levels. Top is localized fine, middle has a renderer, which has a priority. You can easily override that

preset = presetManager.getPreset('year')
preset.headerConfig.middle.renderer = undefined;
preset.headerConfig.middle.dateFormat = ''MMMM";

Last two presets works as configured in the locale. See our DateHelper doc for date formats.
YYYY - 2019
MMMM October
ddd Sun

[braincept]

Hi Saki

Here are your latest locale files. Do you need any other code example?

[saki]

Ideally, something what I can unpack and run. I understand that I should use the above locales in our localization demo.

[saki]

The complete headerConfig cannot be changed by using of locales. The only parameter that is taken from locales is `[top | middle | bottom]DateFormat` and updated when locale changes.

This is by-design behavior because we do not expect that, for example, `unit` should change when locale changes, but only format of the displayed date/time.

If you are interested, it is implemented in PresetManager as:

    static onLocalized() {
        const me = this;

        if (me.presets) {
            Object.values(me.presets).forEach((preset) => {
                const locale = me.L(preset.name);
                if (locale) {
                    locale.displayDateFormat && (preset.displayDateFormat = locale.displayDateFormat);
                    locale.middleDateFormat && (preset.headerConfig.middle.dateFormat = locale.middleDateFormat);
                    locale.topDateFormat && (preset.headerConfig.top.dateFormat = locale.topDateFormat);
                    locale.bottomDateFormat && (preset.headerConfig.bottom.dateFormat = locale.bottomDateFormat);
                }
            });
        }
    }

This handler called when locale is applied.

[braincept]

Hi Saki, Please find zip file and locale files in the attachment. I have reproduced the issue in sample application.

Please keep this code in examples/angular folder and copy locales file in build/locales folder.

The problem which we are facing is:

1) TopDateFormate is not working when we are loading the dateFormat from the Locale.
2) HeaderConfig is not working when we are loading the dateFormat from the Locale.

We have also tried to update the topDateFormat with the help of PresetManager but it is also not working.

Please have a look at the code

	const preset: any = PresetManager.getPreset('hourAndDay');
        console.log('before preset ', preset);
        preset.headerConfig.middle.dateFormat = 'HH:mm';
        preset.headerConfig.top.dateFormat = 'ddd DD.MM.YY';

The above code is also available in the sample application.

Please let me know, If you require anything. Looking forward for the fix because we have to release the product and we are stuck with this issue.

[saki]

Re #1: I'm not sure where that locale (scheduler.locale.De.js) comes from because it looks like it is some edited transpiled version. Use the locale from the attached zip (custom-locale-de.js) please as the basis (it is locale from vanilla localization example) and build upon it. It works for me.

Re #2: As I explained elsewhere, headerConfig does not propagate from locale. It's by design.

[braincept]

Hey Saki

There is still the question open, how can we set the presetManager dynamically in runtime. As discussed in the call this it not clear right now.
Thanks in advance.

[saki]

Changing values in a PresetManager’s preset only does not cause the immediate view change automatically. Preset is a group of configuration options that is applied to the Scheduler and after it is applied then it takes effect.

Therefore, if you want to change the look of the running Scheduler without applying a different preset, change the Scheduler property directly. Or you can change a preset but then you must apply that preset to the Scheduler.