diff --git a/package-lock.json b/package-lock.json
index 79e26565e..7c40c06d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -413,6 +413,21 @@
         }
       }
     },
+    "@angular/animations": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.1.0.tgz",
+      "integrity": "sha512-VgpknW33WJiqnNtQwNVWrpiSxkgoChIZLpYLlijSTvFwZOHiraFKApohaW8X61mwL0HuK1RB7Z36B+Q11cw3aw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "@angular/cli": {
       "version": "9.1.12",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.12.tgz",
@@ -2905,6 +2920,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "@mattlewis92/dom-autoscroller": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@mattlewis92/dom-autoscroller/-/dom-autoscroller-2.4.2.tgz",
+      "integrity": "sha512-YbrUWREPGEjE/FU6foXcAT1YbVwqD/jkYnY1dFb0o4AxtP3s4xKBthlELjndZih8uwsDWgQZx1eNskRNe2BgZQ=="
+    },
     "@netflix/nerror": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@netflix/nerror/-/nerror-1.1.3.tgz",
@@ -2922,6 +2942,21 @@
         }
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-9.0.1.tgz",
+      "integrity": "sha512-dJFoK2mRsj/zL87PNv9frBD+72MkrMeFshXE26FKPf8P8JNFoL6zrcNLxlBouQ1rWBItH50BmlEqQOwyXazF7w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "@ngtools/webpack": {
       "version": "9.1.12",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.12.tgz",
@@ -2985,6 +3020,11 @@
         }
       }
     },
+    "@scarf/scarf": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz",
+      "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg=="
+    },
     "@schematics/angular": {
       "version": "9.1.12",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.12.tgz",
@@ -3433,6 +3473,43 @@
         "semver": "^5.4.1"
       }
     },
+    "angular-calendar": {
+      "version": "0.28.22",
+      "resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.28.22.tgz",
+      "integrity": "sha512-jcLszdvSI6+iSYEIqyQjPK5kgGAXaMoGKKGyDpmjy0nRIdaBGMzoveKr/OyiSx1B1oyxRVjj4Ig60n1/BzXmpw==",
+      "requires": {
+        "@scarf/scarf": "^1.1.0",
+        "angular-draggable-droppable": "^4.5.5",
+        "angular-resizable-element": "^3.3.3",
+        "calendar-utils": "^0.8.3",
+        "positioning": "^2.0.1",
+        "tslib": "^1.14.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "angular-draggable-droppable": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-4.6.0.tgz",
+      "integrity": "sha512-+8JhTDMKkc/NuFFqb8/H/QHpB+v4Z7YNrgvEbV+PQxXry19rkr89ofZgjNIXhZexTvJNb03BYlSQoknzXE9b3g==",
+      "requires": {
+        "@mattlewis92/dom-autoscroller": "^2.4.2",
+        "tslib": "^1.9.0"
+      }
+    },
+    "angular-resizable-element": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.3.4.tgz",
+      "integrity": "sha512-jA3j8qcWXKR+rdXxerAjpKhUsoUlEBQP3CmutHcHRAKTkQjZTd1LcZOZOnfIdOToyXsIKXYscbHpbPoCeew2Yw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "angular-swipe": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/angular-swipe/-/angular-swipe-0.4.0.tgz",
@@ -4351,6 +4428,11 @@
         "unset-value": "^1.0.0"
       }
     },
+    "calendar-utils": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.8.4.tgz",
+      "integrity": "sha512-0btakIxxHrCMX/7L6jayixKG9OnGIbqAh5oHe0Me2LYAS7zdEUoRxndyN4N04yVyZURgx1iNXj4l5m51/sDShg=="
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -5899,9 +5981,9 @@
       }
     },
     "date-fns": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.15.0.tgz",
-      "integrity": "sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ=="
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
     },
     "date-format": {
       "version": "3.0.0",
@@ -11090,6 +11172,11 @@
         }
       }
     },
+    "positioning": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/positioning/-/positioning-2.0.1.tgz",
+      "integrity": "sha512-DsAgM42kV/ObuwlRpAzDTjH9E8fGKkMDJHWFX+kfNXSxh7UCCQxEmdjv/Ws5Ft1XDnt3JT8fIDYeKNSE2TbttA=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
diff --git a/package.json b/package.json
index bc51da979..758c6a5d2 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^11.1.0",
     "@angular/common": "~9.1.6",
     "@angular/core": "~9.1.6",
     "@angular/forms": "~9.1.6",
@@ -38,6 +39,8 @@
     "@ionic/pwa-elements": "^3.0.1",
     "@ionic/storage": "^2.3.1",
     "@logisticinfotech/ionic4-datepicker": "^1.4.4",
