feat(MiniCalendarWidget): enhance localization and refactor calendar logic
All checks were successful
Deploy to production / deploy (push) Successful in 1m55s
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:
@@ -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'];
|
||||
/** Mon–Sun; 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 [];
|
||||
|
||||
Reference in New Issue
Block a user