diff --git a/package.json b/package.json
index f2ebdfd22..d1b8fb488 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,9 @@
     "@angular/router": "~9.1.6",
     "@capacitor/android": "^2.4.0",
     "@capacitor/core": "2.4.0",
+    "@fullcalendar/angular": "^5.3.0",
+    "@fullcalendar/daygrid": "^5.3.0",
+    "@fullcalendar/interaction": "^5.3.0",
     "@ionic-native/core": "^5.0.7",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 6618a6530..5f114a479 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -2,6 +2,19 @@
   <ion-toolbar>
     <ion-title>Agenda</ion-title>
   </ion-toolbar>
+  <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-header>
 <!-- 
 <ion-content> -->
@@ -19,19 +32,14 @@
     </ion-segment>
   </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-refresher  name="refresher" slot="fixed" (ionRefresh)="refreshAgenda($event)">
+      <ion-refresher-content 
+      pullingIcon="chevron-down-circle-outline"
+      pullingText="deslize para actualizar"
+      refreshingSpinner="circles"
+      refreshingText="a actualizar...">
+      </ion-refresher-content>
+    </ion-refresher>
    
     <ion-row>
       <!-- <ion-col size="6">
@@ -77,6 +85,8 @@
       [currentDate]="calendar.currentDate"
       (onEventSelected)="onEventSelected($event)"
       (onTitleChanged)="onViewTitleChanged($event)"
+      (onRangeChanged)="onRangeChanged($event)"
+      queryMode="remote"
       startHour="6"
       endHour="20"
       step="30"
@@ -97,8 +107,6 @@
       </div>
     </ng-template>
 
-
-
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>
         <ion-icon name="add" (click)="openCalModal()"></ion-icon>
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index 37e56967d..d327d683a 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -4,9 +4,10 @@ import { AlertController, ModalController } from '@ionic/angular';
 import { formatDate } from '@angular/common';
 import { CalModalPage } from '../cal-modal/cal-modal.page';
 import { EventsService } from 'src/app/services/events.service';
-import { Observable } from 'rxjs';
+import { Observable, ObjectUnsubscribedError } from 'rxjs';
 import { Event } from '../../models/event.model';
 import { parse } from 'date-fns';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-agenda',
