Skip to content

CSCEXAM-1158 Add english formatted title for booking calendar #1258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 4, 2025
Merged

CSCEXAM-1158 Add english formatted title for booking calendar #1258

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7a257d3
Add english formatted title for booking calendar Fix time formatting …
VirmasaloA Oct 29, 2025
258c5e3
Merge branch 'dev' into CSCEXAM-1158
lupari Oct 29, 2025
8530d98
Merge branch 'dev' into CSCEXAM-1158
VirmasaloA Nov 3, 2025
6dac748
Refactor calendarLocale func
VirmasaloA Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 34 additions & 3 deletions ui/src/app/calendar/booking-calendar.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,21 +71,22 @@ export class BookingCalendarComponent implements OnInit, AfterViewInit {
plugins: [luxon2Plugin, timeGridPlugin],
initialView: 'timeGridWeek',
firstDay: 1,
locale: this.translate.currentLang,
locale: this.resolveCalendarLocale(this.translate.currentLang),
locales: [fiLocale, svLocale, enLocale],
...this.getFormatOverrides(this.translate.currentLang),
allDaySlot: false,
height: 'auto',
nowIndicator: true,
slotLabelFormat: { hour: 'numeric', minute: '2-digit', hour12: false },
eventTimeFormat: { hour: '2-digit', minute: '2-digit', hour12: false },
eventMinHeight: 45,
events: this.refetch,
eventClick: this.eventClicked.bind(this),
});
this.translate.onLangChange.subscribe((event) => {
this.calendarOptions.set({
...this.calendarOptions(),
locale: event.lang,
locale: this.resolveCalendarLocale(event.lang),
...this.getFormatOverrides(event.lang),
});
});
Expand Down Expand Up @@ -183,7 +184,37 @@ export class BookingCalendarComponent implements OnInit, AfterViewInit {
return `${start.getDate()}.${start.getMonth() + 1}. – ${end.getDate()}.${end.getMonth() + 1}.${end.getFullYear()}`;
}
}
: { year: 'numeric' as const, month: 'short' as const, day: 'numeric' as const },
: // English title format
lang === 'en'
? (info: { start: { marker: Date }; end?: { marker: Date } }) => {
const start = new Date(info.start.marker);
if (!info.end) {
return `${start.getDate()} ${start.toLocaleString('en-GB', { month: 'short' })} ${start.getFullYear()}`;
}
const end = new Date(info.end.marker);
end.setDate(end.getDate() - 1);

const sameMonth =
start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear();
const sameYear = start.getFullYear() === end.getFullYear();

if (sameMonth) {
return `${start.getDate()} - ${end.getDate()} ${end.toLocaleString('en-GB', { month: 'short' })} ${end.getFullYear()}`;
}
if (sameYear) {
const sm = start.toLocaleString('en-GB', { month: 'short' });
const em = end.toLocaleString('en-GB', { month: 'short' });
return `${start.getDate()} ${sm} - ${end.getDate()} ${em} ${end.getFullYear()}`;
}
const sm = start.toLocaleString('en-GB', { month: 'short' });
const em = end.toLocaleString('en-GB', { month: 'short' });
return `${start.getDate()} ${sm} ${start.getFullYear()} - ${end.getDate()} ${em} ${end.getFullYear()}`;
}
: { year: 'numeric' as const, month: 'short' as const, day: 'numeric' as const },
};
}
// Fix for FullCalendar locale
private resolveCalendarLocale(lang: string): string {
Copy link
Collaborator

@lupari lupari Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tai lyhyemmin:

private resolveCalendarLocale = (lang: string) => lang === 'en' ? 'en-gb' : lang;

return lang === 'en' ? 'en-gb' : lang;
}
}