Visualize Upcoming Deadlines (use default view)

frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css

@@ -24,31 +24,3 @@
 .undecorated-link:hover {
   color: #3498db;
 }
-
-.cal-event-title {
-  color: black;
-  margin-left: 5px;
-
-  white-space: nowrap;
-  display: inline-block;
-}
-
-.cal-event-circle {
-  width: 10px; /* Beispielgröße für den Kreis */
-  height: 10px; /* Beispielgröße für den Kreis */
-  border-radius: 50%;
-  display: inline-block;
-  background-color: #1e90ff;
-  vertical-align: top; /* Vertikale Ausrichtung zentrieren */
-}
-
-.event {
-  display: block;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-
-.cal-cell-content {
-  width: calc(100% - 20px); /* Breite der Zelle abzüglich des linken Randes für den Titel */
-}

frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html

@@ -1,21 +1,8 @@
 <div class="container">
   <app-navigation-link-list [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
 
-  <ng-template #customCellTemplate let-day="day" let-locale="locale">
+
-    <div class="cal-cell-top">
+  <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)" [activeDayIsOpen]="activeDayIsOpen"
-      <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
-      <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
-    </div>
-    <div class="cal-cell-content">
-      <div class="cal-events">
-        <div *ngFor="let event of day.events" class="event">
-          <div class="cal-event-circle"></div> <!-- Small circle -->
-          <div class="cal-event-title">{{ event.title }}</div> <!-- Event title -->
-        </div>
-      </div>
-    </div>
-  </ng-template>
-  <mwl-calendar-month-view [viewDate]="viewDate" [events]="events"  [cellTemplate]="customCellTemplate" [refresh]="refresh"
   ></mwl-calendar-month-view>
 
 </div>

frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts

@@ -24,9 +24,24 @@ export class UpcomingDeadlinesOverviewComponent implements OnInit{
     }
   ]
 
-  events: CalendarEvent[] = []
+  events: CalendarEvent[] = [{
+    title: "testdkjawfwekjdbjfbjsekdhwadvsjfbsadgascbsdadkawsdjkasfc",
+    start: moment("2024-03-18").toDate(),
+    end: moment("2024-03-18").toDate(),
+    resizable: {
+      beforeStart: false,
+      afterEnd: false
+    },
+    draggable: false,
+    allDay: true,
+    color: {
+      primary: '#1e90ff',
+      secondary: '#D1E8FF',
+    }
+  }]
   viewDate = new Date()
   refresh: Subject<void> = new Subject<void>()
+  activeDayIsOpen = false;
 
   constructor(private taskService: TaskService) {
   }
@@ -57,4 +72,12 @@ export class UpcomingDeadlinesOverviewComponent implements OnInit{
       }
     })
   }
+
+  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
+    if (moment(date).isSame(this.viewDate, 'month')) {
+      this.activeDayIsOpen = !((moment(date).isSame(this.viewDate, 'day') && this.activeDayIsOpen) ||
+        events.length === 0);
+      this.viewDate = date;
+    }
+  }
 }