Include CalendarHeader for all CalendarViews

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">
+    <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>

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();
+  }
 }

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;
+}

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">
+    <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">

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();
+  }
+
 }