From f921d1d22292c7351a97d913190b13a9b8cadad2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sun, 17 Mar 2024 11:50:47 +0100
Subject: [PATCH 1/4] Visualize Upcoming Deadlines

---
 frontend/src/app/app-routing.module.ts        |  2 +
 frontend/src/app/app.component.html           |  3 +
 frontend/src/app/app.module.ts                |  4 ++
 .../upcoming-deadlines-overview.component.css | 54 +++++++++++++++++
 ...upcoming-deadlines-overview.component.html | 21 +++++++
 ...oming-deadlines-overview.component.spec.ts | 21 +++++++
 .../upcoming-deadlines-overview.component.ts  | 60 +++++++++++++++++++
 7 files changed, 165 insertions(+)
 create mode 100644 frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
 create mode 100644 frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
 create mode 100644 frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.spec.ts
 create mode 100644 frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 1d22ed5..8c64c79 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -17,6 +17,7 @@ import {
 } from "./dashboard/forgotten-task-start-dialog/forgotten-task-start-dialog.component";
 import {TaskgroupActivityComponent} from "./statistics/taskgroup-activity/taskgroup-activity.component";
 import {ScheduleHistoryComponent} from "./statistics/schedule-history/schedule-history.component";
+import {UpcomingDeadlinesOverviewComponent} from "./upcoming-deadlines-overview/upcoming-deadlines-overview.component";
 
 const routes: Routes = [
   {path: '', component: MainComponent},
@@ -35,6 +36,7 @@ const routes: Routes = [
   {path: 'forgotten', component: ForgottenTaskStartDialogComponent},
   {path: 'statistics/taskgroup-activity', component: TaskgroupActivityComponent},
   {path: 'statistics/schedule-history', component: ScheduleHistoryComponent},
+  {path: 'deadlines', component: UpcomingDeadlinesOverviewComponent}
 ];
 
 @NgModule({
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 9e0ad25..9116ab0 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -6,10 +6,13 @@
   <mat-menu #organizeMenu=matMenu>
     <button mat-menu-item routerLink="taskgroups/" aria-label="Task groups">Taskgroups</button>
     <button mat-menu-item routerLink="scheduler/" aria-label="Task groups">Scheduler</button>
+    <mat-divider></mat-divider>
     <button mat-menu-item routerLink="active/" aria-label="Missed Schedules">Active Tasks</button>
     <button mat-menu-item routerLink="upcoming/" aria-label="Upcoming Tasks">Upcoming Tasks</button>
     <button mat-menu-item routerLink="overdue/" aria-label="Overdue Tasks">Overdue Tasks</button>
     <button mat-menu-item routerLink="reschedule/" aria-label="Missed Schedules">Missed Schedules</button>
+    <mat-divider></mat-divider>
+    <button mat-menu-item routerLink="deadlines" aria-label="Upcoming Deadlines">Deadlines</button>
   </mat-menu>
 
   <mat-menu #statisticsMenu=matMenu>
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 71ac5f2..1530f36 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -94,6 +94,8 @@ import { NtfySettingsComponent } from './user-settings/connection-settings/ntfy-
 import { TaskSeriesCreatorComponent } from './tasks/task-series-creator/task-series-creator.component';
 import {MatStepperModule} from "@angular/material/stepper";
 import { TaskWeeklySeriesCreatorComponent } from './tasks/task-weekly-series-creator/task-weekly-series-creator.component';
+import { UpcomingDeadlinesOverviewComponent } from './upcoming-deadlines-overview/upcoming-deadlines-overview.component';
+import {CommonModule} from "@angular/common";
 @NgModule({
   declarations: [
     AppComponent,
@@ -143,6 +145,7 @@ import { TaskWeeklySeriesCreatorComponent } from './tasks/task-weekly-series-cre
     NtfySettingsComponent,
     TaskSeriesCreatorComponent,
     TaskWeeklySeriesCreatorComponent,
+    UpcomingDeadlinesOverviewComponent,
   ],
   imports: [
     BrowserModule,
@@ -187,6 +190,7 @@ import { TaskWeeklySeriesCreatorComponent } from './tasks/task-weekly-series-cre
     MatButtonToggleModule,
     MatGridListModule,
     MatStepperModule,
+    CommonModule
   ],
   providers: [
     HttpClientModule,
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
new file mode 100644
index 0000000..4321d61
--- /dev/null
+++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
@@ -0,0 +1,54 @@
+.container {
+  margin: 20px auto;
+  width: 70%;
+}
+
+.spacer {
+  margin-bottom: 2.5%;
+}
+
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    margin: 20px 10px;
+  }
+}
+
+
+.undecorated-link {
+  text-decoration: none;
+  color: black;
+}
+
+.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 */
+}
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
new file mode 100644
index 0000000..29540b4
--- /dev/null
+++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
@@ -0,0 +1,21 @@
+<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">
+      <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>
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.spec.ts b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.spec.ts
new file mode 100644
index 0000000..82860b9
--- /dev/null
+++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpcomingDeadlinesOverviewComponent } from './upcoming-deadlines-overview.component';
+
+describe('UpcomingDeadlinesOverviewComponent', () => {
+  let component: UpcomingDeadlinesOverviewComponent;
+  let fixture: ComponentFixture<UpcomingDeadlinesOverviewComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UpcomingDeadlinesOverviewComponent]
+    });
+    fixture = TestBed.createComponent(UpcomingDeadlinesOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
new file mode 100644
index 0000000..62e4eee
--- /dev/null
+++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
@@ -0,0 +1,60 @@
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {NavigationLink} from "../navigation-link-list/navigation-link-list.component";
+import {TaskService, TaskTaskgroupInfo} from "../../api";
+import {CalendarEvent} from "angular-calendar";
+import * as moment from "moment";
+import {locale} from "moment";
+import {Subject} from "rxjs";
+
+@Component({
+  selector: 'app-upcoming-deadlines-overview',
+  templateUrl: './upcoming-deadlines-overview.component.html',
+  styleUrls: ['./upcoming-deadlines-overview.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UpcomingDeadlinesOverviewComponent implements OnInit{
+  defaultNavigationLinkPath: NavigationLink[] = [
+    {
+      linkText: "Dashboard",
+      routerLink: ['/']
+    },
+    {
+      linkText: "Upcoming Deadlines",
+      routerLink: ["/deadlines"]
+    }
+  ]
+
+  events: CalendarEvent[] = []
+  viewDate = new Date()
+  refresh: Subject<void> = new Subject<void>()
+
+  constructor(private taskService: TaskService) {
+  }
+
+
+  ngOnInit() {
+    this.taskService.tasksAllScopeDetailedGet("UNFINISHED", true).subscribe({
+      next: resp => {
+        resp.forEach(taskShortInfo => {
+          const task_taskgroupInfo = taskShortInfo as TaskTaskgroupInfo
+          this.events.push({
+            title: task_taskgroupInfo.taskName,
+            start: moment(task_taskgroupInfo.deadline).toDate(),
+            end: moment(task_taskgroupInfo.deadline).toDate(),
+            resizable: {
+              beforeStart: false,
+              afterEnd: false
+            },
+            draggable: false,
+            allDay: true,
+            color: {
+              primary: '#1e90ff',
+              secondary: '#D1E8FF',
+            }
+          })
+        })
+        this.refresh.next()
+      }
+    })
+  }
+}

From 9d20335c590d91290c1149894e72c60104a9c6e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sun, 17 Mar 2024 12:04:59 +0100
Subject: [PATCH 2/4] Visualize Upcoming Deadlines (use default view)

---
 .../upcoming-deadlines-overview.component.css | 28 -------------------
 ...upcoming-deadlines-overview.component.html | 17 ++---------
 .../upcoming-deadlines-overview.component.ts  | 25 ++++++++++++++++-
 3 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
index 4321d61..06d0baa 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
+++ b/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 */
-}
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
index 29540b4..6483b0a 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
+++ b/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">
-      <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 [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)" [activeDayIsOpen]="activeDayIsOpen"
   ></mwl-calendar-month-view>
 
 </div>
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
index 62e4eee..8fbcc89 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
+++ b/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;
+    }
+  }
 }