+    "@ng-bootstrap/ng-bootstrap": "^9.0.1",
+    "angular-calendar": "^0.28.22",
     "angular-tag-cloud-module": "^5.2.2",
     "cordova-ios": "6.1.0",
     "cordova-plugin-camera": "^5.0.1",
@@ -45,7 +48,7 @@
     "cordova-plugin-filepath": "^1.5.8",
     "cordova-res": "^0.15.1",
     "cordova-sqlite-storage": "^5.1.0",
-    "date-fns": "^2.15.0",
+    "date-fns": "^2.16.1",
     "ionic-selectable": "^4.5.0",
     "ionic2-alpha-scroll": "^2.0.1",
     "ionic2-calendar": "^0.6.6",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bc8c8e056..ae36ea933 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,11 +19,25 @@ import { FilePath } from '@ionic-native/file-path/ngx';
 import { Camera } from '@ionic-native/camera/ngx';
 import { IonicStorageModule } from '@ionic/storage';
 import { PipesModule } from './pipes/pipes.module';
+//
+
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+
+
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [BrowserModule, 
+    CommonModule,
+    FormsModule,
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory,
+    }),
     IonicModule.forRoot(),
     IonicStorageModule.forRoot(),
     AppRoutingModule, 
diff --git a/src/app/pages/agenda/agenda.module.ts b/src/app/pages/agenda/agenda.module.ts
index 34b6cecdb..9f6143688 100644
--- a/src/app/pages/agenda/agenda.module.ts
+++ b/src/app/pages/agenda/agenda.module.ts
@@ -16,7 +16,6 @@ import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/pt';
 import { CalendarComponent } from 'src/app/components/calendar/calendar.component';
 registerLocaleData(localeDe);
-
 @NgModule({
   imports: [
     CommonModule,
diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 39b78f4a1..c87f390be 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -46,173 +46,198 @@
   </div>
   </ion-toolbar>
 </ion-header>
-  <ion-content>
+<ion-content>
 
-   <!--  Calendar is here -->
+  <!--  Calendar is here -->
 
-    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-      <ion-refresher-content>
-      </ion-refresher-content>
-    </ion-refresher>
-    <div [ngSwitch]="segment">
-      <div *ngSwitchCase="'Combinada'">
-        <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)"
-          (onRangeChanged)="onRangeChanged($event)"
-          (onCurrentDateChanged)="onCurrentChanged($event)"
-          queryMode="remote"
-          startHour="6"
-          endHour="20"
-          step="30"
-          startingDayMonth="1"
-          noEventsLabel="Sem Eventos"
-          allDayLabel="Todo o dia"
-          [monthviewDisplayEventTemplate]="template"
-        >
-        </calendar>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+    <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+  <div [ngSwitch]="segment">
+    <div *ngSwitchCase="'Combinada'">
+      <ion-row>
+        <!-- Move back one screen of the slides -->
+        <ion-col size="2">
+          <ion-button fill="clear" (click)="back()">
+            <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></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  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
+          </ion-button>
+        </ion-col>
+      </ion-row>
+    
+      <calendar
+        [eventSource]="eventSource"
+        [calendarMode]="calendar.mode"
+        [currentDate]="calendar.currentDate"
+        (onEventSelected)="onEventSelected($event)"
+        (onTitleChanged)="onViewTitleChanged($event)"
+        (onRangeChanged)="onRangeChanged($event)"
+        (onCurrentDateChanged)="onCurrentChanged($event)"
+        queryMode="remote"
+        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>
+      <!-- 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>
-        </ng-template>
-      </div>
-      <div *ngSwitchCase="'Pessoal'">
-        <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)"
-          (onRangeChanged)="onRangeChanged($event)"
-          (onCurrentDateChanged)="onCurrentChanged($event)"
-          queryMode="remote"
-          startHour="6"
-          endHour="20"
-          step="30"
-          startingDayMonth="1"
-          noEventsLabel="Sem Eventos"
-          allDayLabel="Todo o dia"
-          [monthviewDisplayEventTemplate]="template"
-        >
-        </calendar>
-        <!-- (onTimeSelected)="onTimeSelected($event)" -->
-
-        <!-- 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> 
-
-      </div>
-      <div *ngSwitchCase="'Oficial'">
-        <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)"
-          (onRangeChanged)="onRangeChanged($event)"
-          (onCurrentDateChanged)="onCurrentChanged($event)"
-          queryMode="remote"
-          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> 
-
-      </div>
-      <ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="openCalModal()">
-        <ion-fab-button>
-          <ion-icon name="add" ></ion-icon>
-        </ion-fab-button>
-      </ion-fab>
+        </div>
+      </ng-template>
     </div>
