feat(MiniCalendarWidget): enhance localization and refactor calendar logic
All checks were successful
Deploy to production / deploy (push) Successful in 1m55s

- Updated the MiniCalendarWidget to utilize localized strings for month names, weekdays, and loading messages, improving user experience across multiple languages.
- Refactored the calendar logic to use constants for month keys and weekday order, ensuring consistency with backend configurations.
- Added new translation entries for the mini widget in Cebuano, German, English, Spanish, and French, enhancing accessibility for users.
This commit is contained in:
Torsten Schulz (local)
2026-04-17 16:44:27 +02:00
parent 14881803df
commit 7732498875
12 changed files with 88 additions and 25 deletions

View File

@@ -4,7 +4,7 @@
{{ monthName }} {{ calendarData.year }}
</div>
<div class="mini-calendar-weekdays">
<span v-for="day in weekdays" :key="day" class="mini-calendar-weekday">{{ day }}</span>
<span v-for="day in weekdayLabels" :key="day" class="mini-calendar-weekday">{{ day }}</span>
</div>
<div class="mini-calendar-days">
<span
@@ -22,37 +22,36 @@
</span>
</div>
<router-link to="/personal/calendar" class="mini-calendar-link">
Zum Kalender
{{ $t('personal.calendar.miniWidget.linkToCalendar') }}
</router-link>
</div>
<div v-else class="mini-calendar-empty">
Kalender wird geladen...
{{ $t('personal.calendar.miniWidget.loading') }}
</div>
</template>
<script>
const MONTH_NAMES = [
'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
];
/** Order matches personal.calendar.months keys (jan … dec). */
const CAL_MONTH_KEYS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
/** MonSun; matches backend firstDayOfWeek (Monday = 1). */
const WEEKDAY_ORDER = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
export default {
name: 'MiniCalendarWidget',
props: {
data: { type: Object, default: null }
},
data() {
return {
weekdays: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
};
},
computed: {
calendarData() {
return this.data;
},
monthName() {
if (!this.calendarData) return '';
return MONTH_NAMES[this.calendarData.month - 1];
const key = CAL_MONTH_KEYS[this.calendarData.month - 1];
return key ? this.$t(`personal.calendar.months.${key}`) : '';
},
weekdayLabels() {
return WEEKDAY_ORDER.map((k) => this.$t(`personal.calendar.weekdays.${k}`));
},
calendarDays() {
if (!this.calendarData) return [];