From c8bba4570f6f14dda4d15b930768a5d6ff0c86ef Mon Sep 17 00:00:00 2001
From: Peter Maquiran <petermaquiran29@gmail.com>
Date: Tue, 2 Feb 2021 15:11:30 +0100
Subject: [PATCH] Add calendar day abbreviations

---
 src/app/pages/agenda/agenda.page.html | 51 +++++++++++++++++++++++----
 src/app/pages/agenda/agenda.page.scss | 24 +++++++++++--
 src/app/pages/agenda/agenda.page.ts   |  2 +-
 src/global.scss                       | 11 +++++-
 4 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index d19105c05..4e1f62b7e 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -43,8 +43,21 @@
               <ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
             </ion-row> 
           </ion-row> 
-        
-          <calendar
+          
+          <table class="custom-calendar-header">
+            <thead>
+              <th>S</th>
+              <th>T</th>
+              <th>Q</th>
+              <th>Q</th>
+              <th>S</th>
+              <th>S</th>
+              <th>D</th>
+            </thead>
+          </table>
+
+
+          <calendar class="calendar-component"
             [eventSource]="eventSource"
             [calendarMode]="calendar.mode"
             [currentDate]="calendar.currentDate"
@@ -62,7 +75,7 @@
             [monthviewDisplayEventTemplate]="template"
           >
           </calendar>
-    
+
           <!-- Adding a customized ng-template -->
           <ng-template #template let-view="view" let-row="row" let-col="col">
             <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [class.with-event]="view.dates[row*7+col].events.length">
@@ -94,7 +107,20 @@
             </ion-col>
           </ion-row>
         
-          <calendar
+
+          <table class="custom-calendar-header">
+            <thead>
+              <th>S</th>
+              <th>T</th>
+              <th>Q</th>
+              <th>Q</th>
+              <th>S</th>
+              <th>S</th>
+              <th>D</th>
+            </thead>
+          </table>
+
+          <calendar class="calendar-component"
             [eventSource]="eventSource"
             [calendarMode]="calendar.mode"
             [currentDate]="calendar.currentDate"
@@ -145,8 +171,21 @@
               </ion-button>
             </ion-col>
           </ion-row>
-        
-          <calendar
+          
+
+          <table class="custom-calendar-header">
+            <thead>
+              <th>S</th>
+              <th>T</th>
+              <th>Q</th>
+              <th>Q</th>
+              <th>S</th>
+              <th>S</th>
+              <th>D</th>
+            </thead>
+          </table>
+          
+          <calendar class="calendar-component"
             [eventSource]="eventSource"
             [calendarMode]="calendar.mode"
             [currentDate]="calendar.currentDate"
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index 9b7cfd880..77b9df683 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -257,7 +257,9 @@ label{
   right: 14px;
   color:  #e16817;
 }
-
+td.monthview-primary-with-event {
+  background-color: white !important;
+}
 .header-title{
   width: 300px;
   font-family: Roboto;
@@ -413,5 +415,21 @@ label{
 
 
 .calendar-tool-tip{
-  padding: 17px 10px 0px 10px;
-}
\ No newline at end of file
+  padding: 20px 10px 30px 10px;
+
+}
+
+
+.custom-calendar-header{
+  width: 100%;
+  margin-bottom: 10px;
+  thead{
+    th{
+      font-family: Roboto;
+      font-size: 15px;
+      color: rgba(52, 72, 94, 0.54);
+      font-weight: normal;
+    }
+  }
+}
+
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index aa8d689a4..57d3bbbb7 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -180,7 +180,7 @@ export class AgendaPage implements OnInit {
 
       const scrollContainer = shadowRoot.querySelector('main');
 
-      scrollContainer.scrollTop = timelineMarker['offsetTop'] - (scrollContainer.offsetHeight/2);
+      scrollContainer.scrollTop = timelineMarker['offsetTop'] - ((scrollContainer.offsetHeight/2) - 60);
       
     }, timeout);
   }
diff --git a/src/global.scss b/src/global.scss
index 06f45634b..3632634e5 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -47,10 +47,10 @@ ion-slide{
     }
 }
 
-
 td.monthview-primary-with-event {
     background-color: white !important;
 }
+
 // current date
 td.monthview-current{
     border-bottom: 1px solid lightskyblue !important;
@@ -210,7 +210,16 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 .calendar-profile{
     font-size: 36px
 }
+
   
 /* angular-cli file: src/styles.css */
 @import "../node_modules/angular-calendar/css/angular-calendar.css";
 @import "./style/main.scss";
+
+
+// disable calendar build in header
+.calendar-component{
+    thead{
+      display: none;
+    }
+}
\ No newline at end of file