diff --git a/frontend/app/features/content/pages/calendar/calendar-page.component.scss b/frontend/app/features/content/pages/calendar/calendar-page.component.scss index 3e24e47ee..df3f027e5 100644 --- a/frontend/app/features/content/pages/calendar/calendar-page.component.scss +++ b/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 { diff --git a/frontend/app/features/content/pages/calendar/calendar-page.component.ts b/frontend/app/features/content/pages/calendar/calendar-page.component.ts index 5d1ba7249..dd9090c6b 100644 --- a/frontend/app/features/content/pages/calendar/calendar-page.component.ts +++ b/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;