offset events for the start/end time

gctools-outilsgc · Dec 4, 2023 · a451b87 · a451b87
1 parent 5a3ed4f
commit a451b87
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/src/app/shared/components/calendar/calendar.component.ts b/src/app/shared/components/calendar/calendar.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit, SimpleChanges } from '@angular/core';
-import { endOfDay, subDays, addDays, addWeeks, addMonths, endOfMonth, getDaysInMonth, startOfWeek, startOfMonth, differenceInCalendarDays, differenceInCalendarWeeks, differenceInCalendarMonths, isWithinInterval } from 'date-fns';
+import { addHours, subHours, endOfDay, subDays, addDays, addWeeks, addMonths, endOfMonth, getDaysInMonth, startOfWeek, startOfMonth, differenceInCalendarDays, differenceInCalendarWeeks, differenceInCalendarMonths, isWithinInterval, isSameDay, startOfDay } from 'date-fns';
 import { CalendarView } from './interfaces/calendar-view.interface';
 import { ICalendarEvent } from './interfaces/calendar-event.interface';
 import { ICalendarDay } from './interfaces/calendar-day.interface';
@@ -32,8 +32,8 @@ export class CalendarComponent implements OnInit {
   dummyDay: ICalendarDay = { date: new Date(), events: [] };
 
   constructor() {
-    this.events.push({ title: 'Shawarma Grand Tour', startDate: new Date(), endDate: addDays(new Date(), 3) });
-    this.events.push({ title: 'Chili Cook Off', startDate: new Date(), endDate: addDays(new Date(), 3) });
+    this.events.push({ title: 'Shawarma Grand Tour', startDate: new Date(), endDate: addHours(addDays(new Date(), 3), 3) });
+    this.events.push({ title: 'Chili Cook Off', startDate: addHours(new Date(), 3), endDate: subHours(addDays(new Date(), 3), 3) });
     this.events.push({ title: 'Car Show', startDate: addDays(new Date(), 1), endDate: addDays(new Date(), 2) });
     this.events.push({ title: 'Doc Appointment', startDate: addDays(new Date(), 1), endDate: addDays(new Date(), 2) });
     this.events.push({ title: 'Lunch w/ Friends', startDate: addDays(new Date(), 11), endDate: addDays(new Date(), 12) });
@@ -114,23 +114,22 @@ export class CalendarComponent implements OnInit {
     var i = this.events.length;
     while (i--) {
       allDays.forEach(day => {
-        if (isWithinInterval(endOfDay(day.date), {start: this.events[i].startDate, end: this.events[i].endDate})) { 
+        if (isWithinInterval(endOfDay(day.date), {start: this.events[i].startDate, end: this.events[i].endDate}) || 
+            isWithinInterval(startOfDay(day.date), {start: this.events[i].startDate, end: this.events[i].endDate})) { 
           day.events.push(this.events[i]);
         } 
       });
     }
   }
 
   toggleView(): void {
+    // TODO: Add back in the Day view.
     if (this.view == CalendarView.Month) {
-      this.view = CalendarView.Day
+      this.view = CalendarView.Week
     }
     else if (this.view == CalendarView.Week) {
       this.view = CalendarView.Month;
     }
-    else {
-      this.view = CalendarView.Week;
-    }
     this.buildView();
   }
 

diff --git a/src/app/shared/components/calendar/components/calendar-day/calendar-day.component.html b/src/app/shared/components/calendar/components/calendar-day/calendar-day.component.html
@@ -11,7 +11,11 @@
         <div *ngFor="let event of calendarDay.events; index as i" tabindex="0"
              class="event"
              [matTooltip]="event.title"
-             [ngStyle]="{'height': 'calc((100% / ' + numberOfEvents + ') - ' + (numberOfEvents > 1 ? numberOfEvents - 1 : 0) + 'px)', 'background-color': eventColor(i)}">
+             [ngStyle]="{
+                'height': 'calc((100% / ' + numberOfEvents + ') - ' + (numberOfEvents > 1 ? numberOfEvents - 1 : 0) + 'px)', 
+                'margin-left': 'calc(100% - ' + percentageOfDayLeft(event.startDate, calendarDay.date) + '%)',
+                'margin-right': 'calc(100% - ' + percentageOfDayLeft(event.endDate, calendarDay.date) + '%)',
+                'background-color': eventColor(i)}">
             &nbsp;
         </div>
     </div>

diff --git a/src/app/shared/components/calendar/components/calendar-day/calendar-day.component.ts b/src/app/shared/components/calendar/components/calendar-day/calendar-day.component.ts
@@ -61,6 +61,15 @@ export class CalendarDayComponent implements OnInit {
     return this.colors[index % this.colors.length];
   }
 
+  percentageOfDayLeft(date: Date, dateToCompare: Date): number {
+    if (isSameDay(date, dateToCompare)) {
+      const totalMillisecondsInDay = 24 * 60 * 60 * 1000;
+      const millisecondsPassed = date.getTime() % totalMillisecondsInDay;
+      return (1 - millisecondsPassed / totalMillisecondsInDay) * 100;
+    }
+    return 100;
+  }
+
   private calcNumberOfEvents(): void {
 
     // See if any events span from previous into today or today into the next day