From 88d285bef7c63321b188cb02be16e8847daeb4cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sun, 17 Mar 2024 12:28:07 +0100
Subject: [PATCH 3/4] Calendar Header for upcoming deadlines

---
 frontend/src/app/app.module.ts                  |  3 +--
 .../upcoming-deadlines-overview.component.css   | 17 +++++++++++++++++
 .../upcoming-deadlines-overview.component.html  | 15 ++++++++++++---
 .../upcoming-deadlines-overview.component.ts    |  4 ++++
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 1530f36..ca3c8e4 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -189,8 +189,7 @@ import {CommonModule} from "@angular/common";
     NgApexchartsModule,
     MatButtonToggleModule,
     MatGridListModule,
-    MatStepperModule,
-    CommonModule
+    MatStepperModule
   ],
   providers: [
     HttpClientModule,
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
index 06d0baa..6b0ea97 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css
+++ b/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;
+}
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
index 6483b0a..96bb4e9 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html
+++ b/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>
 
-
-  <mwl-calendar-month-view [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)" [activeDayIsOpen]="activeDayIsOpen"
-  ></mwl-calendar-month-view>
+  <div class="calendar-header">
+    <div class="calendar-control">
+      <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>
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
index 8fbcc89..82382cf 100644
--- a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts
+++ b/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;
+  }
 }

