Add calendar timeline

package-lock.json

@@ -3081,6 +3081,11 @@
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
       "dev": true
     },
+    "@types/date-fns": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-0.0.2.tgz",
+      "integrity": "sha1-px0uCyq1e7jegchD5ez24WF3m4w="
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -3531,6 +3536,34 @@
         }
       }
     },
+    "angular2-calendar": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/angular2-calendar/-/angular2-calendar-0.3.7.tgz",
+      "integrity": "sha1-1hrZoQWNbjdrpOWs5C3QDaoNVb4=",
+      "requires": {
+        "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.0",
+        "@types/date-fns": "0.0.2",
+        "calendar-utils": "0.0.35",
+        "date-fns": "^1.3.0"
+      },
+      "dependencies": {
+        "@ng-bootstrap/ng-bootstrap": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.1.2.tgz",
+          "integrity": "sha512-lPB4WdFk3s4k1OMKiZsmbxSE3r8qBFapov0HudEVi8HYkm6LBxZmWqy9I6KAC9NnhVUVIYnCixvRSNwOQvIwwA=="
+        },
+        "calendar-utils": {
+          "version": "0.0.35",
+          "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.0.35.tgz",
+          "integrity": "sha1-BqlQdhAFRFyH8YpotAMhZIkcV5s="
+        },
+        "date-fns": {
+          "version": "1.30.1",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+          "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+        }
+      }
+    },
     "ansi": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/ansi/-/ansi-0.3.1.tgz",

package.json

@@ -42,6 +42,7 @@
     "@ng-bootstrap/ng-bootstrap": "^9.0.1",
     "angular-calendar": "^0.28.22",
     "angular-tag-cloud-module": "^5.2.2",
+    "angular2-calendar": "^0.3.7",
     "cordova-ios": "6.1.0",
     "cordova-plugin-camera": "^5.0.1",
     "cordova-plugin-file": "^6.0.2",

src/app/app.module.ts

@@ -23,9 +23,11 @@ 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';
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 
 @NgModule({
@@ -36,7 +38,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     FormsModule,
     CalendarModule.forRoot({
       provide: DateAdapter,
-      useFactory: adapterFactory,
+      useFactory: adapterFactory
     }),
     IonicModule.forRoot(),
     IonicStorageModule.forRoot(),

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">
+<!--     <ion-segment [(ngModel)]="segment">
-      <!-- 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-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">
+  <div *ngIf="showTimeline">
-  </mwl-demo-utils-calendar-header>
+    <mwl-demo-utils-calendar-header class="timeline" 
-  
+      [(view)]="view" 
-  <div [ngSwitch]="view">
+      [(viewDate)]="viewDate"
-    <mwl-calendar-month-view
+      [dayStartHour]="9"
-      *ngSwitchCase="'month'"
+      [dayEndHour]="17">
-      [viewDate]="viewDate"
+    </mwl-demo-utils-calendar-header>
-      [events]="events"
+    
-    >
+    <div [ngSwitch]="view">
-    </mwl-calendar-month-view>
+      <mwl-calendar-month-view
-    <mwl-calendar-week-view
+        *ngSwitchCase="'month'"
-      *ngSwitchCase="'week'"
+        [viewDate]="viewDate"
-      [viewDate]="viewDate"
+        [events]="events"
-      [events]="events"
+      >
-    >
+      </mwl-calendar-month-view>
-    </mwl-calendar-week-view>
+      <mwl-calendar-week-view
-    <mwl-calendar-day-view
+        *ngSwitchCase="'week'"
-      *ngSwitchCase="'day'"
+        [viewDate]="viewDate"
-      [viewDate]="viewDate"
+        [events]="events"
-      [events]="events"
+      >
-    >
+      </mwl-calendar-week-view>
-    </mwl-calendar-day-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;
+
     } 
   }
 

src/global.scss

@@ -29,7 +29,7 @@
 td.monthview-current{
     color: white;
     /* border-radius: 89px; */
-    background: red !important;
+    background: lightskyblue  !important;
     justify-content: center;
     align-items: center;
     /* display: flex; */
@@ -56,5 +56,21 @@ td.monthview-selected {
 }  
 
 
+/* Timeline */
+
+.cal-hour-segment {
+    border-bottom: none !important;
+  }
+  
+  .cal-current-time-marker {
+    background-color: #42b9fe !important;
+  }
+.timeline .cal-event, .cal-event{
+    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;
+}
+
 /* angular-cli file: src/styles.css */
 @import "../node_modules/angular-calendar/css/angular-calendar.css";