Improve calendar

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

@@ -8,7 +8,7 @@
     <div>
       <!--  Calendar is here -->
       <div [ngSwitch]="segment">
-        <div *ngSwitchCase="'Combinada'">
+        <div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
 
           <ion-row class="ion-justify-content-between calendar-tool-tip">
             <ion-row class="ion-align-items-center">
@@ -85,7 +85,7 @@
             </div>
           </ng-template>
         </div>
-        <div *ngSwitchCase="'Pessoal'">
+        <div class="calendar-container" *ngSwitchCase="'Pessoal'">
           <ion-row>
             <!-- Move back one screen of the slides -->
             <ion-col size="2">
@@ -151,7 +151,7 @@
           </ng-template> 
     
         </div>
-        <div *ngSwitchCase="'Oficial'">
+        <div class="calendar-container" *ngSwitchCase="'Oficial'">
           <ion-row>
             <!-- Move back one screen of the slides -->
             <ion-col size="2">
@@ -218,13 +218,17 @@
         </div>
       </div>
 
+      <div class="calendar-border">
+        
+      </div>
+
+
       <!-- Calendar currente date -->
-      <ion-row class="ion-justify-content-between ion-align-items-center currente-date-timelien">
+      <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
         
         <ion-row class="timeline-date align-center">
-           <!-- <ion-icon *ngIf="showCalendar" (click)="showCalendar=false" class="collaps" src="assets/images/icons-add-new-event.svg" >1</ion-icon>
-          <ion-icon *ngIf="!showCalendar" (click)="showCalendar=true" class="collaps" src="assets/images/icons-add-new-event.svg" >2</ion-icon>  -->
-          
+          <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
+          <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='347px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
           <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
         </ion-row>
         <ion-row class="filter ion-align-items-center">

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

@@ -417,7 +417,7 @@ td.monthview-primary-with-event {
     font-weight: bold;
   }
   .collaps{
-    font-size: 28px;
+    font-size: 26px;
     padding-right: 8px;
   }
   .filter{
@@ -461,4 +461,23 @@ td.monthview-primary-with-event {
 
 .showcalendar{
   display: none;
+}
+
+.timeline-header{
+  z-index: 1000000;
+  position: absolute;
+  width: 100%;
+  background-color: white;
+}
+
+
+.timeline-container{
+  margin-top: 67px;
+}
+
+
+.calendar-border{
+  background: #ebebeb;
+  margin: 13px 20px;
+  height: 2px;
 }

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

@@ -53,6 +53,7 @@ export class AgendaPage implements OnInit {
 
   // calendar
   showCalendar: boolean;
+  calendarHeight: string;
 
   // timeline
   monthList = [
@@ -122,6 +123,7 @@ export class AgendaPage implements OnInit {
     private alertCrontroller: AlertService
     ) {
 
+      this.calendarHeight = "347px";
       this.showCalendar = true;
       this.timelineDate = momentG(new Date(),'dd MMMM yyyy');