Calendar Header for upcoming deadlines
All checks were successful
Java CI with Maven / build-and-push-frontend (push) Successful in 10s
Java CI with Maven / build-and-push-backend (push) Successful in 8s

This commit is contained in:
Sebastian Böckelmann 2024-03-17 12:28:07 +01:00
parent 9d20335c59
commit 88d285bef7
4 changed files with 34 additions and 5 deletions

View File

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

View File

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

View File

@ -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>

View File

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