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',
@@ -211,14 +210,31 @@ export class AgendaPage implements OnInit {
     });
   }
 
-  loadRangeEvents(startTime: Date, endTime: Date){
+  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,
+                  title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName),
-                  start: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(hours)),
+                  start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
+                  end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
                   color: {
-                    primary: 'red',
+                    primary: 'white',
-                    secondary: 'yellow'
+                    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 {

src/global.scss

@@ -26,6 +26,9 @@
 @import "~@ionic/angular/css/flex-utils.css";
 
 
+
+
+// calendar
 td.monthview-current{
     color: white;
     /* border-radius: 89px; */
@@ -69,8 +72,58 @@ td.monthview-selected {
     background-color: white !important;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
     border: solid 1px #e9e9e9 !important;
-    border-left: 5px solid #ffb703 !important;
+    padding: 0px !important;
 }
 
+.cal-current-time-marker {
+    width: 100% !important;
+    margin-left: 0px !important;
+}
+
+.cal-current-time-marker::before{
+    width: 10px;
+    height: 10px;
+    background-color: #42b9fe !important;
+    content: ".";
+    color: transparent;
+    left: 55px;
+    position: absolute;
+    border-radius: 91px;
+    top: -2.5px;
+
+}
+
+.cal-time{
+    font-family: Roboto;
+    font-size: 13px;
+    color: #797979;
+}
+
+.timeline-box{
+    color: black;
+    .timeline-start-time, .timeline-location{
+        font-family: Roboto;
+        font-size: 13px;
+        margin-right: 10px;
+    }
+    .timeline-event-discription{
+        font-family: Roboto;
+        font-size: 15px;
+        font-weight: bold;
+    }
+}
+
+
+.timeline-box-Pessoal{
+    border-left: 5px solid #ffb703 !important;
+    height: 100%;
+}
+.timeline-box-Oficial{
+    border-left: 5px solid #f05d5e !important;
+    height: 100%;
+}
+
+
+.timeline-box-{}
 /* angular-cli file: src/styles.css */
 @import "../node_modules/angular-calendar/css/angular-calendar.css";