@@ -15,16 +16,6 @@ import { parse } from 'date-fns';
 })
 export class AgendaPage implements OnInit {
 
- event = {
-    title: 'Teste',
-    desc: 'Desc',
-    startTime: '2020,21,08',
-    endTime: '2020,22,08',
-    allDay: false
-  };
-
-  /*  minDate = new Date().toDateString(); */
-
   /* List of events of our calendar */
   eventSource = [];
   /* The title of the calendar */
@@ -42,31 +33,24 @@ export class AgendaPage implements OnInit {
 
   segment:string;
   eventsList: Event[];
+  responseEventId:string = '';
+
+  loadedEvent: Event;
+  eventItem: Observable<Event>;
 
   constructor( 
     private alertCtrl: AlertController,
     @Inject(LOCALE_ID) private locale: string,
     private modalCtrl: ModalController,
-    private eventService: EventsService
+    private eventService: EventsService,
+    private router: Router
     ) {}
 
   ngOnInit() {
     //Inicializar segment
     this.segment = "combinada";
-    this.createdEvent();
-    /* this.resetEvent(); */
   }
 
- /*  resetEvent(){
-    this.event = {
-      title: '',
-      desc: '',
-      startTime: new Date().toDateString(),
-      endTime: new Date().toDateString(),
-      allDay: false
-
-    };
-  } */
   //Go to the next view of the calendar month/week/day
   next(){
     this.myCal.slideNext();
@@ -80,172 +64,54 @@ export class AgendaPage implements OnInit {
     this.viewTitle = title;
   }
   //Show information of the event
-  async onEventSelected(event){
-    //Using Angular date pipe for conversion
-    let start = formatDate(event.startTime, 'medium', this.locale);
-    let end = formatDate(event.endTime, 'medium', this.locale);
-
-    const alert = await this.alertCtrl.create({
-      header: event.title,
-      subHeader: event.desc,
-      message: 'From' + start + '<br><br>To:' + end,
-      buttons: ['OK'],
-     });
-     alert.present();
+  async onEventSelected(ev: { event: Event}){
+    console.log(ev.event.EventId);
+    this.router.navigate(["/home/events", ev.event.EventId]);
   }
 
-  createRandomEvents(){
-    var events = [];
-    for(var i = 0; i < 50; i += 1 ){
-      var date = new Date();
-      var eventType = Math.floor(Math.random() * 2);
-      var startDay = Math.floor(Math.random() * 90) - 45;
-      var endDay = Math.floor(Math.random() * 2) + startDay;
-      var startTime;
-      var endTime;
-      if(eventType === 0){
-        startTime = new Date(
-          Date.UTC(
-            date.getUTCFullYear(),
-            date.getUTCMonth(),
-            date.getUTCDate() + startDay
-          )
-        );
-        if(endDay === startDay){
-          endDay += 1;
-        }
-        endTime = new Date(
-          Date.UTC(
-            date.getUTCFullYear(),
-            date.getUTCMonth(),
-            date.getUTCDate() + endDay
-          )
-        );
-        events.push({
-          title: 'Todo o dia - ' + i,
-          startTime: startTime,
-          endTime: endTime,
-          allDay: true,
-        });
-      } else {
-        var startMinute = Math.floor(Math.random() * 24 * 60);
-        var endMinute = Math.floor(Math.random()* 180) + startMinute;
-        startTime = new Date(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + endDay,
-          0,
-          date.getMinutes() + startMinute
-        );
-        endTime = new Date(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + endDay,
-          0,
-          date.getMinutes() + endMinute
-        );
-        events.push({
-          title: 'Evento - ' + i,
-          startTime: startTime,
-          endTime: endTime,
-          allDay: false
-        });
-      }
-    }
-    /* Here you might get your events from the API */
-    this.eventSource = events;
-  }
-  removeEvents(){
-    this.eventSource = [];
-  }
-  onTimeSelected(ev){
-    
-  }
+  onRangeChanged (ev: { startTime: Date, endTime: Date }) {
+    this.loadRangeEvents(ev.startTime, ev.endTime);
+  };
+
   async openCalModal() {
     const modal = await this.modalCtrl.create({
       component: CalModalPage,
       cssClass: 'cal-modal',
       backdropDismiss: false
     });
-  
     await modal.present();
-  
-    modal.onDidDismiss().then((result) => {
-      if (result.data && result.data.event) {
-        let event = result.data.event;
-        if (event.allDay) {
-          let start = event.startTime;
-          event.startTime = new Date(
-            Date.UTC(
-              start.getUTCFullYear(),
-              start.getUTCMonth(),
-              start.getUTCDate()
-            )
-          );
-          event.endTime = new Date(
-            Date.UTC(
-              start.getUTCFullYear(),
-              start.getUTCMonth(),
-              start.getUTCDate() + 1
-            )
-          );
-        }
-        /* Here you save the data entered */
-        this.eventSource.push(result.data.event);
-        /* Here you load the data saved */
-        this.myCal.loadEvents();
-      }
-    });
+    modal.onDidDismiss();
+    this.loading();
   }
 
-
-
-  async createdEvent(){
-    var s = '01-01-1970 00:03:44';
-    var d = new Date(s);
-    console.log(d);
-
-    const defaultStartDate = new Date();
-    const test = parse('Fri Aug 21 2020 14:20:06 GMT+0100 (West Africa Standard Time)', 'd/M/yyyy HH:mm:ss', new Date());
-    console.log(test);
-    const defaultEndDate = new Date();
-
-    await this.eventService.getAllEvents("2020-01-01","2020-12-31").subscribe(
+  async loadRangeEvents(startTime: Date, endTime: Date){
+    this.eventService.getAllEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
       response => {
         this.eventsList = response;
-
-        console.log(this.eventsList[0].EventId);
-        
-        for(let i=0; i<this.eventsList.length; i++){
-          console.log(this.eventsList[i].EndDate);
-
-          /* 2020-08-14 23:59:59 */
-
-          let eventCopy = {
-            title: this.eventsList[i].Subject,
-            desc: 'Desc',
-            startTime: new Date(), /* this.eventsList[i].StartDate, */
-            endTime:new Date(), /* this.eventsList[i].EndDate, */
-            allDay: false
-          }
-          this.eventSource.push(eventCopy);
-          this.myCal.loadEvents();
-          console.log(eventCopy.startTime);
-          console.log(eventCopy.endTime);
-        }
+        this.eventsList.forEach(element => {
+          this.eventSource.push({
+            title: element.Subject,
+            startTime: new Date(element.StartDate),
+            endTime: new Date(element.EndDate),
+            allDay: false,
+            event: element
+          });
+          this.loading();
+        });
       }
     );
-
-    /* console.log(this.eventsList[0].Subject);
-    console.log(this.eventsList[0].StartDate);
-    console.log('Size'+this.eventsList.length); */
-
-    
-
-    
-    /* this.myCal.loadEvents(); */
   }
 
+  loading(){
+    this.myCal.loadEvents();
+  }
 
+  refreshAgenda(event){
+    this.loading();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
 
 }
diff --git a/src/app/pages/events/event-detail/event-detail.page.ts b/src/app/pages/events/event-detail/event-detail.page.ts
index 3e631aa85..58863febf 100644
--- a/src/app/pages/events/event-detail/event-detail.page.ts
+++ b/src/app/pages/events/event-detail/event-detail.page.ts
@@ -36,6 +36,8 @@ export class EventDetailPage implements OnInit {
       /* this.loadedEvent = this.eventsService.getEvent(eventId); */
       this.eventItem = this.eventsService.getEvent(eventId);
 
+      /* console.log(this.eventItem); */
+
       this.eventsService.getEvent(eventId).subscribe(response => 
         {
           this.loadedEvent = response;