From 514a5650bf9ff64984115ed1635363c75b6b2127 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sun, 17 Mar 2024 13:16:05 +0100
Subject: [PATCH 4/4] Include CalendarHeader for all CalendarViews

---
 .../draggable-scheduler.component.html          | 13 +++++++++++--
 .../draggable-scheduler.component.ts            |  9 +++++++--
 .../schedules/scheduler/scheduler.component.css | 17 +++++++++++++++++
 .../scheduler/scheduler.component.html          | 11 +++++++++--
 .../schedules/scheduler/scheduler.component.ts  |  7 +++++--
 5 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html
index 3e1412a..341ccd1 100644
--- a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html
+++ b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html
@@ -3,7 +3,14 @@
   <app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
 
   <div class="schedule-header">
-    <h1>Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}</h1>
+    <div class="calendar-control">
+      <button mat-flat-button color="primary" mwlCalendarPreviousView [view]="'week'" [(viewDate)]="viewDate">Previous</button>
+      <button mat-flat-button mwlCalendarToday  (click)="resetCalendarToToday()">Today</button>
+      <button mat-flat-button color="primary" mwlCalendarNextView [view]="'week'" [(viewDate)]="viewDate">Next</button>
+    </div>
+    <div class="calendar-date-title">
+      <h1>Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}</h1>
+    </div>
     <mat-form-field style="float:right;">
       <mat-label>Schedule Strategy</mat-label>
       <mat-select [(ngModel)]="scheduleStrategy">
@@ -13,11 +20,13 @@
       </mat-select>
     </mat-form-field>
   </div>
+  <p>TZest</p>
   <div style="display: flex; justify-content: space-between;">
     <div style="width: 75%">
-      <mwl-calendar-week-view [viewDate]="viewDate" [daysInWeek]="daysInWeek" [dayStartHour]="7" [dayEndHour]="21" [refresh]="refresh"
+      <mwl-calendar-week-view [viewDate]="viewDate" [daysInWeek]="7" [dayStartHour]="7" [dayEndHour]="21" [refresh]="refresh"
                               [snapDraggedEvents]="false"
                               (eventTimesChanged)="eventDropped($event)" [events]="events" (eventClicked)="eventClicked('Click', $event.event)"
+                              [weekStartsOn]="1"
       >
       </mwl-calendar-week-view>
     </div>
