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

@@ -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"
+            }
         }
     }
 }

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"
+            }
         }
     }
 }

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>