fix(day-view): expand hour segments across the full calendar width

BREAKING CHANGE: If extending the root week view component to override the template you must make the following changes: * Wrap the time events with `<div "class='cal-events-container'">` * Change `<div class="cal-time-label-column" *ngIf="view.hourColumns.length > 0">` to `<div class="cal-time-label-column" *ngIf="view.hourColumns.length > 0 && daysInWeek !== 1">` * Add `[isTimeLabel]="daysInWeek === 1"` to the bottom `<mwl-calendar-week-view-hour-segment>` elements Fixes #1083
mattlewis92 · Oct 19, 2019 · 61aef47 · 61aef47
1 parent 494adb5
commit 61aef47
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 100 deletions.
diff --git a/projects/angular-calendar/src/modules/day/calendar-day-view.scss b/projects/angular-calendar/src/modules/day/calendar-day-view.scss
@@ -3,4 +3,12 @@
   mwl-calendar-week-view-header {
     display: none;
   }
+
+  .cal-events-container {
+    margin-left: 70px;
+  }
+
+  .cal-day-column {
+    border-left: 0;
+  }
 }
diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts
@@ -205,7 +205,10 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
         (dragEnter)="dragEnter('time')"
         (dragLeave)="dragLeave('time')"
       >
-        <div class="cal-time-label-column" *ngIf="view.hourColumns.length > 0">
+        <div
+          class="cal-time-label-column"
+          *ngIf="view.hourColumns.length > 0 && daysInWeek !== 1"
+        >
           <div
             *ngFor="
               let hour of view.hourColumns[0].hours;
@@ -237,101 +240,106 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
             class="cal-day-column"
             *ngFor="let column of view.hourColumns; trackBy: trackByHourColumn"
           >
-            <div
-              *ngFor="
-                let timeEvent of column.events;
-                trackBy: trackByDayOrWeekEvent
-              "
-              #event
-              class="cal-event-container"
-              [class.cal-draggable]="
-                timeEvent.event.draggable && timeEventResizes.size === 0
-              "
-              [class.cal-starts-within-day]="!timeEvent.startsBeforeDay"
-              [class.cal-ends-within-day]="!timeEvent.endsAfterDay"
-              [ngClass]="timeEvent.event.cssClass"
-              [hidden]="timeEvent.height === 0 && timeEvent.width === 0"
-              [style.top.px]="timeEvent.top"
-              [style.height.px]="timeEvent.height"
-              [style.left.%]="timeEvent.left"
-              [style.width.%]="timeEvent.width"
-              mwlResizable
-              [resizeSnapGrid]="{
-                left: dayColumnWidth,
-                right: dayColumnWidth,
-                top: eventSnapSize || hourSegmentHeight,
-                bottom: eventSnapSize || hourSegmentHeight
-              }"
-              [validateResize]="validateResize"
-              [allowNegativeResizes]="true"
-              (resizeStart)="
-                timeEventResizeStarted(dayColumns, timeEvent, $event)
-              "
-              (resizing)="timeEventResizing(timeEvent, $event)"
-              (resizeEnd)="timeEventResizeEnded(timeEvent)"
-              mwlDraggable
-              dragActiveClass="cal-drag-active"
-              [dropData]="{ event: timeEvent.event, calendarId: calendarId }"
-              [dragAxis]="{
-                x: timeEvent.event.draggable && timeEventResizes.size === 0,
-                y: timeEvent.event.draggable && timeEventResizes.size === 0
-              }"
-              [dragSnapGrid]="
-                snapDraggedEvents
-                  ? { x: dayColumnWidth, y: eventSnapSize || hourSegmentHeight }
-                  : {}
-              "
-              [ghostDragEnabled]="!snapDraggedEvents"
-              [validateDrag]="validateDrag"
-              (dragStart)="dragStarted(dayColumns, event, timeEvent)"
-              (dragging)="dragMove(timeEvent, $event)"
-              (dragEnd)="dragEnded(timeEvent, $event, dayColumnWidth, true)"
-            >
+            <div class="cal-events-container">
               <div
-                class="cal-resize-handle cal-resize-handle-before-start"
-                *ngIf="
-                  timeEvent.event?.resizable?.beforeStart &&
-                  !timeEvent.startsBeforeDay
+                *ngFor="
+                  let timeEvent of column.events;
+                  trackBy: trackByDayOrWeekEvent
                 "
-                mwlResizeHandle
-                [resizeEdges]="{
-                  left: true,
-                  top: true
-                }"
-              ></div>
-              <mwl-calendar-week-view-event
-                [locale]="locale"
-                [weekEvent]="timeEvent"
-                [tooltipPlacement]="tooltipPlacement"
-                [tooltipTemplate]="tooltipTemplate"
-                [tooltipAppendToBody]="tooltipAppendToBody"
-                [tooltipDisabled]="dragActive || timeEventResizes.size > 0"
-                [tooltipDelay]="tooltipDelay"
-                [customTemplate]="eventTemplate"
-                [eventTitleTemplate]="eventTitleTemplate"
-                [eventActionsTemplate]="eventActionsTemplate"
-                [column]="column"
-                [daysInWeek]="daysInWeek"
-                (eventClicked)="
-                  eventClicked.emit({
-                    event: timeEvent.event,
-                    sourceEvent: $event.sourceEvent
-                  })
+                #event
+                class="cal-event-container"
+                [class.cal-draggable]="
+                  timeEvent.event.draggable && timeEventResizes.size === 0
                 "
