Skip to content

Commit 61aef47

Browse files
mattlewis92mattlewis92
committed
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
1 parent 494adb5 commit 61aef47

File tree

4 files changed

+123
-100
lines changed

4 files changed

+123
-100
lines changed

‎projects/angular-calendar/src/modules/day/calendar-day-view.scss

+8
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,12 @@
33
mwl-calendar-week-view-header {
44
display: none;
55
}
6+
7+
.cal-events-container {
8+
margin-left: 70px;
9+
}
10+
11+
.cal-day-column {
12+
border-left: 0;
13+
}
614
}

‎projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

+100-91
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,10 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
205205
(dragEnter)="dragEnter('time')"
206206
(dragLeave)="dragLeave('time')"
207207
>
208-
<div class="cal-time-label-column" *ngIf="view.hourColumns.length > 0">
208+
<div
209+
class="cal-time-label-column"
210+
*ngIf="view.hourColumns.length > 0 && daysInWeek !== 1"
211+
>
209212
<div
210213
*ngFor="
211214
let hour of view.hourColumns[0].hours;
@@ -237,101 +240,106 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
237240
class="cal-day-column"
238241
*ngFor="let column of view.hourColumns; trackBy: trackByHourColumn"
239242
>
240-
<div
241-
*ngFor="
242-
let timeEvent of column.events;
243-
trackBy: trackByDayOrWeekEvent
244-
"
245-
#event
246-
class="cal-event-container"
247-
[class.cal-draggable]="
248-
timeEvent.event.draggable && timeEventResizes.size === 0
249-
"
250-
[class.cal-starts-within-day]="!timeEvent.startsBeforeDay"
251-
[class.cal-ends-within-day]="!timeEvent.endsAfterDay"
252-
[ngClass]="timeEvent.event.cssClass"
253-
[hidden]="timeEvent.height === 0 && timeEvent.width === 0"
254-
[style.top.px]="timeEvent.top"
255-
[style.height.px]="timeEvent.height"
256-
[style.left.%]="timeEvent.left"
257-
[style.width.%]="timeEvent.width"
258-
mwlResizable
259-
[resizeSnapGrid]="{
260-
left: dayColumnWidth,
261-
right: dayColumnWidth,
262-
top: eventSnapSize || hourSegmentHeight,
263-
bottom: eventSnapSize || hourSegmentHeight
264-
}"
265-
[validateResize]="validateResize"
266-
[allowNegativeResizes]="true"
267-
(resizeStart)="
268-
timeEventResizeStarted(dayColumns, timeEvent, $event)
269-
"
270-
(resizing)="timeEventResizing(timeEvent, $event)"
271-
(resizeEnd)="timeEventResizeEnded(timeEvent)"
272-
mwlDraggable
273-
dragActiveClass="cal-drag-active"
274-
[dropData]="{ event: timeEvent.event, calendarId: calendarId }"
275-
[dragAxis]="{
276-
x: timeEvent.event.draggable && timeEventResizes.size === 0,
277-
y: timeEvent.event.draggable && timeEventResizes.size === 0
278-
}"
279-
[dragSnapGrid]="
280-
snapDraggedEvents
281-
? { x: dayColumnWidth, y: eventSnapSize || hourSegmentHeight }
282-
: {}
283-
"
284-
[ghostDragEnabled]="!snapDraggedEvents"
285-
[validateDrag]="validateDrag"
286-
(dragStart)="dragStarted(dayColumns, event, timeEvent)"
287-
(dragging)="dragMove(timeEvent, $event)"
288-
(dragEnd)="dragEnded(timeEvent, $event, dayColumnWidth, true)"
289-
>
243+
<div class="cal-events-container">
290244
<div
291-
class="cal-resize-handle cal-resize-handle-before-start"
292-
*ngIf="
293-
timeEvent.event?.resizable?.beforeStart &&
294-
!timeEvent.startsBeforeDay
245+
*ngFor="
246+
let timeEvent of column.events;
247+
trackBy: trackByDayOrWeekEvent
295248
"
296-
mwlResizeHandle
297-
[resizeEdges]="{
298-
left: true,
299-
top: true
300-
}"
301-
></div>
302-
<mwl-calendar-week-view-event
303-
[locale]="locale"
304-
[weekEvent]="timeEvent"
305-
[tooltipPlacement]="tooltipPlacement"
306-
[tooltipTemplate]="tooltipTemplate"
307-
[tooltipAppendToBody]="tooltipAppendToBody"
308-
[tooltipDisabled]="dragActive || timeEventResizes.size > 0"
309-
[tooltipDelay]="tooltipDelay"
310-
[customTemplate]="eventTemplate"
311-
[eventTitleTemplate]="eventTitleTemplate"
312-
[eventActionsTemplate]="eventActionsTemplate"
313-
[column]="column"
314-
[daysInWeek]="daysInWeek"
315-
(eventClicked)="
316-
eventClicked.emit({
317-
event: timeEvent.event,
318-
sourceEvent: $event.sourceEvent
319-
})
249+
#event
250+
class="cal-event-container"
251+
[class.cal-draggable]="
252+
timeEvent.event.draggable && timeEventResizes.size === 0
320253
"
321-
>
322-
</mwl-calendar-week-view-event>
323-
<div
324-
class="cal-resize-handle cal-resize-handle-after-end"
325-
*ngIf="
326-
timeEvent.event?.resizable?.afterEnd &&
327-
!timeEvent.endsAfterDay
254+
[class.cal-starts-within-day]="!timeEvent.startsBeforeDay"
255+
[class.cal-ends-within-day]="!timeEvent.endsAfterDay"
256+
[ngClass]="timeEvent.event.cssClass"
257+
[hidden]="timeEvent.height === 0 && timeEvent.width === 0"
258+
[style.top.px]="timeEvent.top"
259+
[style.height.px]="timeEvent.height"
260+
[style.left.%]="timeEvent.left"
261+
[style.width.%]="timeEvent.width"
262+
mwlResizable
263+
[resizeSnapGrid]="{
264+
left: dayColumnWidth,
265+
right: dayColumnWidth,
266+
top: eventSnapSize || hourSegmentHeight,
267+
bottom: eventSnapSize || hourSegmentHeight
268+
}"
269+
[validateResize]="validateResize"
270+
[allowNegativeResizes]="true"
271+
(resizeStart)="
272+
timeEventResizeStarted(dayColumns, timeEvent, $event)
328273
"
329-
mwlResizeHandle
330-
[resizeEdges]="{
331-
right: true,
332-
bottom: true
274+
(resizing)="timeEventResizing(timeEvent, $event)"
275+
(resizeEnd)="timeEventResizeEnded(timeEvent)"
276+
mwlDraggable
277+
dragActiveClass="cal-drag-active"
278+
[dropData]="{ event: timeEvent.event, calendarId: calendarId }"
279+
[dragAxis]="{
280+
x: timeEvent.event.draggable && timeEventResizes.size === 0,
281+
y: timeEvent.event.draggable && timeEventResizes.size === 0
333282
}"
334-
></div>
283+
[dragSnapGrid]="
284+
snapDraggedEvents
285+
? {
286+
x: dayColumnWidth,
287+
y: eventSnapSize || hourSegmentHeight
288+
}
289+
: {}
290+
"
291+
[ghostDragEnabled]="!snapDraggedEvents"
292+
[validateDrag]="validateDrag"
293+
(dragStart)="dragStarted(dayColumns, event, timeEvent)"
294+
(dragging)="dragMove(timeEvent, $event)"
295+
(dragEnd)="dragEnded(timeEvent, $event, dayColumnWidth, true)"
296+
>
297+
<div
298+
class="cal-resize-handle cal-resize-handle-before-start"
299+
*ngIf="
300+
timeEvent.event?.resizable?.beforeStart &&
301+
!timeEvent.startsBeforeDay
302+
"
303+
mwlResizeHandle
304+
[resizeEdges]="{
305+
left: true,
306+
top: true
307+
}"
308+
></div>
309+
<mwl-calendar-week-view-event
310+
[locale]="locale"
311+
[weekEvent]="timeEvent"
312+
[tooltipPlacement]="tooltipPlacement"
313+
[tooltipTemplate]="tooltipTemplate"
314+
[tooltipAppendToBody]="tooltipAppendToBody"
315+
[tooltipDisabled]="dragActive || timeEventResizes.size > 0"
316+
[tooltipDelay]="tooltipDelay"
317+
[customTemplate]="eventTemplate"
318+
[eventTitleTemplate]="eventTitleTemplate"
319+
[eventActionsTemplate]="eventActionsTemplate"
320+
[column]="column"
321+
[daysInWeek]="daysInWeek"
322+
(eventClicked)="
323+
eventClicked.emit({
324+
event: timeEvent.event,
325+
sourceEvent: $event.sourceEvent
326+
})
327+
"
328+
>
329+
</mwl-calendar-week-view-event>
330+
<div
331+
class="cal-resize-handle cal-resize-handle-after-end"
332+
*ngIf="
333+
timeEvent.event?.resizable?.afterEnd &&
334+
!timeEvent.endsAfterDay
335+
"
336+
mwlResizeHandle
337+
[resizeEdges]="{
338+
right: true,
339+
bottom: true
340+
}"
341+
></div>
342+
</div>
335343
</div>
336344
337345
<div
@@ -370,6 +378,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
370378
dragActiveClass="cal-drag-active"
371379
(drop)="eventDropped($event, segment.date, false)"
372380
(dragEnter)="dateDragEnter(segment.date)"
381+
[isTimeLabel]="daysInWeek === 1"
373382
>
374383
</mwl-calendar-week-view-hour-segment>
375384
</div>

