Skip to content

Commit fd6e7e8

Browse files
mattlewis92mattlewis92
committed
refactor(demos): use week view for day view scheduler
1 parent 6a24e8b commit fd6e7e8

File tree

2 files changed

+211
-105
lines changed

2 files changed

+211
-105
lines changed

‎projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.html

+139-79
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,158 @@
1-
<div class="cal-day-view" #dayViewContainer>
1+
<div class="cal-week-view" role="grid">
22
<div class="day-view-column-headers">
33
<div class="day-view-column-header" *ngFor="let user of view?.users">
44
{{ user.name }}
55
</div>
66
</div>
77
<div
8-
class="cal-hour-rows"
8+
class="cal-time-events"
99
mwlDroppable
10-
(dragEnter)="eventDragEnter = eventDragEnter + 1"
11-
(dragLeave)="eventDragEnter = eventDragEnter - 1"
10+
(dragEnter)="dragEnter('time')"
11+
(dragLeave)="dragLeave('time')"
1212
>
13-
<div class="cal-events">
13+
<div class="cal-time-label-column" *ngIf="view.hourColumns.length > 0">
1414
<div
15-
#event
16-
*ngFor="let dayEvent of view?.events; trackBy: trackByDayEvent"
17-
class="cal-event-container"
18-
[class.cal-draggable]="dayEvent.event.draggable"
19-
[class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
20-
[class.cal-ends-within-day]="!dayEvent.endsAfterDay"
21-
[ngClass]="dayEvent.event.cssClass"
22-
mwlResizable
23-
[resizeSnapGrid]="{
24-
top: eventSnapSize || hourSegmentHeight,
25-
bottom: eventSnapSize || hourSegmentHeight
26-
}"
27-
[validateResize]="validateResize"
28-
(resizeStart)="resizeStarted(dayEvent, $event, dayViewContainer)"
29-
(resizing)="resizing(dayEvent, $event)"
30-
(resizeEnd)="resizeEnded(dayEvent)"
31-
mwlDraggable
32-
[dragAxis]="{
33-
x: currentResizes.size === 0,
34-
y: dayEvent.event.draggable && currentResizes.size === 0
35-
}"
36-
[dragSnapGrid]="{
37-
y: eventSnapSize || hourSegmentHeight,
38-
x: eventWidth
39-
}"
40-
[validateDrag]="validateDrag"
41-
[ghostDragEnabled]="!snapDraggedEvents"
42-
(dragStart)="dragStarted(event, dayViewContainer, dayEvent)"
43-
(dragging)="dragMove($event)"
44-
(dragEnd)="eventDragged(dayEvent, $event.x, $event.y)"
45-
[style.marginTop.px]="dayEvent.top"
46-
[style.height.px]="dayEvent.height"
47-
[style.marginLeft.px]="dayEvent.left + 70"
48-
[style.width.px]="dayEvent.width - 1"
15+
*ngFor="
16+
let hour of view.hourColumns[0].hours;
17+
trackBy: trackByHour;
18+
let odd = odd
19+
"
20+
class="cal-hour"
21+
[class.cal-hour-odd]="odd"
4922
>
50-
<div
51-
class="cal-resize-handle cal-resize-handle-before-start"
52-
*ngIf="
53-
dayEvent.event?.resizable?.beforeStart && !dayEvent.startsBeforeDay
54-
"
55-
mwlResizeHandle
56-
[resizeEdges]="{ top: true }"
57-
></div>
58-
<mwl-calendar-day-view-event
59-
[dayEvent]="dayEvent"
60-
[tooltipPlacement]="tooltipPlacement"
61-
[tooltipTemplate]="tooltipTemplate"
62-
[tooltipAppendToBody]="tooltipAppendToBody"
63-
[customTemplate]="eventTemplate"
64-
[eventTitleTemplate]="eventTitleTemplate"
65-
[eventActionsTemplate]="eventActionsTemplate"
66-
(eventClicked)="eventClicked.emit({ event: dayEvent.event })"
23+
<mwl-calendar-week-view-hour-segment
24+
*ngFor="let segment of hour.segments; trackBy: trackByHourSegment"
25+
[style.height.px]="hourSegmentHeight"
26+
[segment]="segment"
27+
[segmentHeight]="hourSegmentHeight"
28+
[locale]="locale"
29+
[customTemplate]="hourSegmentTemplate"
30+
[isTimeLabel]="true"
6731
>
68-
</mwl-calendar-day-view-event>
69-
<div
70-
class="cal-resize-handle cal-resize-handle-after-end"
71-
*ngIf="dayEvent.event?.resizable?.afterEnd && !dayEvent.endsAfterDay"
72-
mwlResizeHandle
73-
[resizeEdges]="{ bottom: true }"
74-
></div>
32+
</mwl-calendar-week-view-hour-segment>
7533
</div>
7634
</div>
7735
<div
78-
class="cal-hour"
79-
*ngFor="let hour of hours; trackBy: trackByHour"
80-
[style.minWidth.px]="view?.width + 70"
36+
class="cal-day-columns"
37+
[class.cal-resize-active]="timeEventResizes.size > 0"
38+
#dayColumns
8139
>
82-
<mwl-calendar-day-view-hour-segment
83-
*ngFor="let segment of hour.segments; trackBy: trackByHourSegment"
84-
[style.height.px]="hourSegmentHeight"
85-
[segment]="segment"
86-
[segmentHeight]="hourSegmentHeight"
87-
[locale]="locale"
88-
[customTemplate]="hourSegmentTemplate"
89-
(mwlClick)="hourSegmentClicked.emit({ date: segment.date })"
90-
mwlDroppable
91-
dragOverClass="cal-drag-over"
92-
dragActiveClass="cal-drag-active"
93-
(drop)="eventDropped($event, segment.date, false)"
40+
<div
41+
class="cal-day-column"
42+
*ngFor="let column of view.hourColumns; trackBy: trackByHourColumn"
9443
>
95-
</mwl-calendar-day-view-hour-segment>
44+
<div
45+
*ngFor="
46+
let timeEvent of column.events;
47+
trackBy: trackByDayOrWeekEvent
48+
"
49+
#event
50+
class="cal-event-container"
51+
[class.cal-draggable]="
52+
timeEvent.event.draggable && timeEventResizes.size === 0
53+
"
54+
[class.cal-starts-within-day]="!timeEvent.startsBeforeDay"
55+
[class.cal-ends-within-day]="!timeEvent.endsAfterDay"
56+
[ngClass]="timeEvent.event.cssClass"
57+
[hidden]="timeEvent.height === 0 && timeEvent.width === 0"
58+
[style.top.px]="timeEvent.top"
59+
[style.height.px]="timeEvent.height"
60+
[style.left.px]="timeEvent.left"
61+
[style.width.px]="timeEvent.width"
62+
mwlResizable
63+
[resizeSnapGrid]="{
64+
left: dayColumnWidth,
65+
right: dayColumnWidth,
66+
top: eventSnapSize || hourSegmentHeight,
67+
bottom: eventSnapSize || hourSegmentHeight
68+
}"
69+
[validateResize]="validateResize"
70+
[allowNegativeResizes]="true"
71+
(resizeStart)="timeEventResizeStarted(dayColumns, timeEvent, $event)"
72+
(resizing)="timeEventResizing(timeEvent, $event)"
73+
(resizeEnd)="timeEventResizeEnded(timeEvent)"
74+
mwlDraggable
75+
dragActiveClass="cal-drag-active"
76+
[dropData]="{ event: timeEvent.event, calendarId: calendarId }"
77+
[dragAxis]="{
78+
x: timeEvent.event.draggable && timeEventResizes.size === 0,
79+
y: timeEvent.event.draggable && timeEventResizes.size === 0
80+
}"
81+
[dragSnapGrid]="
82+
snapDraggedEvents
83+
? { x: eventWidth, y: eventSnapSize || hourSegmentHeight }
84+
: {}
85+
"
86+
[ghostDragEnabled]="!snapDraggedEvents"
87+
[validateDrag]="validateDrag"
88+
(dragStart)="dragStarted(dayColumns, event, timeEvent)"
89+
(dragging)="dragMove(timeEvent, $event)"
90+
(dragEnd)="dragEnded(timeEvent, $event, dayColumnWidth, true)"
91+
>
92+
<div
93+
class="cal-resize-handle cal-resize-handle-before-start"
94+
*ngIf="
95+
timeEvent.event?.resizable?.beforeStart &&
96+
!timeEvent.startsBeforeDay
97+
"
98+
mwlResizeHandle
99+
[resizeEdges]="{
100+
left: true,
101+
top: true
102+
}"
103+
></div>
104+
<mwl-calendar-week-view-event
105+
[locale]="locale"
106+
[weekEvent]="timeEvent"
107+
[tooltipPlacement]="tooltipPlacement"
108+
[tooltipTemplate]="tooltipTemplate"
109+
[tooltipAppendToBody]="tooltipAppendToBody"
110+
[tooltipDisabled]="dragActive || timeEventResizes.size > 0"
111+
[tooltipDelay]="tooltipDelay"
112+
[customTemplate]="eventTemplate"
113+
[eventTitleTemplate]="eventTitleTemplate"
114+
[eventActionsTemplate]="eventActionsTemplate"
115+
[column]="column"
116+
(eventClicked)="eventClicked.emit({ event: timeEvent.event })"
117+
>
118+
</mwl-calendar-week-view-event>
119+
<div
120+
class="cal-resize-handle cal-resize-handle-after-end"
121+
*ngIf="
122+
timeEvent.event?.resizable?.afterEnd && !timeEvent.endsAfterDay
123+
"
124+
mwlResizeHandle
125+
[resizeEdges]="{
126+
right: true,
127+
bottom: true
128+
}"
129+
></div>
130+
</div>
131+
132+
<div
133+
*ngFor="let hour of column.hours; trackBy: trackByHour; let odd = odd"
134+
class="cal-hour"
135+
[class.cal-hour-odd]="odd"
136+
>
137+
<mwl-calendar-week-view-hour-segment
138+
*ngFor="let segment of hour.segments; trackBy: trackByHourSegment"
139+
[style.height.px]="hourSegmentHeight"
140+
[segment]="segment"
141+
[segmentHeight]="hourSegmentHeight"
142+
[locale]="locale"
143+
[customTemplate]="hourSegmentTemplate"
144+
(mwlClick)="hourSegmentClicked.emit({ date: segment.date })"
145+
[clickListenerDisabled]="hourSegmentClicked.observers.length === 0"
146+
mwlDroppable
147+
[dragOverClass]="
148+
!dragActive || !snapDraggedEvents ? 'cal-drag-over' : null
149+
"
150+
dragActiveClass="cal-drag-active"
151+
(drop)="eventDropped($event, segment.date, false)"
152+
>
153+
</mwl-calendar-week-view-hour-segment>
154+
</div>
155+
</div>
96156
</div>
97157
</div>
98158
</div>

