Made lots of changes, deleted all components

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

@@ -3,9 +3,9 @@
     <ion-title>Agenda</ion-title>
   </ion-toolbar>
 </ion-header>
-
-<ion-content>
-  <ion-toolbar *ngIf="!ios">
+<!-- 
+<ion-content> -->
+  <!-- <ion-toolbar>
     <ion-segment [(ngModel)]="segment">
       <ion-segment-button value="combinada">
         Combinada
@@ -17,12 +17,87 @@
         Pessoal
       </ion-segment-button>
     </ion-segment>
-  </ion-toolbar>
+  </ion-toolbar> --> 
+  <ion-content>
+    <ion-toolbar>
+      <ion-segment [(ngModel)]="segment">
+        <ion-segment-button value="combinada">
+          Combinada
+        </ion-segment-button>
+        <ion-segment-button value="oficial">
+          Oficial
+        </ion-segment-button>
+        <ion-segment-button value="pessoal">
+          Pessoal
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+   
+    <!-- <ion-row>
+      <ion-col size="6">
+        <ion-button (click)="createRandomEvents()" expand="block" fill="outline">
+          Add random events
+        </ion-button>
+      </ion-col>
+      <ion-col size="6">
+        <ion-button (click)="removeEvents()" expand="block" fill="outline">
+          Remove all events
+        </ion-button>
+      </ion-col>
+    </ion-row> -->
+   
+    <ion-row>
+      <!-- Move back one screen of the slides -->
+      <ion-col size="2">
+        <ion-button fill="clear" (click)="back()">
+          <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
+        </ion-button>
+      </ion-col>
+      <!-- The title of the calendar in the middle -->
+      <ion-col size="8" class="ion-text-center">
+        <h2 class="capitaliseText">{{ viewTitle }}</h2>
+      </ion-col>
+   
+      <!-- Move forward one screen of the slides -->
+      <ion-col size="2">
+        <ion-button fill="clear" (click)="next()">
+          <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+   
+    <calendar
+      [eventSource]="eventSource"
+      [calendarMode]="calendar.mode"
+      [currentDate]="calendar.currentDate"
+      (onEventSelected)="onEventSelected($event)"
+      (onTitleChanged)="onViewTitleChanged($event)"
+      startHour="6"
+      endHour="20"
+      step="30"
+      startingDayMonth="1"
+      noEventsLabel="Sem Eventos"
+      allDayLabel="Todo o dia"
+      [monthviewDisplayEventTemplate]="template"
+    >
+    </calendar>
+
+    <!-- Adding a customized ng-template -->
+    <ng-template #template let-view="view" let-row="row" let-col="col">
+      <div [class.with-event]="view.dates[row*7+col].events.length">
+        {{view.dates[row*7+col].label}}
+        <div class="indicator-container">
+          <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
+        </div>
+      </div>
+    </ng-template>
 
 
-  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="create"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-</ion-content>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="add" (click)="openCalModal()"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+  
+  </ion-content>