-
-
-
-
-
-
+
+
\ No newline at end of file
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index ec326b397..159ed83ad 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/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 {
-}
\ No newline at end of file
+}
+
+
+/* Timeline */
+
+.cal-hour-segment {
+ border-bottom: none !important;
+}
+
+.cal-current-time-marker {
+ background-color: #42b9fe !important;
+}
+
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index 0f084f985..fe143dd21 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/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;
+
}
}
diff --git a/src/global.scss b/src/global.scss
index 81eb55ff2..a17797ad4 100644
--- a/src/global.scss
+++ b/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";
\ No newline at end of file