‎projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.ts

+72-26
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
import { Component, EventEmitter, Injectable, Output } from '@angular/core';
2-
import { CalendarDayViewComponent, CalendarUtils } from 'angular-calendar';
3-
import { DayView, DayViewEvent, GetDayViewArgs } from 'calendar-utils';
2+
import { CalendarUtils, CalendarWeekViewComponent } from 'angular-calendar';
3+
import {
4+
WeekView,
5+
GetWeekViewArgs,
6+
DayViewEvent,
7+
WeekViewAllDayEvent
8+
} from 'calendar-utils';
9+
import { DragEndEvent, DragMoveEvent } from 'angular-draggable-droppable';
410

511
const EVENT_WIDTH = 150;
612

7-
// extend the interface to add the array of users
8-
interface DayViewScheduler extends DayView {
13+
interface DayViewScheduler extends WeekView {
914
users: any[];
1015
}
1116

1217
@Injectable()
1318
export class DayViewSchedulerCalendarUtils extends CalendarUtils {
14-
getDayView(args: GetDayViewArgs): DayViewScheduler {
19+
getWeekView(args: GetWeekViewArgs): DayViewScheduler {
1520
const view: DayViewScheduler = {
16-
...super.getDayView(args),
21+
...super.getWeekView(args),
1722
users: []
1823
};
19-
view.events.forEach(({ event }) => {
24+
view.hourColumns[0].events.forEach(({ event }) => {
2025
// assumes user objects are the same references,
2126
// if 2 users have the same structure but different object references this will fail
2227
if (!view.users.includes(event.meta.user)) {
@@ -25,12 +30,14 @@ export class DayViewSchedulerCalendarUtils extends CalendarUtils {
2530
});
2631
// sort the users by their names
2732
view.users.sort((user1, user2) => user1.name.localeCompare(user2.name));
28-
view.events = view.events.map(dayViewEvent => {
29-
const index = view.users.indexOf(dayViewEvent.event.meta.user);
30-
dayViewEvent.left = index * EVENT_WIDTH; // change the column of the event
31-
return dayViewEvent;
32-
});
33-
view.width = view.users.length * EVENT_WIDTH;
33+
view.hourColumns[0].events = view.hourColumns[0].events.map(
34+
dayViewEvent => {
35+
const index = view.users.indexOf(dayViewEvent.event.meta.user);
36+
dayViewEvent.left = index * EVENT_WIDTH; // change the column of the event
37+
dayViewEvent.width = EVENT_WIDTH;
38+
return dayViewEvent;
39+
}
40+
);
3441
return view;
3542
}
3643
}
@@ -49,6 +56,9 @@ export class DayViewSchedulerCalendarUtils extends CalendarUtils {
4956
border: solid 1px black;
5057
text-align: center;
5158
}
59+
.cal-time-events {
60+
border-top: solid 1px #e1e1e1;
61+
}
5262
`
5363
],
5464
providers: [
@@ -59,23 +69,59 @@ export class DayViewSchedulerCalendarUtils extends CalendarUtils {
5969
],
6070
templateUrl: 'day-view-scheduler.component.html'
6171
})
62-
export class DayViewSchedulerComponent extends CalendarDayViewComponent {
72+
export class DayViewSchedulerComponent extends CalendarWeekViewComponent {
73+
@Output() userChanged = new EventEmitter();
74+
6375
view: DayViewScheduler;
6476

65-
@Output() userChanged = new EventEmitter();
77+
daysInWeek = 1;
78+
79+
eventWidth = EVENT_WIDTH;
80+
81+
private originalLeft: number;
6682

67-
eventDragged(dayEvent: DayViewEvent, xPixels: number, yPixels: number): void {
68-
super.dragEnded(dayEvent, { y: yPixels, x: 0 } as any); // original behaviour
69-
if (xPixels !== 0) {
70-
const columnsMoved = xPixels / EVENT_WIDTH;
71-
const currentColumnIndex = this.view.users.findIndex(
72-
user => user === dayEvent.event.meta.user
73-
);
74-
const newIndex = currentColumnIndex + columnsMoved;
75-
const newUser = this.view.users[newIndex];
76-
if (newUser) {
77-
this.userChanged.emit({ event: dayEvent.event, newUser });
83+
dragStarted(
84+
eventsContainer: HTMLElement,
85+
event: HTMLElement,
86+
dayEvent?: DayViewEvent
87+
) {
88+
this.originalLeft = dayEvent.left;
89+
super.dragStarted(eventsContainer, event, dayEvent);
90+
}
91+
92+
dragMove(dayEvent: DayViewEvent, dragEvent: DragMoveEvent) {
93+
const originalX = dragEvent.x;
94+
dragEvent.x = 0;
95+
super.dragMove(dayEvent, dragEvent);
96+
const newUserColumn = this.getDraggedUserColumn(dayEvent, originalX);
97+
this.view.hourColumns[0].events.forEach(iDayEvent => {
98+
if (iDayEvent.event === dayEvent.event) {
99+
iDayEvent.left = newUserColumn
100+
? this.originalLeft + originalX
101+
: (this.view.users.length - 1) * EVENT_WIDTH;
78102
}
103+
});
104+
}
105+
106+
dragEnded(
107+
weekEvent: DayViewEvent,
108+
dragEndEvent: DragEndEvent,
109+
dayWidth: number,
110+
useY = false
111+
) {
112+
super.dragEnded(weekEvent, dragEndEvent, dayWidth, useY);
113+
const newUser = this.getDraggedUserColumn(weekEvent, dragEndEvent.x);
114+
if (newUser && newUser !== weekEvent.event.meta.user) {
115+
this.userChanged.emit({ event: weekEvent.event, newUser });
79116
}
80117
}
118+
119+
private getDraggedUserColumn(dayEvent: DayViewEvent, xPixels: number) {
120+
const columnsMoved = xPixels / EVENT_WIDTH;
121+
const currentColumnIndex = this.view.users.findIndex(
122+
user => user === dayEvent.event.meta.user
123+
);
124+
const newIndex = currentColumnIndex + columnsMoved;
125+
return this.view.users[newIndex];
126+
}
81127
}

0 commit comments

Comments
 (0)