chore: add calendar

taiga-family · Aug 14, 2024 · ae5d693 · ae5d693
1 parent d7c04c1
commit ae5d693
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/...lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html b/...lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html
@@ -96,3 +96,11 @@ <h3 tuiTitle>
         </div>
     }
 </div>
+<tui-calendar
+    class="calendar"
+    [value]="calendarValue"
+    (dayClick)="onDayClick($event)"
+/>
+@if (calendarValue) {
+    <div>Chosen date: {{ calendarValue }}</div>
+}
diff --git a/...lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.less b/...lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.less
@@ -18,6 +18,13 @@
     }
 }
 
+.calendar {
+    @media (max-width: 43.75rem) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 .card-animals[tuiAppearance][data-appearance='whiteblock'] {
     display: flex;
     flex-direction: row;

diff --git a/...a-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts b/...a-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts
@@ -2,7 +2,8 @@ import {AsyncPipe, CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular/core';
 import {TuiPieChart} from '@taiga-ui/addon-charts';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
-import {TuiAppearance, TuiButton, TuiHint, TuiTitle} from '@taiga-ui/core';
+import type {TuiDay} from '@taiga-ui/cdk';
+import {TuiAppearance, TuiButton, TuiCalendar, TuiHint, TuiTitle} from '@taiga-ui/core';
 import {TuiAvatar, TuiBadge, TuiStatus} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
@@ -17,6 +18,7 @@ import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
         TuiAvatar,
         TuiBadge,
         TuiButton,
+        TuiCalendar,
         TuiCardLarge,
         TuiHeader,
         TuiHint,
@@ -31,6 +33,8 @@ import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 export class AdministratorComponent {
     protected readonly value = [13769, 12367, 10172, 3018, 2592];
     protected readonly labels = ['Food', 'Сleaning', 'Electricity', 'Water', 'Other'];
+    protected calendarValue: TuiDay | null = null;
+
     protected animals = [
         {
             src: './nft/1.jpg',
@@ -64,4 +68,8 @@ export class AdministratorComponent {
     protected openTable(): void {
         this.openTableChange.emit(true);
     }
+
+    protected onDayClick(day: TuiDay): void {
+        this.calendarValue = day;
+    }
 }