‎projects/angular-calendar/src/modules/week/calendar-week-view.scss

+4
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,10 @@ $cal-week-view-vars: map-merge($cal-vars, $cal-week-view-vars);
225225
position: relative;
226226
}
227227

228+
.cal-events-container {
229+
position: relative;
230+
}
231+
228232
.cal-event-container {
229233
position: absolute;
230234
z-index: 1;

‎projects/angular-calendar/test/calendar-day-view.component.spec.ts

+11-9
Original file line numberDiff line numberDiff line change
@@ -219,16 +219,18 @@ describe('CalendarDayViewComponent component', () => {
219219
fixture.componentInstance.viewDate = new Date('2016-06-01');
220220

221221
fixture.detectChanges();
222-
fixture.componentInstance.hourSegmentClicked.subscribe(val => {
223-
expect(val).to.deep.equal({
224-
date: moment('2016-06-01')
225-
.startOf('day')
226-
.add(1, 'hour')
227-
.add(30, 'minutes')
228-
.toDate()
229-
});
230-
});
222+
const spy = sinon.spy();
223+
fixture.componentInstance.hourSegmentClicked.subscribe(spy);
231224
fixture.nativeElement.querySelectorAll('.cal-hour-segment')[3].click();
225+
const args = spy.getCall(0).args[0];
226+
expect(args.date).to.deep.equal(
227+
moment('2016-06-01')
228+
.startOf('day')
229+
.add(1, 'hour')
230+
.add(30, 'minutes')
231+
.toDate()
232+
);
233+
expect(args.sourceEvent instanceof MouseEvent).to.be.true;
232234
});
233235

234236
it('should allow the event title to be customised by the calendarConfig provider', () => {

0 commit comments

Comments
 (0)