Add calendar timeline

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

@@ -17,20 +17,7 @@
   <ion-toolbar class="bg-blue">
   <div class="main-content">
   <ion-toolbar>
-    <ion-buttons slot="end">
-      <!-- customized TOGGLE button -->
-      <div class="toggleBox">
-        <div (click)="changeProfile()" class="toggle">
-          <input type="checkbox">
-          <label for="" class="onbtn">PR</label>
-          <label for="" class="ofbtn">MDGPR</label>
-        </div> 
-      </div>
-    </ion-buttons>
-    <ion-title class="header-title">Agenda</ion-title>
-  </ion-toolbar>
-  <ion-toolbar>
-    <ion-segment [(ngModel)]="segment">
+<!--     <ion-segment [(ngModel)]="segment">
       <ion-segment-button value="Combinada">
         Combinada
       </ion-segment-button>
@@ -41,7 +28,7 @@
         Pessoal
       </ion-segment-button>
     </ion-segment>
-  
+   -->
   </ion-toolbar>
   </div>
   </ion-toolbar>
@@ -209,6 +196,7 @@
       </ng-template> 
 
     </div>
+
     <ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="openCalModal()">
       <ion-fab-button>
         <ion-icon name="add" ></ion-icon>
@@ -216,28 +204,35 @@
     </ion-fab>
   </div>
 
-  <mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate">
-  </mwl-demo-utils-calendar-header>
-  
-  <div [ngSwitch]="view">
-    <mwl-calendar-month-view
-      *ngSwitchCase="'month'"
-      [viewDate]="viewDate"
-      [events]="events"
-    >
-    </mwl-calendar-month-view>
-    <mwl-calendar-week-view
-      *ngSwitchCase="'week'"
-      [viewDate]="viewDate"
-      [events]="events"
-    >
-    </mwl-calendar-week-view>
-    <mwl-calendar-day-view
-      *ngSwitchCase="'day'"
-      [viewDate]="viewDate"
-      [events]="events"
-    >
-    </mwl-calendar-day-view>
+  <div *ngIf="showTimeline">
+    <mwl-demo-utils-calendar-header class="timeline" 
+      [(view)]="view" 
+      [(viewDate)]="viewDate"
+      [dayStartHour]="9"
+      [dayEndHour]="17">
+    </mwl-demo-utils-calendar-header>
+    
+    <div [ngSwitch]="view">
+      <mwl-calendar-month-view
+        *ngSwitchCase="'month'"
+        [viewDate]="viewDate"
+        [events]="events"
+      >
+      </mwl-calendar-month-view>
+      <mwl-calendar-week-view
+        *ngSwitchCase="'week'"
+        [viewDate]="viewDate"
+        [events]="events"
+      >
+      </mwl-calendar-week-view>
+      <mwl-calendar-day-view
+        *ngSwitchCase="'day'"
+        [viewDate]="viewDate"
+        [events]="events"
+      >
+      </mwl-calendar-day-view>
+    </div>
   </div>
+
   
 </ion-content>