Add calendar timeline

src/app/pages/agenda/agenda.module.ts

@@ -16,12 +16,20 @@ import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/pt';
 import { CalendarComponent } from 'src/app/components/calendar/calendar.component';
 registerLocaleData(localeDe);
+
+
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     /* ComponentsModule, */
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     AgendaPageRoutingModule,
     NgCalendarModule,
     CalModalPageModule,

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

@@ -17,20 +17,7 @@
   <ion-toolbar class="bg-blue">
   <div class="main-content">
   <ion-toolbar>
-    <ion-buttons slot="end">
-      <!-- customized TOGGLE button -->
-      <div class="toggleBox">
-        <div (click)="changeProfile()" class="toggle">
-          <input type="checkbox">
-          <label for="" class="onbtn">PR</label>
-          <label for="" class="ofbtn">MDGPR</label>
-        </div> 
-      </div>
-    </ion-buttons>
-    <ion-title class="header-title">Agenda</ion-title>
-  </ion-toolbar>
-  <ion-toolbar>
-    <ion-segment [(ngModel)]="segment">
+<!--     <ion-segment [(ngModel)]="segment">
       <ion-segment-button value="Combinada">
         Combinada
       </ion-segment-button>
@@ -41,7 +28,7 @@
         Pessoal
       </ion-segment-button>
     </ion-segment>
-  
+   -->
   </ion-toolbar>
   </div>
   </ion-toolbar>
@@ -209,6 +196,7 @@
       </ng-template> 
 
     </div>
+
     <ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="openCalModal()">
       <ion-fab-button>
         <ion-icon name="add" ></ion-icon>
@@ -216,28 +204,35 @@
     </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 *ngIf="showTimeline">
+    <mwl-demo-utils-calendar-header class="timeline" 
+      [(view)]="view" 
+      [(viewDate)]="viewDate"
+      [dayStartHour]="9"
+      [dayEndHour]="17">
+    </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>
   </div>
+
   
 </ion-content>

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

@@ -41,6 +41,7 @@
   border-bottom: none;
   border-right: 3px solid #f05d5e;
   color: black;
+  margin: 0px auto;
   width: 35px;
 }
 
@@ -269,4 +270,16 @@ label{
 
 .segment {
   
-}
+}
+
+
+/* Timeline */
+
+.cal-hour-segment {
+  border-bottom: none !important;
+}
+
+.cal-current-time-marker {
+  background-color: #42b9fe !important;
+}
+

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

@@ -8,38 +8,69 @@ 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';
+// showTimeline
 import { setHours, setMinutes } from 'date-fns';
+import {
+  CalendarDateFormatter,
+  CalendarEvent,
+  CalendarView,
+  DAYS_OF_WEEK,
+} from 'angular-calendar';
+import { CustomDateFormatter } from './custom-date-formatter.provider';
+import { async } from '@angular/core/testing';
 
 @Component({
   selector: 'app-agenda',
   templateUrl: './agenda.page.html',
   styleUrls: ['./agenda.page.scss'],
+  providers: [
+    {
+      provide: CalendarDateFormatter,
+      useClass: CustomDateFormatter,
+    },
+  ],
 })
 export class AgendaPage implements OnInit {
 
+  title = 'my-dream-app';
+  
   view: CalendarView = CalendarView.Day;
 
   viewDate: Date = new Date();
 
+  weekStartsOn: number = DAYS_OF_WEEK.MONDAY;
+
+  weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];
+
+  CalendarView = CalendarView;
+
+  setView(view: CalendarView) {
+    this.view = view;
+  }
+
+  showTimeline: boolean= false;
+  
+
   events: CalendarEvent[] = [
-    {
-      title: 'No event end date',
+/*     {
+      title: '123',
       start: setHours(setMinutes(new Date(), 0), 3),
       color: {
         primary: 'red',
-        secondary: 'rellow'
+        secondary: 'yellow'
       },
     },
     {
-      title: 'No event end date',
+      title: '123123',
       start: setHours(setMinutes(new Date(), 0), 5),
       color: {
         primary: 'red',
-        secondary: 'rellow'
+        secondary: 'yellow'
       },
-    },
+    }, */
   ];
+  
+
 
   /* List of events of our calendar */
   eventSource = [];
@@ -84,7 +115,14 @@ export class AgendaPage implements OnInit {
     private eventService: EventsService,
     private router: Router,
     private alertCrontroller: AlertService
-    ) {}
+    ) {
+      setTimeout(()=>{
+        // console.log(JSON.stringify(this.events));
+        // console.log(this.events);
+      },5000)
+
+      // console.log(setHours(setMinutes(new Date(), 0), 12))
+    }
 
   ngOnInit() {
     this.profile = "mdgpr";
@@ -165,6 +203,7 @@ export class AgendaPage implements OnInit {
           allDay: false,
           event: postEvent
         });
+
         this.myCal.update();
         this.myCal.loadEvents();
         this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
@@ -172,7 +211,8 @@ export class AgendaPage implements OnInit {
     });
   }
   
-  async loadRangeEvents(startTime: Date, endTime: Date){
+  loadRangeEvents(startTime: Date, endTime: Date){
+
     this.showLoader = true;
     switch (this.segment)
     {
@@ -180,10 +220,12 @@ export class AgendaPage implements OnInit {
         //Inicializa o array eventSource
         this.eventSource=[];
         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(
+           this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
             response => {
               this.eventsList = response;
+              // loop
               this.eventsList.forEach(element => {
+
                 this.eventSource.push({
                   title: element.Subject,
                   startTime: new Date(element.StartDate),
@@ -191,11 +233,31 @@ export class AgendaPage implements OnInit {
                   allDay: false,
                   event: element
                 });
+
+                let hours =  formatDate(new Date(element.EndDate), 'HH', 'pt');
+
+                this.events.push({
+                  title: element.Subject,
+                  start: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(hours)),
+                  color: {
+                    primary: 'red',
+                    secondary: 'yellow'
+                  },
+                });
+
               });
+              
               this.myCal.update();
               this.myCal.loadEvents();
+
               this.showLoader = false;
+              this.showTimeline = true;
+             
             });
+
+
+            
+    
         }
         else{
           this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
@@ -293,6 +355,7 @@ export class AgendaPage implements OnInit {
           });
         }
         break;
+
     } 
   }