From 25af538c88e8f0b2402c8648b0dc464ebda432f5 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 30 Jan 2026 14:07:28 +0100
Subject: [PATCH] Enhance calendar functionality in personal section: Implement
 detailed calendar views (month, week, workweek, day) in CalendarView
 component. Update localization files for English and German to include
 translations for calendar features such as views, weekdays, and months. This
 update improves user experience by providing a comprehensive calendar
 interface.

---
 frontend/src/i18n/locales/de/personal.json   |  40 +-
 frontend/src/i18n/locales/en/personal.json   |  40 +-
 frontend/src/views/personal/CalendarView.vue | 649 ++++++++++++++++++-
 3 files changed, 709 insertions(+), 20 deletions(-)

diff --git a/frontend/src/i18n/locales/de/personal.json b/frontend/src/i18n/locales/de/personal.json
index fde8914..f04d480 100644
--- a/frontend/src/i18n/locales/de/personal.json
+++ b/frontend/src/i18n/locales/de/personal.json
@@ -2,7 +2,45 @@
     "personal": {
         "calendar": {
             "title": "Kalender",
-            "comingSoon": "Der Kalender wird bald verfügbar sein. Hier können Sie zukünftig Ihre Termine und Ereignisse verwalten."
+            "today": "Heute",
+            "views": {
+                "month": "Monat",
+                "week": "Woche",
+                "workweek": "Arbeitswoche",
+                "day": "Tag"
+            },
+            "weekdays": {
+                "mon": "Mo",
+                "tue": "Di",
+                "wed": "Mi",
+                "thu": "Do",
+                "fri": "Fr",
+                "sat": "Sa",
+                "sun": "So"
+            },
+            "weekdaysFull": {
+                "mon": "Montag",
+                "tue": "Dienstag",
+                "wed": "Mittwoch",
+                "thu": "Donnerstag",
+                "fri": "Freitag",
+                "sat": "Samstag",
+                "sun": "Sonntag"
+            },
+            "months": {
+                "jan": "Januar",
+                "feb": "Februar",
+                "mar": "März",
+                "apr": "April",
+                "may": "Mai",
+                "jun": "Juni",
+                "jul": "Juli",
+                "aug": "August",
+                "sep": "September",
+                "oct": "Oktober",
+                "nov": "November",
+                "dec": "Dezember"
+            }
         }
     }
 }
diff --git a/frontend/src/i18n/locales/en/personal.json b/frontend/src/i18n/locales/en/personal.json
index 67fb4d6..80a58cb 100644
--- a/frontend/src/i18n/locales/en/personal.json
+++ b/frontend/src/i18n/locales/en/personal.json
@@ -2,7 +2,45 @@
     "personal": {
         "calendar": {
             "title": "Calendar",
-            "comingSoon": "The calendar will be available soon. Here you will be able to manage your appointments and events."
+            "today": "Today",
+            "views": {
+                "month": "Month",
+                "week": "Week",
+                "workweek": "Work Week",
+                "day": "Day"
+            },
+            "weekdays": {
+                "mon": "Mon",
+                "tue": "Tue",
+                "wed": "Wed",
+                "thu": "Thu",
+                "fri": "Fri",
+                "sat": "Sat",
+                "sun": "Sun"
+            },
+            "weekdaysFull": {
+                "mon": "Monday",
+                "tue": "Tuesday",
+                "wed": "Wednesday",
+                "thu": "Thursday",
+                "fri": "Friday",
+                "sat": "Saturday",
+                "sun": "Sunday"
+            },
+            "months": {
+                "jan": "January",
+                "feb": "February",
+                "mar": "March",
+                "apr": "April",
+                "may": "May",
+                "jun": "June",
+                "jul": "July",
+                "aug": "August",
+                "sep": "September",
+                "oct": "October",
+                "nov": "November",
+                "dec": "December"
+            }
         }
     }
 }
