diff --git a/frontend/src/i18n/locales/de/personal.json b/frontend/src/i18n/locales/de/personal.json index 108ee2a..2124d4e 100644 --- a/frontend/src/i18n/locales/de/personal.json +++ b/frontend/src/i18n/locales/de/personal.json @@ -8,6 +8,7 @@ "selectedDays": "{count} Tage ausgewählt", "createEventForSelection": "Termin erstellen", "clearSelection": "Auswahl aufheben", + "allDay": "Ganztägig", "views": { "month": "Monat", "week": "Woche", diff --git a/frontend/src/i18n/locales/en/personal.json b/frontend/src/i18n/locales/en/personal.json index e5a34b4..9535926 100644 --- a/frontend/src/i18n/locales/en/personal.json +++ b/frontend/src/i18n/locales/en/personal.json @@ -8,6 +8,7 @@ "selectedDays": "{count} days selected", "createEventForSelection": "Create Event", "clearSelection": "Clear Selection", + "allDay": "All Day", "views": { "month": "Month", "week": "Week", diff --git a/frontend/src/views/personal/CalendarView.vue b/frontend/src/views/personal/CalendarView.vue index 3200ac7..25261ad 100644 --- a/frontend/src/views/personal/CalendarView.vue +++ b/frontend/src/views/personal/CalendarView.vue @@ -87,6 +87,23 @@
{{ day.dayNumber }}
+ +
+
{{ $t('personal.calendar.allDay') }}
+
+
+
+ {{ event.title }} +
+
+
+
@@ -127,6 +144,23 @@
{{ day.dayNumber }}
+ +
+
{{ $t('personal.calendar.allDay') }}
+
+
+
+ {{ event.title }} +
+
+
+
@@ -164,6 +198,21 @@ {{ currentDayData.dayNumber }}. {{ $t(`personal.calendar.months.${currentDayData.month}`) }} {{ currentDayData.year }}
+ +
+
{{ $t('personal.calendar.allDay') }}
+
+
+ {{ event.title }} +
+
+
@@ -595,6 +644,17 @@ export default { return dateStr >= eventStart && dateStr <= eventEnd; }); }, + getEventsForDateAllDay(dateStr) { + return this.events.filter(event => { + if (!event.allDay) return false; + const eventStart = event.startDate; + const eventEnd = event.endDate || event.startDate; + return dateStr >= eventStart && dateStr <= eventEnd; + }); + }, + hasAnyAllDayEvents(daysData) { + return daysData.some(day => this.getEventsForDateAllDay(day.date).length > 0); + }, getEventsForDateTime(dateStr, hour) { return this.events.filter(event => { if (event.allDay) return false; @@ -1003,6 +1063,77 @@ h2 { background: #f8f8f8; } +// All-day events row (week/workweek views) +.all-day-row { + display: flex; + border-bottom: 1px solid #ddd; + background: #fafafa; + min-height: 40px; +} + +.all-day-label { + width: 60px; + flex-shrink: 0; + padding: 8px 4px; + font-size: 0.75em; + color: #888; + text-align: right; +} + +.all-day-events { + display: flex; + flex: 1; +} + +.all-day-cell { + flex: 1; + padding: 4px; + border-left: 1px solid #eee; + display: flex; + flex-direction: column; + gap: 2px; + + &:first-child { + border-left: none; + } +} + +.all-day-event { + padding: 4px 8px; + border-radius: 4px; + font-size: 0.8em; + color: #fff; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + + &:hover { + opacity: 0.9; + } +} + +// All-day section (day view) +.all-day-section { + display: flex; + border-bottom: 1px solid #ddd; + background: #fafafa; + padding: 8px 0; +} + +.all-day-events-day { + flex: 1; + padding: 4px 8px; + display: flex; + flex-wrap: wrap; + gap: 8px; + + .all-day-event { + flex: 0 0 auto; + max-width: 300px; + } +} + .time-header-spacer { width: 60px; flex-shrink: 0;