diff --git a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts
index 23e6ac5..b5a1e2f 100644
--- a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts
+++ b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts
@@ -1,4 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {NavigationLink, NavigationLinkListComponent} from "../../navigation-link-list/navigation-link-list.component";
 import {
     AdvancedScheduleInfo,
@@ -47,7 +47,7 @@ const colors: Record<string, EventColor> = {
     `,
   ],
 })
-export class DraggableSchedulerComponent {
+export class DraggableSchedulerComponent implements OnInit{
   defaultNavigationLinkPath: NavigationLink[] = [
     {
       linkText: "Dashboard",
@@ -104,6 +104,7 @@ export class DraggableSchedulerComponent {
   }
 
   ngOnInit() {
+    this.viewDate = moment().startOf('isoWeek').toDate()
     this.scheduleService.schedulesGet().subscribe({
         next: resp => {
           resp.forEach(schedule => {
@@ -282,4 +283,8 @@ export class DraggableSchedulerComponent {
         }
 
     }
+
+  resetCalendarToToday() {
+    this.viewDate = moment().startOf('isoWeek').toDate();
+  }
 }
diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.css b/frontend/src/app/schedules/scheduler/scheduler.component.css
index abdc086..cc03881 100644
--- a/frontend/src/app/schedules/scheduler/scheduler.component.css
+++ b/frontend/src/app/schedules/scheduler/scheduler.component.css
@@ -29,3 +29,20 @@
 ::ng-deep .cal-event-title {
   white-space: normal;
 }
+
+.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;
+}
diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.html b/frontend/src/app/schedules/scheduler/scheduler.component.html
index c8456e3..b42cfbe 100644
--- a/frontend/src/app/schedules/scheduler/scheduler.component.html
+++ b/frontend/src/app/schedules/scheduler/scheduler.component.html
@@ -1,8 +1,15 @@
 <div class="container">
   <app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
-
+  <p>Tets</p>
   <div class="schedule-header">
-    <h1>Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}</h1>
+    <div class="calendar-control">
+      <button mat-flat-button color="primary" mwlCalendarPreviousView [view]="'week'" [(viewDate)]="viewDate">Previous</button>
+      <button mat-flat-button mwlCalendarToday (click)="resetCalendarToToday()">Today</button>
+      <button mat-flat-button color="primary" mwlCalendarNextView [view]="'week'" [(viewDate)]="viewDate">Next</button>
+    </div>
+    <div class="calendar-date-title">
+      <h1>Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}</h1>
+    </div>
       <mat-form-field style="float:right;">
         <mat-label>Schedule Strategy</mat-label>
         <mat-select [(ngModel)]="scheduleStrategy">
diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.ts b/frontend/src/app/schedules/scheduler/scheduler.component.ts
index b71223d..c8799da 100644
--- a/frontend/src/app/schedules/scheduler/scheduler.component.ts
+++ b/frontend/src/app/schedules/scheduler/scheduler.component.ts
@@ -80,6 +80,7 @@ export class SchedulerComponent implements OnInit{
   }
 
   ngOnInit(): void {
+    this.viewDate = moment().startOf('isoWeek').toDate();
     this.activatedRoute.paramMap.subscribe(params => {
       if (params.has('taskgroupID')) {
         this.taskgroupID = Number(params.get('taskgroupID'));
@@ -131,8 +132,6 @@ export class SchedulerComponent implements OnInit{
   protected readonly CalendarView = CalendarView;
 
   timeClick(clickedDate: Date) {
-
-    console.log(clickedDate)
     if(this.basicScheduler != undefined && this.scheduleStrategy === 1) {
       this.basicScheduler.setDate(clickedDate)
     } else if(this.advancedScheduler != undefined && this.scheduleStrategy === 3) {
@@ -335,4 +334,8 @@ export class SchedulerComponent implements OnInit{
     })
     this.refresh.next();
   }
+  resetCalendarToToday() {
+    this.viewDate = moment().startOf('isoWeek').toDate();
+  }
+
 }