Month name in the period header is untranslated on first render (store defaults to 'en' until mounted())

[sashalab]

Steps to reproduce

1. Set the user's language and locale to a non-English one (Russian in my case). The same happens when the instance defaults are used (occ config:system:set default_language --value ru / default_locale --value ru_RU) and the user never picked anything.
2. Open the Calendar app in month view with a fresh page load.
3. Look at the period label between the ◀ / ▶ buttons.

Expected behavior

The month name follows the user's locale, e.g. август 2026.

Actual behavior

On the first render the month name is in English — August 2026 — while everything around it is correctly localized (weekday headers, buttons, app title, the rest of the UI).

Clicking ▶ (or ◀) re-renders the label correctly: сентябрь 2026. Reloading the page brings the English name back. So the label is only wrong until the first period change.

Root cause (from reading the source)

The label is rendered by formatDateRange(date, view.value, settingsStore.momentLocale, false) in src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue, which ends up in moment(value).locale(locale).format('MMMM YYYY') (src/filters/dateRangeFormat.js).

settingsStore.momentLocale is initialized to the literal 'en' in src/store/settings.js, and only replaced with the real locale later, in Calendar.vue:

async mounted() {
    ...
    await this.loadMomentLocale()   // -> settingsStore.setMomentLocale({ locale })
}

The first render of the header happens while the store still holds 'en'. The picker receives the formatter as a prop (:format="dateFormatWrapper"), so the already-rendered label is not recomputed when the store value changes a moment later — it stays English until something forces a re-render, which is exactly what pressing ▶ does.

Ruled out (all checked in the browser console on the affected page)

• OC.getLocale(), OC.getLanguage() and document.documentElement.lang are all ru
• the Russian moment locale chunk is fetched fine: calendar-node_modules_moment_locale_ru_js.js → 200
• moment().locale('ru').format('MMMM YYYY') returns август 2026 on that very page

So moment has the locale data, the app just formats the first label before the store learns about it.

Calendar app version

6.5.4

CalDAV-clients used

No response

Browser

Chromium (headless and normal, same result)

Client operating system

macOS

Server operating system

Debian (official nextcloud:34.0.2-apache Docker image)

Nextcloud version

34.0.2

[odzhychko]

Should be fixed with this recent code https://github.com/nextcloud-libraries/nextcloud-vue/blob/ac7e60606aee3d38f51b5385beb2f4e61a94c0ed/src/components/NcDateTimePicker/NcDateTimePicker.vue#L553

Maybe it was fixed by the recent merge of #8772

I'll check this issue as part of #8307

[odzhychko]

@sashalab Thank you for reporting it!

[SebastianKrupinski]

@odzhychko did you manage to reproduce it?

[odzhychko]

@SebastianKrupinski yes

[odzhychko]

Should be fixed with this recent code https://github.com/nextcloud-libraries/nextcloud-vue/blob/ac7e60606aee3d38f51b5385beb2f4e61a94c0ed/src/components/NcDateTimePicker/NcDateTimePicker.vue#L553

Maybe it was fixed by the recent merge of #8772

Must correct the above.
https://github.com/nextcloud-libraries/nextcloud-vue/blob/ac7e60606aee3d38f51b5385beb2f4e61a94c0ed/src/components/NcDateTimePicker/NcDateTimePicker.vue#L553 only fixes a similar issue with date-fns locales in NcDateTimePicker.

This issue here will be fixed as part of #8307 because I will migrate from moment js formating to directly passing a format string to NcDateTimePicker.