diff --git a/frontend/src/views/personal/CalendarView.vue b/frontend/src/views/personal/CalendarView.vue
index e3df35e..4700dbf 100644
--- a/frontend/src/views/personal/CalendarView.vue
+++ b/frontend/src/views/personal/CalendarView.vue
@@ -2,9 +2,144 @@
     <div class="calendar-view">
         <h2>{{ $t('personal.calendar.title') }}</h2>
         
-        <div class="coming-soon">
-            <img src="/images/icons/coming-soon.png" alt="Coming Soon" class="coming-soon-icon" />
-            <p>{{ $t('personal.calendar.comingSoon') }}</p>
+        <!-- Toolbar -->
+        <div class="calendar-toolbar">
+            <div class="nav-buttons">
+                <button @click="goToToday" class="btn-today">{{ $t('personal.calendar.today') }}</button>
+                <button @click="navigatePrev" class="btn-nav">&lt;</button>
+                <button @click="navigateNext" class="btn-nav">&gt;</button>
+                <span class="current-period">{{ currentPeriodLabel }}</span>
+            </div>
+            
+            <div class="view-tabs">
+                <button 
+                    v-for="view in views" 
+                    :key="view.id"
+                    :class="['view-tab', { active: currentView === view.id }]"
+                    @click="currentView = view.id"
+                >
+                    {{ $t(`personal.calendar.views.${view.id}`) }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Month View -->
+        <div v-if="currentView === 'month'" class="calendar-grid month-view">
+            <div class="weekday-headers">
+                <div v-for="day in weekDays" :key="day" class="weekday-header">
+                    {{ $t(`personal.calendar.weekdays.${day}`) }}
+                </div>
+            </div>
+            <div class="month-days">
+                <div 
+                    v-for="(day, index) in monthDays" 
+                    :key="index"
+                    :class="['day-cell', { 
+                        'other-month': !day.currentMonth,
+                        'today': day.isToday,
+                        'weekend': day.isWeekend
+                    }]"
+                    @click="selectDate(day.date)"
+                >
+                    <span class="day-number">{{ day.dayNumber }}</span>
+                    <div class="day-events">
+                        <div 
+                            v-for="event in getEventsForDate(day.date)" 
+                            :key="event.id"
+                            class="event-dot"
+                            :style="{ backgroundColor: event.color }"
+                            :title="event.title"
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Week View -->
+        <div v-if="currentView === 'week'" class="calendar-grid week-view">
+            <div class="time-grid">
+                <div class="time-header-spacer"></div>
+                <div v-for="day in weekDaysData" :key="day.date" class="day-column-header">
+                    <div :class="['day-name', { today: day.isToday }]">
+                        {{ $t(`personal.calendar.weekdays.${day.weekday}`) }}
+                    </div>
+                    <div :class="['day-date', { today: day.isToday }]">{{ day.dayNumber }}</div>
+                </div>
+            </div>
+            <div class="time-slots-container">
+                <div class="time-labels">
+                    <div v-for="hour in hours" :key="hour" class="time-label">
+                        {{ formatHour(hour) }}
+                    </div>
+                </div>
+                <div class="day-columns">
+                    <div v-for="day in weekDaysData" :key="day.date" class="day-column">
+                        <div 
+                            v-for="hour in hours" 
+                            :key="hour" 
+                            :class="['time-slot', { 'current-hour': isCurrentHour(day.date, hour) }]"
+                            @click="createEventAt(day.date, hour)"
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Work Week View -->
+        <div v-if="currentView === 'workweek'" class="calendar-grid week-view">
+            <div class="time-grid">
+                <div class="time-header-spacer"></div>
+                <div v-for="day in workWeekDaysData" :key="day.date" class="day-column-header">
+                    <div :class="['day-name', { today: day.isToday }]">
+                        {{ $t(`personal.calendar.weekdays.${day.weekday}`) }}
+                    </div>
+                    <div :class="['day-date', { today: day.isToday }]">{{ day.dayNumber }}</div>
+                </div>
+            </div>
+            <div class="time-slots-container">
+                <div class="time-labels">
+                    <div v-for="hour in workHours" :key="hour" class="time-label">
+                        {{ formatHour(hour) }}
+                    </div>
+                </div>
+                <div class="day-columns">
+                    <div v-for="day in workWeekDaysData" :key="day.date" class="day-column">
+                        <div 
+                            v-for="hour in workHours" 
+                            :key="hour" 
+                            :class="['time-slot', { 'current-hour': isCurrentHour(day.date, hour) }]"
+                            @click="createEventAt(day.date, hour)"
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Day View -->
+        <div v-if="currentView === 'day'" class="calendar-grid day-view">
+            <div class="day-header">
+                <div :class="['day-title', { today: isDayToday }]">
+                    {{ $t(`personal.calendar.weekdays.${currentDayData.weekday}`) }}, 
+                    {{ currentDayData.dayNumber }}. {{ $t(`personal.calendar.months.${currentDayData.month}`) }} {{ currentDayData.year }}
+                </div>
+            </div>
+            <div class="time-slots-container single-day">
+                <div class="time-labels">
+                    <div v-for="hour in hours" :key="hour" class="time-label">
+                        {{ formatHour(hour) }}
+                    </div>
+                </div>
+                <div class="day-columns">
+                    <div class="day-column full-width">
+                        <div 
+                            v-for="hour in hours" 
+                            :key="hour" 
+                            :class="['time-slot', { 'current-hour': isCurrentHour(currentDate, hour) }]"
+                            @click="createEventAt(currentDate, hour)"
+                        ></div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -12,12 +147,184 @@
 <script>
 export default {
     name: 'CalendarView',
+    data() {
+        return {
+            currentView: 'month',
+            currentDate: new Date(),
+            views: [
+                { id: 'month' },
+                { id: 'week' },
+                { id: 'workweek' },
+                { id: 'day' }
+            ],
+            weekDays: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+            hours: Array.from({ length: 24 }, (_, i) => i),
+            workHours: Array.from({ length: 12 }, (_, i) => i + 7), // 7:00 - 18:00
+            events: [] // Placeholder for events
+        };
+    },
+    computed: {
+        currentPeriodLabel() {
+            const options = { month: 'long', year: 'numeric' };
+            if (this.currentView === 'day') {
+                options.day = 'numeric';
+            }
+            return this.currentDate.toLocaleDateString(this.$i18n.locale, options);
+        },
+        monthDays() {
+            const year = this.currentDate.getFullYear();
+            const month = this.currentDate.getMonth();
+            const firstDay = new Date(year, month, 1);
+            const lastDay = new Date(year, month + 1, 0);
+            
+            // Find Monday of the first week
+            let startDate = new Date(firstDay);
+            const dayOfWeek = firstDay.getDay();
+            const diff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+            startDate.setDate(startDate.getDate() + diff);
+            
+            const days = [];
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            
+            // Generate 6 weeks (42 days)
+            for (let i = 0; i < 42; i++) {
+                const date = new Date(startDate);
+                date.setDate(startDate.getDate() + i);
+                const dayOfWeekNum = date.getDay();
+                
+                days.push({
+                    date: date.toISOString().split('T')[0],
+                    dayNumber: date.getDate(),
+                    currentMonth: date.getMonth() === month,
+                    isToday: date.getTime() === today.getTime(),
+                    isWeekend: dayOfWeekNum === 0 || dayOfWeekNum === 6
+                });
+            }
+            
+            return days;
+        },
+        weekDaysData() {
+            const days = [];
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            
+            // Find Monday of current week
+            const monday = this.getMonday(this.currentDate);
+            
+            for (let i = 0; i < 7; i++) {
+                const date = new Date(monday);
+                date.setDate(monday.getDate() + i);
+                const dayOfWeek = date.getDay();
+                
+                days.push({
+                    date: date.toISOString().split('T')[0],
+                    dayNumber: date.getDate(),
+                    weekday: this.weekDays[i],
+                    isToday: date.getTime() === today.getTime(),
+                    isWeekend: dayOfWeek === 0 || dayOfWeek === 6
+                });
+            }
+            
+            return days;
+        },
+        workWeekDaysData() {
+            // Only Monday to Friday
+            return this.weekDaysData.slice(0, 5);
+        },
+        currentDayData() {
+            const date = this.currentDate;
+            const dayIndex = date.getDay();
+            // Convert Sunday (0) to index 6, Monday (1) to 0, etc.
+            const weekdayIndex = dayIndex === 0 ? 6 : dayIndex - 1;
+            
+            return {
+                date: date.toISOString().split('T')[0],
+                dayNumber: date.getDate(),
+                month: this.getMonthKey(date.getMonth()),
+                year: date.getFullYear(),
+                weekday: this.weekDays[weekdayIndex]
+            };
+        },
+        isDayToday() {
+            const today = new Date();
+            return this.currentDate.toDateString() === today.toDateString();
+        }
+    },
+    methods: {
+        getMonday(date) {
+            const d = new Date(date);
+            const day = d.getDay();
+            const diff = d.getDate() - day + (day === 0 ? -6 : 1);
+            return new Date(d.setDate(diff));
+        },
+        getMonthKey(monthIndex) {
+            const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+            return months[monthIndex];
+        },
+        navigatePrev() {
+            const newDate = new Date(this.currentDate);
+            switch (this.currentView) {
+                case 'month':
+                    newDate.setMonth(newDate.getMonth() - 1);
+                    break;
+                case 'week':
+                case 'workweek':
+                    newDate.setDate(newDate.getDate() - 7);
+                    break;
+                case 'day':
+                    newDate.setDate(newDate.getDate() - 1);
+                    break;
+            }
+            this.currentDate = newDate;
+        },
+        navigateNext() {
+            const newDate = new Date(this.currentDate);
+            switch (this.currentView) {
+                case 'month':
+                    newDate.setMonth(newDate.getMonth() + 1);
+                    break;
+                case 'week':
+                case 'workweek':
+                    newDate.setDate(newDate.getDate() + 7);
+                    break;
+                case 'day':
+                    newDate.setDate(newDate.getDate() + 1);
+                    break;
+            }
+            this.currentDate = newDate;
+        },
+        goToToday() {
+            this.currentDate = new Date();
+        },
+        formatHour(hour) {
+            return `${hour.toString().padStart(2, '0')}:00`;
+        },
+        isCurrentHour(dateStr, hour) {
+            const now = new Date();
+            const date = new Date(dateStr);
+            return date.toDateString() === now.toDateString() && now.getHours() === hour;
+        },
+        selectDate(dateStr) {
+            this.currentDate = new Date(dateStr);
+            this.currentView = 'day';
+        },
+        createEventAt(dateStr, hour) {
+            // Placeholder for event creation
+            console.log(`Create event at ${dateStr} ${hour}:00`);
+        },
+        getEventsForDate(dateStr) {
+            return this.events.filter(e => e.date === dateStr);
+        }
+    }
 };
 </script>
 
 <style scoped lang="scss">
 .calendar-view {
     padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
 h2 {
@@ -25,27 +332,333 @@ h2 {
     color: var(--color-text-primary);
 }
 
-.coming-soon {
+// Toolbar
+.calendar-toolbar {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
-    padding: 60px 20px;
-    background: #f9f9f9;
-    border: 1px dashed #ccc;
-    border-radius: 8px;
-    text-align: center;
-}
-
-.coming-soon-icon {
-    width: 64px;
-    height: 64px;
     margin-bottom: 20px;
-    opacity: 0.7;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
-.coming-soon p {
+.nav-buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.btn-today {
+    padding: 8px 16px;
+    background: var(--color-primary-orange);
+    color: #000;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+    
+    &:hover {
+        background: var(--color-primary-orange-hover);
+    }
+}
+
+.btn-nav {
+    padding: 8px 12px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1.1em;
+    
+    &:hover {
+        background: #f5f5f5;
+    }
+}
+
+.current-period {
     font-size: 1.2em;
+    font-weight: 600;
+    margin-left: 10px;
+    color: var(--color-text-primary);
+}
+
+.view-tabs {
+    display: flex;
+    gap: 4px;
+    background: #f0f0f0;
+    padding: 4px;
+    border-radius: 6px;
+}
+
+.view-tab {
+    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
     color: #666;
+    transition: all 0.2s;
+    
+    &:hover {
+        background: #e0e0e0;
+    }
+    
+    &.active {
+        background: var(--color-primary-orange);
+        color: #000;
+        font-weight: 500;
+    }
+}
+
+// Month View
+.month-view {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.weekday-headers {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    background: #f8f8f8;
+    border-bottom: 1px solid #ddd;
+}
+
+.weekday-header {
+    padding: 12px 8px;
+    text-align: center;
+    font-weight: 600;
+    color: #666;
+    font-size: 0.9em;
+}
+
+.month-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.day-cell {
+    min-height: 80px;
+    padding: 8px;
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+    transition: background 0.2s;
+    
+    &:nth-child(7n) {
+        border-right: none;
+    }
+    
+    &:hover {
+        background: var(--color-primary-orange-light);
+    }
+    
+    &.other-month {
+        background: #fafafa;
+        
+        .day-number {
+            color: #bbb;
+        }
+    }
+    
+    &.today {
+        background: #fff8e1;
+        
+        .day-number {
+            background: var(--color-primary-orange);
+            color: #000;
+            border-radius: 50%;
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+    
+    &.weekend {
+        background: #f9f9f9;
+    }
+}
+
+.day-number {
+    font-weight: 500;
+    font-size: 0.95em;
+    color: var(--color-text-primary);
+}
+
+.day-events {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    margin-top: 4px;
+}
+
+.event-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+// Week & Day View
+.week-view, .day-view {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.time-grid {
+    display: flex;
+    border-bottom: 1px solid #ddd;
+    background: #f8f8f8;
+}
+
+.time-header-spacer {
+    width: 60px;
+    flex-shrink: 0;
+}
+
+.day-column-header {
+    flex: 1;
+    padding: 12px 8px;
+    text-align: center;
+    border-left: 1px solid #eee;
+    
+    &:first-of-type {
+        border-left: none;
+    }
+}
+
+.day-name {
+    font-weight: 600;
+    color: #666;
+    font-size: 0.85em;
+    
+    &.today {
+        color: var(--color-primary-orange);
+    }
+}
+
+.day-date {
+    font-size: 1.4em;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    
+    &.today {
+        background: var(--color-primary-orange);
+        color: #000;
+        border-radius: 50%;
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 4px auto 0;
+    }
+}
+
+.time-slots-container {
+    display: flex;
+    max-height: 600px;
+    overflow-y: auto;
+    
+    &.single-day {
+        .day-column {
+            flex: 1;
+        }
+    }
+}
+
+.time-labels {
+    width: 60px;
+    flex-shrink: 0;
+}
+
+.time-label {
+    height: 48px;
+    padding: 4px 8px;
+    font-size: 0.8em;
+    color: #888;
+    text-align: right;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.day-columns {
+    display: flex;
+    flex: 1;
+}
+
+.day-column {
+    flex: 1;
+    border-left: 1px solid #eee;
+    
+    &:first-child {
+        border-left: none;
+    }
+    
+    &.full-width {
+        border-left: none;
+    }
+}
+
+.time-slot {
+    height: 48px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    transition: background 0.2s;
+    
+    &:hover {
+        background: var(--color-primary-orange-light);
+    }
+    
+    &.current-hour {
+        background: rgba(255, 184, 77, 0.2);
+        border-left: 3px solid var(--color-primary-orange);
+    }
+}
+
+// Day View specifics
+.day-header {
+    padding: 20px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #ddd;
+}
+
+.day-title {
+    font-size: 1.3em;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    
+    &.today {
+        color: var(--color-primary-orange);
+    }
+}
+
+// Responsive
+@media (max-width: 768px) {
+    .calendar-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .nav-buttons {
+        justify-content: center;
+    }
+    
+    .view-tabs {
+        justify-content: center;
+    }
+    
+    .day-cell {
+        min-height: 60px;
+        padding: 4px;
+    }
+    
+    .weekday-header {
+        padding: 8px 4px;
+        font-size: 0.8em;
+    }
 }
 </style>