Improve calendar

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

@@ -272,7 +272,6 @@ label{
   
 }
 
-
 /* Timeline */
 
 .cal-hour-segment {

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

@@ -17,7 +17,6 @@ import {
   DAYS_OF_WEEK,
 } from 'angular-calendar';
 import { CustomDateFormatter } from './custom-date-formatter.provider';
-import { async } from '@angular/core/testing';
 
 @Component({
   selector: 'app-agenda',
@@ -210,15 +209,32 @@ export class AgendaPage implements OnInit {
       }
     });
   }
+
+  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string): string{
+    return `
+      <div class="timeline-box timeline-box-${calendarName}">
+        <div>
+          <span class="timeline-start-time">${startTime}</span><span class="timeline-location">${eventlocation}</span>
+        </div>
+        <div class="timeline-event-discription">
+          ${eventDiscription.Text}
+        </div>
+      </div>
+    `;
+  }
   
   loadRangeEvents(startTime: Date, endTime: Date){
-
+    this.showTimeline = false;
     this.showLoader = true;
+
     switch (this.segment)
     {
       case "Combinada":
         //Inicializa o array eventSource
         this.eventSource=[];
+        this.events=[];
+        
+        
         if(this.profile == "mdgpr"){
            this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
             response => {
@@ -234,14 +250,16 @@ export class AgendaPage implements OnInit {
                   event: element
                 });
 
-                let hours =  formatDate(new Date(element.EndDate), 'HH', 'pt');
+                const startHours =  formatDate(new Date(element.StartDate), 'HH:mm', 'pt');
+                const EndHours = formatDate(new Date(element.EndDate), 'HH:mm', 'pt');
 
                 this.events.push({
-                  title: element.Subject,
-                  start: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(hours)),
+                  title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName),
+                  start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
+                  end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
                   color: {
-                    primary: 'red',
-                    secondary: 'yellow'
+                    primary: 'white',
+                    secondary: 'white'
                   },
                 });
 

src/app/pages/agenda/custom-date-formatter.provider.ts

@@ -7,7 +7,7 @@ export class CustomDateFormatter extends CalendarDateFormatter {
   // you can override any of the methods defined in the parent class
 
   public dayViewHour({ date, locale }: DateFormatterParams): string {
-    return formatDate(date, 'HH:mm', locale);
+    return formatDate(date, 'HH', locale);
   }
 
   public weekViewHour({ date, locale }: DateFormatterParams): string {