Repository navigation
feat(ui): calendar type preference with Jalali/Persian support - #478
Merged
stefan-ernst merged 10 commits intoNov 9, 2026
Merged
Conversation
# Conflicts: # frontend/src/lib/pickers/CalendarDateField.svelte # frontend/src/lib/pickers/DatePicker.svelte
Melt's headingValue converts CalendarDate to a plain JS Date via toDate() and formats with Intl but no calendar option, so a Persian grid showed 'October' instead of 'Aban'. Render the calendar heading using the resolved calendar and interface locale so the month name follows the interface language regardless of the chosen calendar.
|
All contributors have signed the CLA ✍️ ✅ |
Contributor
Author
|
I have read the CLA Document and I hereby sign the CLA |
The calendar-aware heading formatted a UTC-midnight Date with an Intl.DateTimeFormat that had no timeZone, so west of UTC the month name could fall back to the previous month (a March grid showed "February 2025" whenever the anchor day was the 1st). Use getLocalTimeZone() so the Date and the formatter agree.
Quote the German recurrence key so it matches the file's key style, and add the new calendar and recurrence strings to Polish, which must keep full coverage.
Replace the inline color styles added with the recurrence hint and the calendar field error with the text-ds-* utilities so the inline-style guard stays clean.
Contributor
|
@mrtfn thanks a lot! I will merge this in as part of the persian locale + rtl fixes in 0.9.4 |
Contributor
Author
|
Actually there are a ton of enhancements remaining here and there, but i was concerned about fixing them first or waiting to see your approval on my approach. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Lets users choose the calendar system (Gregorian or Persian/Jalali) from the profile's Regional Settings tab, with the interface language driving month names independently of the calendar system.
What changed
Calendar preference plumbing
frontend/src/lib/stores/calendar.svelte.js—resolveCalendar(locale, override)returnspersianwhen the interface locale starts withfaandcalendarisauto; otherwise honors the explicitgregory/persianchoice. Defaults toauto.frontend/src/lib/profile/ProfileRegionalSettingsTab.svelte— calendar picker (Automatic/Gregorian/Persian (Jalali)) alongside the timezone and language pickers. On Save, persists the calendar preference viauserPreferences.update({ calendar }), updates the in-memory store, and re-applies the locale so all date displays re-format reactively.Calendar-aware date formatting
frontend/src/lib/utils/dateFormatter.js—getCalendarOption()resolves the calendar from the preference + interface locale, and every formatter (formatInstant,formatDateOnly,formatDateShort,formatDateTimeLocale,formatHistoryTimestamp,formatRelativeCompact,formatDateSimple,formatDateWithOptions, etc.) passes{ calendar: getCalendarOption() }toIntl.DateTimeFormat. This decouples calendar system from interface language: Persian calendar + English UI →Aban; Persian calendar + Persian UI →آaban.Calendar-aware date inputs/pickers
frontend/src/lib/pickers/DatePicker.svelte— resolves the calendar viaresolveCalendar(resolvedLocale, calendar). Gregorian keeps the native<input type="date">; non-Gregorian loadsCalendarDateFieldlazily.frontend/src/lib/pickers/CalendarDateField.svelte— non-Gregorian field built on@internationalized/dateDateFormatterwith the resolved calendar; emits GregorianYYYY-MM-DDstrings for storage/API.frontend/src/lib/components/Input.svelte—type="date"fields route throughDatePickerso the calendar preference applies to all date inputs.Calendar-aware roadmap
frontend/src/lib/features/collections/roadmapCalendar.js—calendarDate,calendarMonthStart,calendarMonthPosition,calendarDateAtPositionoperate on@internationalized/dateCalendarDates in the chosen calendar, so roadmap positioning is correct for Persian dates.Calendar-aware date picker popover heading
frontend/src/lib/pickers/CalendarGrid.svelte— Melt UI'sheadingValueconverted theCalendarDateto a plain JSDateviatoDate()(stripping calendar info) and formatted withIntlbut nocalendaroption, so a Persian grid showed "October" instead of "Aban". Replaced with a calendar-awarecalendarHeadingthat passes{ calendar: calendarId }toIntl.DateTimeFormat, so the popover heading month name follows the interface language regardless of calendar.