Skip to content

Commit 45d548f

Browse files
mattlewis92mattlewis92
committed
docs: update grouping demo to show how to group on the week and day view
1 parent 70ff8cb commit 45d548f

File tree

8 files changed

+237
-128
lines changed

8 files changed

+237
-128
lines changed

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/demos/app/demo-app.module.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -303,13 +303,13 @@ import { ClipboardModule } from 'ngx-clipboard';
303303
}
304304
},
305305
{
306-
path: 'group-month-view-events',
306+
path: 'group-similar-events',
307307
loadChildren: () =>
308-
import('./demo-modules/group-month-view-events/module').then(
308+
import('./demo-modules/group-similar-events/module').then(
309309
m => m.DemoModule
310310
),
311311
data: {
312-
label: 'Group month view events'
312+
label: 'Group similar events'
313313
}
314314
},
315315
{

‎projects/demos/app/demo-modules/group-month-view-events/component.ts

-79
This file was deleted.

‎projects/demos/app/demo-modules/group-month-view-events/template.html

-45
This file was deleted.

‎projects/demos/app/demo-modules/group-similar-events/component.ts

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
2+
import { CalendarEvent, CalendarMonthViewDay } from 'angular-calendar';
3+
import { colors } from '../demo-utils/colors';
4+
import { isSameMinute, startOfDay } from 'date-fns';
5+
6+
interface EventGroupMeta {
7+
type: string;
8+
}
9+
10+
@Component({
11+
selector: 'mwl-demo-component',
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
templateUrl: './template.html',
14+
styles: [
15+
`
16+
.cell-totals {
17+
margin: 5px;
18+
text-align: center;
19+
}
20+
.badge {
21+
margin-right: 5px;
22+
}
23+
`
24+
]
25+
})
26+
export class DemoComponent implements OnInit {
27+
view: string = 'month';
28+
29+
viewDate: Date = new Date();
30+
31+
events: CalendarEvent[] = [
32+
{
33+
title: 'Event 1',
34+
color: colors.yellow,
35+
start: startOfDay(new Date()),
36+
meta: {
37+
type: 'warning'
38+
}
39+
},
40+
{
41+
title: 'Event 2',
42+
color: colors.yellow,
43+
start: startOfDay(new Date()),
44+
meta: {
45+
type: 'warning'
46+
}
47+
},
48+
{
49+
title: 'Event 3',
50+
color: colors.blue,
51+
start: startOfDay(new Date()),
52+
meta: {
53+
type: 'info'
54+
}
55+
},
56+
{
57+
title: 'Event 4',
58+
color: colors.red,
59+
start: startOfDay(new Date()),
60+
meta: {
61+
type: 'danger'
62+
}
63+
},
64+
{
65+
title: 'Event 5',
66+
color: colors.red,
67+
start: startOfDay(new Date()),
68+
meta: {
69+
type: 'danger'
70+
}
71+
}
72+
];
73+
74+
groupedSimilarEvents: CalendarEvent[] = [];
75+
76+
ngOnInit() {
77+
// group any events together that have the same type and dates
78+
// use for when you have a lot of events on the week or day view at the same time
79+
this.groupedSimilarEvents = [];
80+
const processedEvents = new Set();
81+
this.events.forEach(event => {
82+
if (processedEvents.has(event)) {
83+
return;
84+
}
85+
const similarEvents = this.events.filter(otherEvent => {
86+
return (
87+
otherEvent !== event &&
88+
!processedEvents.has(otherEvent) &&
89+
isSameMinute(otherEvent.start, event.start) &&
90+
(isSameMinute(otherEvent.end, event.end) ||
91+
(!otherEvent.end && !event.end)) &&
92+
otherEvent.color.primary === event.color.primary &&
93+
otherEvent.color.secondary === event.color.secondary
94+
);
95+
});
96+
processedEvents.add(event);
97+
similarEvents.forEach(otherEvent => {
98+
processedEvents.add(otherEvent);
99+
});
100+
if (similarEvents.length > 0) {
101+
this.groupedSimilarEvents.push({
102+
title: `${similarEvents.length + 1} events`,
103+
color: event.color,
104+
start: event.start,
105+
end: event.end,
106+
meta: {
107+
groupedEvents: [event, ...similarEvents]
108+
}
109+
});
110+
} else {
111+
this.groupedSimilarEvents.push(event);
112+
}
113+
});
114+
}
115+
116+
beforeMonthViewRender({
117+
body
118+
}: {
119+
body: Array<CalendarMonthViewDay<EventGroupMeta>>;
120+
}): void {
121+
// month view has a different UX from the week and day view so we only really need to group by the type
122+
body.forEach(cell => {
123+
const groups = {};
124+
cell.events.forEach((event: CalendarEvent<EventGroupMeta>) => {
125+
groups[event.meta.type] = groups[event.meta.type] || [];
126+
groups[event.meta.type].push(event);
127+
});
128+
cell['eventGroups'] = Object.entries(groups);
129+
});
130+
}
131+
}

‎projects/demos/app/demo-modules/group-month-view-events/module.ts renamed to ‎projects/demos/app/demo-modules/group-similar-events/module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { CalendarModule, DateAdapter } from 'angular-calendar';
55
import { DemoUtilsModule } from '../demo-utils/module';
66
import { DemoComponent } from './component';
77
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
8+
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
89

910
@NgModule({
1011
imports: [
@@ -13,6 +14,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
1314
provide: DateAdapter,
1415
useFactory: adapterFactory
1516
}),
17+
NgbPopoverModule,
1618
DemoUtilsModule,
1719
RouterModule.forChild([{ path: '', component: DemoComponent }])
1820
],

‎projects/demos/app/demo-modules/group-month-view-events/sources.ts renamed to ‎projects/demos/app/demo-modules/group-similar-events/sources.ts

File renamed without changes.

‎projects/demos/app/demo-modules/group-similar-events/template.html

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate">
2+
</mwl-demo-utils-calendar-header>
3+
4+
<ng-template #customCellTemplate let-day="day" let-locale="locale">
5+
<div class="cal-cell-top">
6+
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0"
7+
>{{ day.badgeTotal }}</span
8+
>
9+
<span class="cal-day-number"
10+
>{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
11+
>
12+
</div>
13+
<div class="cell-totals">
14+
<span
15+
*ngFor="let group of day.eventGroups"
16+
class="badge badge-{{ group[0] }}"
17+
>
18+
{{ group[1].length }}
19+
</span>
20+
</div>
21+
</ng-template>
22+
23+
<ng-template
24+
#customEventTemplate
25+
let-weekEvent="weekEvent"
26+
let-tooltipPlacement="tooltipPlacement"
27+
let-eventClicked="eventClicked"
28+
let-tooltipTemplate="tooltipTemplate"
29+
let-tooltipAppendToBody="tooltipAppendToBody"
30+
let-tooltipDisabled="tooltipDisabled"
31+
let-tooltipDelay="tooltipDelay"
32+
let-column="column"
33+
>
34+
<ng-template #groupedEventsTemplate>
35+
<div style="min-width: 150px;">
36+
<div *ngFor="let event of weekEvent.event.meta.groupedEvents">
37+
<mwl-calendar-event-actions [event]="event">
38+
</mwl-calendar-event-actions>
39+
&ngsp;
40+
<mwl-calendar-event-title [event]="event" view="week">
41+
</mwl-calendar-event-title>
42+
</div>
43+
</div>
44+
</ng-template>
45+
46+
<div
47+
[ngbPopover]="groupedEventsTemplate"
48+
[disablePopover]="!weekEvent.event.meta.groupedEvents"
49+
class="cal-event"
50+
[ngStyle]="{
51+
backgroundColor: weekEvent.event.color?.secondary,
52+
borderColor: weekEvent.event.color?.primary
53+
}"
54+
[mwlCalendarTooltip]="
55+
!tooltipDisabled
56+
? (weekEvent.event.title
57+
| calendarEventTitle: 'weekTooltip':weekEvent.event)
58+
: ''
59+
"
60+
[tooltipPlacement]="tooltipPlacement"
61+
[tooltipEvent]="weekEvent.event"
62+
[tooltipTemplate]="tooltipTemplate"
63+
[tooltipAppendToBody]="tooltipAppendToBody"
64+
[tooltipDelay]="tooltipDelay"
65+
(mwlClick)="eventClicked.emit()"
66+
>
67+
<ng-container *ngIf="!weekEvent.event.meta.groupedEvents">
68+
<mwl-calendar-event-actions [event]="weekEvent.event">
69+
</mwl-calendar-event-actions>
70+
&ngsp;
71+
</ng-container>
72+
<mwl-calendar-event-title [event]="weekEvent.event" view="week">
73+
</mwl-calendar-event-title>
74+
</div>
75+
</ng-template>
76+
77+
<div [ngSwitch]="view">
78+
<mwl-calendar-month-view
79+
*ngSwitchCase="'month'"
80+
[viewDate]="viewDate"
81+
[events]="events"
82+
[cellTemplate]="customCellTemplate"
83+
(beforeViewRender)="beforeMonthViewRender($event)"
84+
[activeDayIsOpen]="true"
85+
>
86+
</mwl-calendar-month-view>
87+
<mwl-calendar-week-view
88+
*ngSwitchCase="'week'"
89+
[viewDate]="viewDate"
90+
[events]="groupedSimilarEvents"
91+
[eventTemplate]="customEventTemplate"
92+
>
93+
</mwl-calendar-week-view>
94+
<mwl-calendar-day-view
95+
*ngSwitchCase="'day'"
96+
[viewDate]="viewDate"
97+
[events]="groupedSimilarEvents"
98+
>
99+
</mwl-calendar-day-view>
100+
</div>

0 commit comments

Comments
 (0)