UI-Anpassungen

frontend/js/calendar.js

@@ -524,9 +524,19 @@ class CalendarViewManager {
         e.stopPropagation();
         this.createTaskForDate(dateString);
       }
-    }, ['+ Aufgabe']);
+    }, ['Aufgabe hinzufügen']);
     dayEl.appendChild(addBtn);
 
+    // Add reminder button
+    const addReminderBtn = createElement('button', {
+      className: 'calendar-week-add-reminder',
+      onclick: (e) => {
+        e.stopPropagation();
+        this.createReminderForDate(dateString);
+      }
+    }, ['Erinnerung hinzufügen']);
+    dayEl.appendChild(addReminderBtn);
+
     return dayEl;
   }
 
@@ -920,28 +930,57 @@ class CalendarViewManager {
       className: 'btn btn-primary btn-block',
       style: { marginTop: 'var(--spacing-md)' },
       onclick: () => this.createTaskForDate(dateString)
-    }, ['+ Aufgabe hinzufügen']));
+    }, ['Aufgabe hinzufügen']));
 
     // Add reminder button
     popup.appendChild(createElement('button', {
-      className: 'btn btn-secondary btn-block',
+      className: 'btn btn-reminder-secondary btn-block',
       style: { marginTop: 'var(--spacing-sm)' },
       onclick: () => this.createReminderForDate(dateString)
-    }, ['🔔 Erinnerung hinzufügen']));
+    }));
+
+    // Add HTML content with SVG icon
+    const button = popup.lastElementChild;
+    button.innerHTML = '<svg class="icon" viewBox="0 0 24 24" width="18" height="18" style="margin-right: 6px; flex-shrink: 0;"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" stroke="white" stroke-width="2" fill="none"></path></svg> Erinnerung hinzufügen';
 
     // Position popup - different logic for week vs month view
     const rect = anchorEl.getBoundingClientRect();
+    const popupHeight = 400; // Estimated max height
+    const popupWidth = 350;
+    const padding = 8;
     
     let popupTop, popupLeft;
     
     if (this.viewMode === 'week') {
       // For week view, position at the top of the day element
       popupTop = Math.max(150, rect.top + 50); // Ensure it's visible, minimum 150px from top
-      popupLeft = Math.min(rect.left, window.innerWidth - 350);
     } else {
       // For month view, position below the day element
-      popupTop = rect.bottom + 8;
-      popupLeft = Math.min(rect.left, window.innerWidth - 350);
+      popupTop = rect.bottom + padding;
+      
+      // Check if popup would go below viewport
+      if (popupTop + popupHeight > window.innerHeight - padding) {
+        // Position above the element instead
+        popupTop = rect.top - popupHeight - padding;
+        
+        // If still not enough space above, position at bottom of viewport
+        if (popupTop < padding) {
+          popupTop = window.innerHeight - popupHeight - padding;
+        }
+      }
+    }
+    
+    // Horizontal positioning
+    popupLeft = rect.left;
+    
+    // Check if popup would go beyond right edge
+    if (popupLeft + popupWidth > window.innerWidth - padding) {
+      popupLeft = window.innerWidth - popupWidth - padding;
+    }
+    
+    // Check if popup would go beyond left edge
+    if (popupLeft < padding) {
+      popupLeft = padding;
     }
     
     popup.style.top = `${popupTop}px`;
@@ -1087,15 +1126,39 @@ class CalendarViewManager {
 
     // Add reminder button
     popup.appendChild(createElement('button', {
-      className: 'btn btn-secondary btn-block',
+      className: 'btn btn-reminder-secondary btn-block',
       style: { marginTop: 'var(--spacing-md)' },
       onclick: () => this.createReminderForDate(dateString)
-    }, ['+ Weitere Erinnerung']));
+    }, ['Weitere Erinnerung']));
 
     // Position popup
     const rect = anchorEl.getBoundingClientRect();
-    let popupTop = rect.bottom + 8;
-    let popupLeft = Math.min(rect.left, window.innerWidth - 350);
+    const popupHeight = 400; // Estimated max height
+    const popupWidth = 350;
+    const padding = 8;
+    
+    let popupTop = rect.bottom + padding;
+    let popupLeft = rect.left;
+    
+    // Check if popup would go below viewport
+    if (popupTop + popupHeight > window.innerHeight - padding) {
+      // Position above the element instead
+      popupTop = rect.top - popupHeight - padding;
+      
+      // If still not enough space above, position at bottom of viewport
+      if (popupTop < padding) {
+        popupTop = window.innerHeight - popupHeight - padding;
+      }
+    }
+    
+    // Horizontal positioning
+    if (popupLeft + popupWidth > window.innerWidth - padding) {
+      popupLeft = window.innerWidth - popupWidth - padding;
+    }
+    
+    if (popupLeft < padding) {
+      popupLeft = padding;
+    }
     
     popup.style.top = `${popupTop}px`;
     popup.style.left = `${popupLeft}px`;