Calendar Bugfix (#1055)

* fix: ux when clicking on same day in calendar range
swimlane · Sep 27, 2024 · f45ef46 · f45ef46
1 parent fc407c6
commit f45ef46
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts
@@ -34,11 +34,6 @@ export interface CalendarDateRange {
   endDate: Date | undefined;
 }
 
-interface CalendarDateRangeSelection {
-  startDateSelection: boolean;
-  endDateSelection: boolean;
-}
-
 @Component({
   selector: 'ngx-calendar',
   exportAs: 'ngxCalendar',
@@ -128,10 +123,6 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
   endMinute: string;
   startAmPmVal = 'AM';
   endAmPmVal = 'AM';
-  dateRangeSelection: CalendarDateRangeSelection = {
-    startDateSelection: false,
-    endDateSelection: false
-  };
 
   readonly CalendarView = CalendarView;
   readonly CalendarSelect = CalendarSelect;
@@ -328,35 +319,27 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
 
   onDaySelectRange(day: CalendarDay) {
     this.focusDate = day.date.clone();
-
     if (this.range.startDate === undefined && this.range.endDate === undefined) {
       this.range.startDate = this.focusDate.toDate();
       this.range.startDate.setHours(Number(this.startHour));
       this.range.startDate.setMinutes(Number(this.startMinute));
-      this.dateRangeSelection.startDateSelection = true;
     } else if (this.range.endDate === undefined) {
-      if (this.focusDate.toDate() > this.range.startDate) {
+      if (
+        this.compareCalendarDays(this.focusDate.toDate(), this.range.startDate) ||
+        this.focusDate.toDate() > this.range.startDate
+      ) {
         this.range.endDate = this.focusDate.toDate();
         this.range.endDate.setHours(Number(this.endHour));
         this.range.endDate.setMinutes(Number(this.endMinute));
       } else {
         this.range.startDate = this.focusDate.toDate();
         this.range.startDate.setHours(Number(this.startHour));
         this.range.startDate.setMinutes(Number(this.startMinute));
-        this.dateRangeSelection.startDateSelection = true;
       }
     } else {
       this.range.startDate = this.focusDate.toDate();
       this.range.startDate.setHours(Number(this.startHour));
       this.range.startDate.setMinutes(Number(this.startMinute));
-      this.dateRangeSelection.endDateSelection = false;
-      this.range.endDate = undefined;
-    }
-
-    if (this.dateRangeSelection.startDateSelection && this.dateRangeSelection.endDateSelection) {
-      this.dateRangeSelection.startDateSelection = false;
-      this.dateRangeSelection.endDateSelection = false;
-      this.range.startDate = undefined;
       this.range.endDate = undefined;
     }
 
@@ -724,10 +707,23 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
 
   formatDate(date: Date): string {
     const customMoment = this.createMoment(date);
-
     return customMoment.format(this.dateLabelFormat);
   }
 
+  compareCalendarDays(date1: Date, date2: Date) {
+    // Get the year, month, and day components of each date
+    const year1 = date1.getFullYear();
+    const month1 = date1.getMonth();
+    const day1 = date1.getDate();
+
+    const year2 = date2.getFullYear();
+    const month2 = date2.getMonth();
+    const day2 = date2.getDate();
+
+    // Check if the year, month, and day are the same
+    return year1 === year2 && month1 === month2 && day1 === day2;
+  }
+
   private onChangeCallback: (_: any) => void = () => {
     // placeholder
   };

diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts b/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts
@@ -407,6 +407,19 @@ describe('CalendarComponent', () => {
       expect(component.range?.endDate).toEqual(new Date('2024-04-10T15:45:00'));
     });
 
+    it('should set range end if range start is set and focusDate is same as range start', () => {
+      const day = { date: moment('2024-04-10'), nextMonth: true, prevMonth: true } as CalendarDay;
+      component.focusDate = moment('2024-04-10');
+      component.range = { startDate: new Date('2024-04-10T10:30:00'), endDate: undefined };
+      component.endHour = '15';
+      component.endMinute = '45';
+
+      component.onDaySelectRange(day);
+
+      expect(component.range?.startDate).toEqual(new Date('2024-04-10T10:30:00'));
+      expect(component.range?.endDate).toEqual(new Date('2024-04-10T15:45:00'));
+    });
+
     it('should update range start if range start is set and focusDate is less than or equal to range start', () => {
       const day = { date: moment('2024-04-01'), nextMonth: true, prevMonth: true } as CalendarDay;
       component.focusDate = moment('2024-04-01');