Better calendar navigation.

frontend/app/features/content/pages/calendar/calendar-page.component.scss

@@ -10,6 +10,30 @@
     .tui-full-calendar-time-schedule-content {
         min-height: 22px !important;
     }
+
+    .tui-full-calendar-dayname {
+        cursor: pointer;
+    }
+
+    .tui-full-calendar-weekday-grid-date {
+        cursor: pointer;
+
+        &:hover {
+            background-color: $color-border-light;
+            border: 0;
+            border-radius: 20px;
+        }
+    }
+
+    .tui-full-calendar-today {
+        .tui-full-calendar-weekday-grid-date {
+            background-color: $color-theme-brand !important;
+
+            &:hover {
+                background-color: $color-theme-brand-darker !important;
+            }
+        }
+    }
 }
 
 .calendar {

frontend/app/features/content/pages/calendar/calendar-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, ViewChild } from '@angular/core';
 import { AppsState, ContentDto, ContentsService, DateTime, DialogModel, getContentValue, LanguageDto, LanguagesState, LocalizerService, ResourceLoaderService } from '@app/shared';
 
 declare const tui: any;
@@ -74,12 +74,11 @@ export class CalendarPageComponent implements AfterViewInit, OnDestroy {
                 this.changeDetector.detectChanges();
             });
 
-            this.calendar.on('click', (event: any) => {
-                if (this.calendar.getViewName() === 'day') {
+            this.calendar.on('clickDayname', (event: any) => {
+                if (this.calendar.getViewName() === 'week') {
                     this.calendar.setDate(new Date(event.date));
-                    this.calendar.changeView('day', true);
 
-                    this.load();
+                    this.changeView('day');
                 }
             });
 
@@ -87,6 +86,22 @@ export class CalendarPageComponent implements AfterViewInit, OnDestroy {
         });
     }
 
+    @HostListener('click', ['$event'])
+    public onClick(event: MouseEvent) {
+        const target = event.target as HTMLElement;
+
+        if (target.classList.contains('tui-full-calendar-weekday-grid-date')) {
+            const monthStart: Date = this.calendar.getDateRangeStart().toDate();
+
+            const dayOfMonth = parseInt(target.innerText, 10);
+            const dateOfMonth = new Date(monthStart.getFullYear(), monthStart.getMonth(), dayOfMonth);
+
+            this.calendar.setDate(dateOfMonth);
+
+            this.changeView('day');
+        }
+    }
+
     public changeView(view: ViewMode) {
         this.view = view;