-              >
-              </mwl-calendar-week-view-event>
-              <div
-                class="cal-resize-handle cal-resize-handle-after-end"
-                *ngIf="
-                  timeEvent.event?.resizable?.afterEnd &&
-                  !timeEvent.endsAfterDay
+                [class.cal-starts-within-day]="!timeEvent.startsBeforeDay"
+                [class.cal-ends-within-day]="!timeEvent.endsAfterDay"
+                [ngClass]="timeEvent.event.cssClass"
+                [hidden]="timeEvent.height === 0 && timeEvent.width === 0"
+                [style.top.px]="timeEvent.top"
+                [style.height.px]="timeEvent.height"
+                [style.left.%]="timeEvent.left"
+                [style.width.%]="timeEvent.width"
+                mwlResizable
+                [resizeSnapGrid]="{
+                  left: dayColumnWidth,
+                  right: dayColumnWidth,
+                  top: eventSnapSize || hourSegmentHeight,
+                  bottom: eventSnapSize || hourSegmentHeight
+                }"
+                [validateResize]="validateResize"
+                [allowNegativeResizes]="true"
+                (resizeStart)="
+                  timeEventResizeStarted(dayColumns, timeEvent, $event)
                 "
-                mwlResizeHandle
-                [resizeEdges]="{
-                  right: true,
-                  bottom: true
+                (resizing)="timeEventResizing(timeEvent, $event)"
+                (resizeEnd)="timeEventResizeEnded(timeEvent)"
+                mwlDraggable
+                dragActiveClass="cal-drag-active"
+                [dropData]="{ event: timeEvent.event, calendarId: calendarId }"
+                [dragAxis]="{
+                  x: timeEvent.event.draggable && timeEventResizes.size === 0,
+                  y: timeEvent.event.draggable && timeEventResizes.size === 0
                 }"
-              ></div>
+                [dragSnapGrid]="
+                  snapDraggedEvents
+                    ? {
+                        x: dayColumnWidth,
+                        y: eventSnapSize || hourSegmentHeight
+                      }
+                    : {}
+                "
+                [ghostDragEnabled]="!snapDraggedEvents"
+                [validateDrag]="validateDrag"
+                (dragStart)="dragStarted(dayColumns, event, timeEvent)"
+                (dragging)="dragMove(timeEvent, $event)"
+                (dragEnd)="dragEnded(timeEvent, $event, dayColumnWidth, true)"
+              >
+                <div
+                  class="cal-resize-handle cal-resize-handle-before-start"
+                  *ngIf="
+                    timeEvent.event?.resizable?.beforeStart &&
+                    !timeEvent.startsBeforeDay
+                  "
+                  mwlResizeHandle
+                  [resizeEdges]="{
+                    left: true,
+                    top: true
+                  }"
+                ></div>
+                <mwl-calendar-week-view-event
+                  [locale]="locale"
+                  [weekEvent]="timeEvent"
+                  [tooltipPlacement]="tooltipPlacement"
+                  [tooltipTemplate]="tooltipTemplate"
+                  [tooltipAppendToBody]="tooltipAppendToBody"
+                  [tooltipDisabled]="dragActive || timeEventResizes.size > 0"
+                  [tooltipDelay]="tooltipDelay"
+                  [customTemplate]="eventTemplate"
+                  [eventTitleTemplate]="eventTitleTemplate"
+                  [eventActionsTemplate]="eventActionsTemplate"
+                  [column]="column"
+                  [daysInWeek]="daysInWeek"
+                  (eventClicked)="
+                    eventClicked.emit({
+                      event: timeEvent.event,
+                      sourceEvent: $event.sourceEvent
+                    })
+                  "
+                >
+                </mwl-calendar-week-view-event>
+                <div
+                  class="cal-resize-handle cal-resize-handle-after-end"
+                  *ngIf="
+                    timeEvent.event?.resizable?.afterEnd &&
+                    !timeEvent.endsAfterDay
+                  "
+                  mwlResizeHandle
+                  [resizeEdges]="{
+                    right: true,
+                    bottom: true
+                  }"
+                ></div>
+              </div>
             </div>
 
             <div
@@ -370,6 +378,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
                 dragActiveClass="cal-drag-active"
                 (drop)="eventDropped($event, segment.date, false)"
                 (dragEnter)="dateDragEnter(segment.date)"
+                [isTimeLabel]="daysInWeek === 1"
               >
               </mwl-calendar-week-view-hour-segment>
             </div>

diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view.scss b/projects/angular-calendar/src/modules/week/calendar-week-view.scss
@@ -225,6 +225,10 @@ $cal-week-view-vars: map-merge($cal-vars, $cal-week-view-vars);
       position: relative;
     }
 
+    .cal-events-container {
+      position: relative;
+    }
+
     .cal-event-container {
       position: absolute;
       z-index: 1;

diff --git a/projects/angular-calendar/test/calendar-day-view.component.spec.ts b/projects/angular-calendar/test/calendar-day-view.component.spec.ts
@@ -219,16 +219,18 @@ describe('CalendarDayViewComponent component', () => {
     fixture.componentInstance.viewDate = new Date('2016-06-01');
 
     fixture.detectChanges();
-    fixture.componentInstance.hourSegmentClicked.subscribe(val => {
-      expect(val).to.deep.equal({
-        date: moment('2016-06-01')
-          .startOf('day')
-          .add(1, 'hour')
-          .add(30, 'minutes')
-          .toDate()
-      });
-    });
+    const spy = sinon.spy();
+    fixture.componentInstance.hourSegmentClicked.subscribe(spy);
     fixture.nativeElement.querySelectorAll('.cal-hour-segment')[3].click();
+    const args = spy.getCall(0).args[0];
+    expect(args.date).to.deep.equal(
+      moment('2016-06-01')
+        .startOf('day')
+        .add(1, 'hour')
+        .add(30, 'minutes')
+        .toDate()
+    );
+    expect(args.sourceEvent instanceof MouseEvent).to.be.true;
   });
 
   it('should allow the event title to be customised by the calendarConfig provider', () => {