update styles

src/app/schedule/components/action-panel/action-panel.component.html

@@ -8,7 +8,7 @@
             <ul>
                 @for (employee of employees;track employee;let i = $index) {
                     <li>
-                        <mat-checkbox color="primary" [formControlName]="i">{{ employee.name }}</mat-checkbox>
+                        <mat-checkbox [formControlName]="i">{{ employee.name }}</mat-checkbox>
                     </li>
                 }
             </ul>

src/app/schedule/components/schedule/schedule.component.html

@@ -1,37 +1,39 @@
 <f-drag-grid (fMovedTo)="onItemMovedToCell($event)">
-  <f-header>
-    <f-header-row>
-      <div class="time-cell"></div>
-      <button mat-icon-button class="previous-next-button previous" (click)="prev.emit()">
-        <mat-icon>arrow_left</mat-icon>
-      </button>
-      @for (column of viewModel?.columns; track column) {
-        <f-header-cell>
-            <div class="day-of-week">{{ column.id | date : 'EE' }}</div>
-            <div class="date">{{ column.id | date : 'd' }}</div>
-        </f-header-cell>
-      }
-      <button mat-icon-button class="previous-next-button next" (click)="next.emit()">
-        <mat-icon>arrow_right</mat-icon>
-      </button>
-    </f-header-row>
-  </f-header>
-  <f-body>
-    @for (row of viewModel?.rows; track row) {
-      <f-body-row>
-        <div class="time-cell">
-          <div>{{ row.id | date : 'HH:mm' }}</div>
-        </div>
-        @for (cell of row.cells; track cell) {
-          <f-body-cell [id]="cell.id">
-            @for (item of cell.items; track item) {
-              <f-cell-item [id]="item.id">
-                <schedule-item [viewModel]="item"></schedule-item>
-              </f-cell-item>
+    <f-header>
+        <f-header-row>
+            <div class="time-cell"></div>
+            <button mat-icon-button class="previous-next-button previous" (click)="prev.emit()">
+                <mat-icon>arrow_left</mat-icon>
+            </button>
+            @for (column of viewModel?.columns;track column) {
+                <f-header-cell>
+                    <div class="date-container" [class.today]="column.isToday">
+                        <div class="day-of-week">{{ column.id | date : 'EE' }}</div>
+                        <div class="date">{{ column.id | date : 'd' }}</div>
+                    </div>
+                </f-header-cell>
             }
-          </f-body-cell>
+            <button mat-icon-button class="previous-next-button next" (click)="next.emit()">
+                <mat-icon>arrow_right</mat-icon>
+            </button>
+        </f-header-row>
+    </f-header>
+    <f-body>
+        @for (row of viewModel?.rows;track row) {
+            <f-body-row>
+                <div class="time-cell">
+                    <div>{{ row.id | date : 'HH:mm' }}</div>
+                </div>
+                @for (cell of row.cells;track cell) {
+                    <f-body-cell [id]="cell.id">
+                        @for (item of cell.items;track item) {
+                            <f-cell-item [id]="item.id">
+                                <schedule-item [viewModel]="item"></schedule-item>
+                            </f-cell-item>
+                        }
+                    </f-body-cell>
+                }
+            </f-body-row>
         }
-      </f-body-row>
-    }
-  </f-body>
+    </f-body>
 </f-drag-grid>

src/app/schedule/components/schedule/schedule.component.scss

@@ -32,6 +32,19 @@ $border-color: #f5f5f5;
     font-weight: 500;
     font-size: 16px;
 
+    .date-container {
+      padding: 4px;
+      border-radius: 50%;
+      width: 48px;
+      height: 48px;
+      margin: auto;
+
+      &.today {
+        color: white;
+        background-color: #2196F3;
+      }
+    }
+
     .day-of-week {
       font-size: 12px;
       font-weight: 400;

src/app/schedule/domain/schedule/generate-schedule/generate-schedule.handler.ts

@@ -18,9 +18,9 @@ import { EmployeeService } from '../../../employee.service';
 export class GenerateScheduleHandler implements IHandler<GenerateScheduleRequest, ISchedule> {
 
   constructor(
-    private clientService: ClientService,
-    private serviceService: ServiceService,
-    private employeeService: EmployeeService
+      private clientService: ClientService,
+      private serviceService: ServiceService,
+      private employeeService: EmployeeService
   ) {
   }
 
@@ -43,12 +43,18 @@ export class GenerateScheduleHandler implements IHandler<GenerateScheduleRequest
     for (let i = 0; i < request.days; i++) {
       const date = new Date(request.startDate);
       date.setDate(date.getDate() + i);
-      result.push({ id: date });
+      const isToday = this.isToday(date);
+      result.push({ id: date, isToday: isToday });
     }
 
     return result;
   }
 
+  private isToday(date: Date): boolean {
+    const today = new Date();
+    return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
+  }
+
   private generateRows(request: GenerateScheduleRequest, columns: IScheduleColumn[]): IScheduleRow[] {
     const result: IScheduleRow[] = [];
     let currentTime = new Date(request.startTime);

src/app/schedule/domain/schedule/i-schedule-column.ts

@@ -1,4 +1,6 @@
 export interface IScheduleColumn {
 
   id: Date;
+
+  isToday: boolean;
 }

src/styles.scss

@@ -1,5 +1,17 @@
 html, body {
   height: 100%;
+
+  --mat-datepicker-calendar-date-selected-state-background-color: #2196F3;
+  --mat-datepicker-toggle-active-state-icon-color: #2196F3;
+
+  --mdc-checkbox-selected-focus-icon-color: #2196F3;
+  --mdc-checkbox-selected-hover-icon-color: #2196F3;
+  --mdc-checkbox-selected-icon-color: #2196F3;
+  --mdc-checkbox-selected-pressed-icon-color: #2196F3;
+
+  --mdc-checkbox-selected-focus-state-layer-color: #2196F3;
+  --mdc-checkbox-selected-hover-state-layer-color: #2196F3;
+  --mdc-checkbox-selected-pressed-state-layer-color: #2196F3;
 }
 
 body {