style: TT-315 Fixed headers days of the week

Author: Edgar Guaman

src/app/modules/time-entries/components/calendar/calendar.component.html

@@ -144,6 +144,7 @@
       [viewDate]="currentDate"
       [events]="timeEntriesAsEvent"
       [cellTemplate]="timeEntriesInsideMonthCalendarTemplate"
+      [weekStartsOn]="WEEK_START_DAY"
     >
     </mwl-calendar-month-view>
     <mwl-calendar-week-view
@@ -152,6 +153,7 @@
       [events]="timeEntriesAsEvent"
       [hourSegmentHeight]="HALF_HOUR * VARIATION_HEIGHT"
       [eventTemplate]="timeEntriesInsideDaysCalendarTemplate"
+      [weekStartsOn]="WEEK_START_DAY"
     >
     </mwl-calendar-week-view>
     <mwl-calendar-day-view

src/app/modules/time-entries/components/calendar/calendar.component.scss

@@ -70,6 +70,7 @@ $activity-text-size: $max-lines-activity * $line-height-base;
     overflow-y: hidden;
     color: $primary-text;
     margin: 2px 6px 0px 5px;
+    overflow-wrap: anywhere;
     background-color: $background-card-entry;
     border-left: 5px solid calculate-border-color($background-card-entry);
     -webkit-box-shadow: 0px 2px 5px 0px lighten($shadow-card-entry, 50%);
@@ -91,7 +92,7 @@ $activity-text-size: $max-lines-activity * $line-height-base;
     }
 
     p.additional {
-      overflow-wrap: break-word;
+      overflow-wrap: anywhere;
       color: calculate-bold-text-color($primary-text);
     }
   }
@@ -154,13 +155,13 @@ $activity-text-size: $max-lines-activity * $line-height-base;
   }
 }
 
-.btn-navigation{
+.btn-navigation {
   padding-left: 6px;
   padding-right: 6px;
 }
 
-@media only screen and (min-width : 576px) and (max-width : 767px) {
-  .currentDate{
+@media only screen and (min-width: 576px) and (max-width: 767px) {
+  .currentDate {
     margin-left: 14px;
     p {
       margin: 0;

src/app/modules/time-entries/components/calendar/calendar.component.ts

@@ -8,7 +8,7 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import { CalendarEvent, CalendarView } from 'angular-calendar';
+import { CalendarEvent, CalendarView, DAYS_OF_WEEK } from 'angular-calendar';
 import { Observable } from 'rxjs';
 import * as moment from 'moment';
 import { DataSource } from '../../../shared/models/data-source.model';
@@ -28,6 +28,7 @@ export class CalendarComponent implements OnInit {
   readonly VARIATION_HEIGHT: number = 2;
   readonly VISIBLE_TARGETS_FOR_TIME_ENTRIES_DESCRIPTION: CalendarView[] = [CalendarView.Week, CalendarView.Day];
   readonly CALENDAR_VIEW_ENUM: typeof CalendarView = CalendarView;
+  readonly WEEK_START_DAY = DAYS_OF_WEEK.MONDAY;
 
   @ViewChild('scrollContainer') scrollContainer: ElementRef<HTMLElement>;
 

src/styles.scss

@@ -43,3 +43,21 @@ Overwritten calendar style
 .cal-today:hover {
   background-color: darken($background-calendar-cell, 7%) !important;
 }
+
+.cal-week-view .cal-day-headers {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: $background-calendar-cell;
+}
+
+.cal-month-view .cal-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: $background-calendar-cell;
+}
+
+.cal-header .cal-cell {
+  border: 0.1px solid lighten($primary-text, 30%);
+}