-  </ion-content>
\ No newline at end of file
+    <div *ngSwitchCase="'Pessoal'">
+      <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)"
+        (onRangeChanged)="onRangeChanged($event)"
+        (onCurrentDateChanged)="onCurrentChanged($event)"
+        queryMode="remote"
+        startHour="6"
+        endHour="20"
+        step="30"
+        startingDayMonth="1"
+        noEventsLabel="Sem Eventos"
+        allDayLabel="Todo o dia"
+        [monthviewDisplayEventTemplate]="template"
+      >
+      </calendar>
+      <!-- (onTimeSelected)="onTimeSelected($event)" -->
+
+      <!-- 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> 
+
+    </div>
+    <div *ngSwitchCase="'Oficial'">
+      <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)"
+        (onRangeChanged)="onRangeChanged($event)"
+        (onCurrentDateChanged)="onCurrentChanged($event)"
+        queryMode="remote"
+        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> 
+
+    </div>
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="openCalModal()">
+      <ion-fab-button>
+        <ion-icon name="add" ></ion-icon>
+      </ion-fab-button>
+    </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>
+  
+</ion-content>
\ No newline at end of file
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index 3219fd374..ec326b397 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -15,7 +15,10 @@
   .monthview-primary-with-event {
     background-color: white !important;
   }
- 
+  
+  .monthview-current{
+    background-color: red;
+  }
   .monthview-selected {
     background-color: lightskyblue !important;
   }
@@ -264,3 +267,6 @@ label{
   color: #000 !important;
 }
 
+.segment {
+  
+}
\ No newline at end of file
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index 8da456b1e..0f084f985 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -8,6 +8,9 @@ import { Event } from '../../models/event.model';
 import { Router, NavigationEnd } from '@angular/router';
 import { AlertService } from 'src/app/services/alert.service';
 
+import { CalendarEvent, CalendarView } from 'angular-calendar';
+import { setHours, setMinutes } from 'date-fns';
+
 @Component({
   selector: 'app-agenda',
   templateUrl: './agenda.page.html',
@@ -15,6 +18,29 @@ import { AlertService } from 'src/app/services/alert.service';
 })
 export class AgendaPage implements OnInit {
 
+  view: CalendarView = CalendarView.Day;
+
+  viewDate: Date = new Date();
+
+  events: CalendarEvent[] = [
+    {
+      title: 'No event end date',
+      start: setHours(setMinutes(new Date(), 0), 3),
+      color: {
+        primary: 'red',
+        secondary: 'rellow'
+      },
+    },
+    {
+      title: 'No event end date',
+      start: setHours(setMinutes(new Date(), 0), 5),
+      color: {
+        primary: 'red',
+        secondary: 'rellow'
+      },
+    },
+  ];
+
   /* List of events of our calendar */
   eventSource = [];
   /* The title of the calendar */
@@ -213,7 +239,7 @@ export class AgendaPage implements OnInit {
         }
         else{
           this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
-            this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");;
+            this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
             this.eventsListPessoal.forEach(element => {
               this.eventSource.push({
                 title: element.Subject,
diff --git a/src/assets/icons-calendar-arrow-down.svg b/src/assets/images/icons-calendar-arrow-down.svg
similarity index 100%
rename from src/assets/icons-calendar-arrow-down.svg
rename to src/assets/images/icons-calendar-arrow-down.svg
diff --git a/src/assets/icons-calendar-arrow-left.svg b/src/assets/images/icons-calendar-arrow-left.svg
similarity index 100%
rename from src/assets/icons-calendar-arrow-left.svg
rename to src/assets/images/icons-calendar-arrow-left.svg
diff --git a/src/assets/icons-calendar-arrow-right.svg b/src/assets/images/icons-calendar-arrow-right.svg
similarity index 100%
rename from src/assets/icons-calendar-arrow-right.svg
rename to src/assets/images/icons-calendar-arrow-right.svg
diff --git a/src/global.scss b/src/global.scss
index f9585dfa4..81eb55ff2 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -29,7 +29,7 @@
 td.monthview-current{
     color: white;
     /* border-radius: 89px; */
-    background: white !important;
+    background: red !important;
     justify-content: center;
     align-items: center;
     /* display: flex; */
@@ -46,6 +46,15 @@ td.monthview-current{
     }
 }
 
-.monthview-selected {
+.monthview-secondary-with-event, .monthview-secondary-with-event[_ngcontent-dwf-c153]  {
+    background-color: white !important;
+}
 
-}  
\ No newline at end of file
+td.monthview-selected {
+    background-color: #42b9fe30 !important;
+    color: black !important;
+}  
+
+
+/* angular-cli file: src/styles.css */
+@import "../node_modules/angular-calendar/css/angular-calendar.css";
\ No newline at end of file