Add customization and calendar Pr vision

src/app/pages/agenda/agenda.page.html

@@ -20,14 +20,14 @@
 
               <!-- Move forward one screen of the slides -->
               <h2 class="capitaliseText">{{ viewTitle }}</h2>
-              <div class="drop-down">
+<!--               <div class="drop-down">
                 <ion-icon  slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
                 <div class="drop-down-container">
                   <ul>
                     <li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
                   </ul>
                 </div>
-              </div>
+              </div> -->
               <!-- Move forward one screen of the slides -->
               <div (click)="next()" class="arrow">
                 <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
@@ -35,7 +35,7 @@
 
             </ion-row>
             <ion-row class="ion-align-items-center">
-              <ion-icon class="right-icons" name="add-circle-outline"></ion-icon>
+              <ion-icon class="right-icons" (click)="changeProfile()" name="add-circle-outline"></ion-icon>
               <ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
               <ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" (click)="openCalModal()" ></ion-icon>
             </ion-row> 
@@ -174,6 +174,17 @@
     
         </div>
       </div>
+
+      <!-- Calendar currente date -->
+      <ion-row class="ion-justify-content-between ion-align-items-center currente-date-timelien">
+        <ion-row class="timeline-date">
+          <span *ngIf="timelineIsCurrentDate()">Hoje, </span> {{ timelineDate }}
+        </ion-row>
+    <!--     <ion-row class="filter ion-align-items-center">
+          <div class="filter-name">Todos</div>
+          <ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+        </ion-row> -->
+      </ion-row>
     </div>
   </div>
 </div>
@@ -187,18 +198,6 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <!-- Calendar currente date -->
-
-  <ion-row class="ion-justify-content-between ion-align-items-center currente-date-timelien">
-    <ion-row class="timeline-date">
-      Hoje, {{ timelineDate }}
-    </ion-row>
-    <ion-row class="filter ion-align-items-center">
-      <div class="filter-name">Todos</div>
-      <ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-    </ion-row>
-  </ion-row>
-
   <!-- Timeline -->
   <div *ngIf="showTimeline">
     <mwl-demo-utils-calendar-header class="timeline" 

src/app/pages/agenda/agenda.page.scss

@@ -389,19 +389,27 @@ label{
 
 
 .capitaliseText{
-  min-width: 159px;
+  min-width: 155px;
   text-align: center;
+  font-weight: normal;
+  padding: 0px;
+  margin: 0px;
 }
 
 .arrow{
-  padding: 0px 6px;
+  padding: 0px 0px;
 }
 
 .right-icons{
-  padding: 0px 4px;
+  padding: 0px 9px
 }
 
 
 .capitaliseText{
   font-size: 20px;
+}
+
+
+.calendar-tool-tip{
+  padding: 17px 10px 0px 10px;
 }

src/app/pages/agenda/agenda.page.ts

@@ -97,7 +97,7 @@ export class AgendaPage implements OnInit {
   };
 
   selectedDate: Date;
-  eventSelectedDate: Date;
+  eventSelectedDate: Date = new Date();
   eventSelectedDate2: Date;
   rangeStartDate: Date;
   rangeEndDate: Date;
@@ -172,6 +172,9 @@ export class AgendaPage implements OnInit {
   }
 
 
+  timelineIsCurrentDate(): Boolean {
+    return formatDate(new Date(),'dd MMMM yyyy', 'pt') == formatDate(this.eventSelectedDate,'dd MMMM yyyy', 'pt');
+  }
 
   //Go to the next view of the calendar month/week/day
   next(){

src/global.scss

@@ -40,6 +40,7 @@ td.monthview-current{
     /* display: flex; */
     height: 100%;
     div {
+        padding-left: 7px;
         border-radius: 28px;
         display: flex;
         justify-content: center;
@@ -67,6 +68,7 @@ td.monthview-selected {
 }
 
 .calendar-event-type
+
 /* Timeline */
 
 .cal-hour-segment {