Calendar Header for upcoming deadlines

frontend/src/app/app.module.ts

@@ -189,8 +189,7 @@ import {CommonModule} from "@angular/common";
     NgApexchartsModule,
     MatButtonToggleModule,
     MatGridListModule,
-    MatStepperModule,
+    MatStepperModule
-    CommonModule
   ],
   providers: [
     HttpClientModule,

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

@@ -24,3 +24,20 @@
 .undecorated-link:hover {
   color: #3498db;
 }
+
+.calendar-header {
+  display: flex;
+  align-items: center;
+}
+
+.calendar-control {
+  display: flex;
+}
+
+.calendar-header-title {
+  align-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  text-align: center;
+  margin-right: auto;
+}

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

@@ -1,8 +1,17 @@
 <div class="container">
   <app-navigation-link-list [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
 
-
+  <div class="calendar-header">
-  <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)" [activeDayIsOpen]="activeDayIsOpen"
+    <div class="calendar-control">
-  ></mwl-calendar-month-view>
+      <button mat-flat-button color="primary" mwlCalendarPreviousView [view]="'month'" [(viewDate)]="viewDate"
+              (viewDateChange)="closeOpenMonthViewDay()">Previous</button>
+      <button mat-flat-button mwlCalendarToday [(viewDate)]="viewDate">Today</button>
+      <button mat-flat-button color="primary" mwlCalendarNextView [view]="'month'" [(viewDate)]="viewDate"
+              (viewDateChange)="closeOpenMonthViewDay()">Next</button>
+    </div>
+    <h1 class="calendar-header-title">{{ viewDate | calendarDate:('month' + 'ViewTitle'):'en' }}</h1>
+  </div>
+  <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)"
+                           [activeDayIsOpen]="activeDayIsOpen"></mwl-calendar-month-view>
 
 </div>

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

@@ -80,4 +80,8 @@ export class UpcomingDeadlinesOverviewComponent implements OnInit{
       this.viewDate = date;
     }
   }
+
+  closeOpenMonthViewDay() {
+    this.activeDayIsOpen = false;
+  }
 }