diff --git a/projects/demos/app/demo-app.module.ts b/projects/demos/app/demo-app.module.ts
index ef61b3805..91dd69ae1 100644
--- a/projects/demos/app/demo-app.module.ts
+++ b/projects/demos/app/demo-app.module.ts
@@ -303,13 +303,13 @@ import { ClipboardModule } from 'ngx-clipboard';
           }
         },
         {
-          path: 'group-month-view-events',
+          path: 'group-similar-events',
           loadChildren: () =>
-            import('./demo-modules/group-month-view-events/module').then(
+            import('./demo-modules/group-similar-events/module').then(
               m => m.DemoModule
             ),
           data: {
-            label: 'Group month view events'
+            label: 'Group similar events'
           }
         },
         {
diff --git a/projects/demos/app/demo-modules/group-month-view-events/component.ts b/projects/demos/app/demo-modules/group-month-view-events/component.ts
deleted file mode 100644
index ad280ccee..000000000
--- a/projects/demos/app/demo-modules/group-month-view-events/component.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  CalendarEvent,
-  CalendarMonthViewDay,
-  CalendarView
-} from 'angular-calendar';
-import { colors } from '../demo-utils/colors';
-
-@Component({
-  selector: 'mwl-demo-component',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: 'template.html',
-  styles: [
-    `
-      .cell-totals {
-        margin: 5px;
-        text-align: center;
-      }
-      .badge {
-        margin-right: 5px;
-      }
-    `
-  ]
-})
-export class DemoComponent {
-  view: CalendarView = CalendarView.Month;
-
-  viewDate: Date = new Date();
-
-  events: CalendarEvent[] = [
-    {
-      title: 'Event 1',
-      color: colors.yellow,
-      start: new Date(),
-      meta: {
-        type: 'warning'
-      }
-    },
-    {
-      title: 'Event 2',
-      color: colors.yellow,
-      start: new Date(),
-      meta: {
-        type: 'warning'
-      }
-    },
-    {
-      title: 'Event 3',
-      color: colors.blue,
-      start: new Date(),
-      meta: {
-        type: 'info'
-      }
-    },
-    {
-      title: 'Event 4',
-      color: colors.red,
-      start: new Date(),
-      meta: {
-        type: 'danger'
-      }
-    },
-    {
-      title: 'Event 5',
-      color: colors.red,
-      start: new Date(),
-      meta: {
-        type: 'danger'
-      }
-    }
-  ];
-
-  beforeMonthViewRender({ body }: { body: CalendarMonthViewDay[] }): void {
-    body.forEach(cell => {
-      const groups: any = {};
-      cell.events.forEach((event: CalendarEvent<{ type: string }>) => {
-        groups[event.meta.type] = groups[event.meta.type] || [];
-        groups[event.meta.type].push(event);
-      });
-      cell['eventGroups'] = Object.entries(groups);
-    });
-  }
-}
diff --git a/projects/demos/app/demo-modules/group-month-view-events/template.html b/projects/demos/app/demo-modules/group-month-view-events/template.html
deleted file mode 100644
index 267558cda..000000000
--- a/projects/demos/app/demo-modules/group-month-view-events/template.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate">
-</mwl-demo-utils-calendar-header>
-
-<ng-template #customCellTemplate let-day="day" let-locale="locale">
-  <div class="cal-cell-top">
-    <span class="cal-day-badge" *ngIf="day.badgeTotal > 0"
-      >{{ day.badgeTotal }}</span
-    >
-    <span class="cal-day-number"
-      >{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
-    >
-  </div>
-  <div class="cell-totals">
-    <span
-      *ngFor="let group of day.eventGroups"
-      class="badge badge-{{ group[0] }}"
-    >
-      {{ group[1].length }}
-    </span>
-  </div>
-</ng-template>
-
-<div [ngSwitch]="view">
-  <mwl-calendar-month-view
-    *ngSwitchCase="'month'"
-    [viewDate]="viewDate"
-    [events]="events"
-    [cellTemplate]="customCellTemplate"
-    (beforeViewRender)="beforeMonthViewRender($event)"
-    [activeDayIsOpen]="true"
-  >
-  </mwl-calendar-month-view>
-  <mwl-calendar-week-view
-    *ngSwitchCase="'week'"
-    [viewDate]="viewDate"
-    [events]="events"
-  >
-  </mwl-calendar-week-view>
-  <mwl-calendar-day-view
-    *ngSwitchCase="'day'"
-    [viewDate]="viewDate"
-    [events]="events"
-  >
-  </mwl-calendar-day-view>
-</div>
diff --git a/projects/demos/app/demo-modules/group-similar-events/component.ts b/projects/demos/app/demo-modules/group-similar-events/component.ts
new file mode 100644
index 000000000..e907693f6
--- /dev/null
+++ b/projects/demos/app/demo-modules/group-similar-events/component.ts
@@ -0,0 +1,135 @@
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import {
+  CalendarEvent,
+  CalendarMonthViewDay,
+  CalendarView
+} from 'angular-calendar';
+import { colors } from '../demo-utils/colors';
+import { isSameMinute, startOfDay } from 'date-fns';
+
+interface EventGroupMeta {
+  type: string;
+}
+
+@Component({
+  selector: 'mwl-demo-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './template.html',
+  styles: [
+    `
+      .cell-totals {
+        margin: 5px;
+        text-align: center;
+      }
+      .badge {
+        margin-right: 5px;
+      }
+    `
+  ]
+})
+export class DemoComponent implements OnInit {
+  view: CalendarView = CalendarView.Month;
+
+  viewDate: Date = new Date();
+
+  events: CalendarEvent[] = [
+    {
+      title: 'Event 1',
+      color: colors.yellow,
+      start: startOfDay(new Date()),
+      meta: {
+        type: 'warning'
+      }
+    },
+    {
+      title: 'Event 2',
+      color: colors.yellow,
+      start: startOfDay(new Date()),
+      meta: {
+        type: 'warning'
+      }
+    },
+    {
+      title: 'Event 3',
+      color: colors.blue,
+      start: startOfDay(new Date()),
+      meta: {
+        type: 'info'
+      }
+    },
+    {
+      title: 'Event 4',
+      color: colors.red,
+      start: startOfDay(new Date()),
+      meta: {
+        type: 'danger'
+      }
+    },
+    {
+      title: 'Event 5',
+      color: colors.red,
+      start: startOfDay(new Date()),
+      meta: {
+        type: 'danger'
+      }
+    }
+  ];
+
+  groupedSimilarEvents: CalendarEvent[] = [];
+
+  ngOnInit() {
+    // group any events together that have the same type and dates
+    // use for when you have a lot of events on the week or day view at the same time
+    this.groupedSimilarEvents = [];
+    const processedEvents = new Set();
+    this.events.forEach(event => {
+      if (processedEvents.has(event)) {
+        return;
+      }
+      const similarEvents = this.events.filter(otherEvent => {
+        return (
+          otherEvent !== event &&
+          !processedEvents.has(otherEvent) &&
+          isSameMinute(otherEvent.start, event.start) &&
+          (isSameMinute(otherEvent.end, event.end) ||
+            (!otherEvent.end && !event.end)) &&
+          otherEvent.color.primary === event.color.primary &&
+          otherEvent.color.secondary === event.color.secondary
+        );
+      });
+      processedEvents.add(event);
+      similarEvents.forEach(otherEvent => {
+        processedEvents.add(otherEvent);
+      });
+      if (similarEvents.length > 0) {
+        this.groupedSimilarEvents.push({
+          title: `${similarEvents.length + 1} events`,
+          color: event.color,
+          start: event.start,
+          end: event.end,
+          meta: {
+            groupedEvents: [event, ...similarEvents]
+          }
+        });
+      } else {
+        this.groupedSimilarEvents.push(event);
+      }
+    });
+  }
+
+  beforeMonthViewRender({
+    body
+  }: {
+    body: Array<CalendarMonthViewDay<EventGroupMeta>>;
+  }): void {
+    // month view has a different UX from the week and day view so we only really need to group by the type
+    body.forEach(cell => {
+      const groups = {};
+      cell.events.forEach((event: CalendarEvent<EventGroupMeta>) => {
+        groups[event.meta.type] = groups[event.meta.type] || [];
+        groups[event.meta.type].push(event);
+      });
+      cell['eventGroups'] = Object.entries(groups);
+    });
+  }
+}
diff --git a/projects/demos/app/demo-modules/group-month-view-events/module.ts b/projects/demos/app/demo-modules/group-similar-events/module.ts
similarity index 89%
rename from projects/demos/app/demo-modules/group-month-view-events/module.ts
rename to projects/demos/app/demo-modules/group-similar-events/module.ts
index 2e487440e..efc9575df 100644
--- a/projects/demos/app/demo-modules/group-month-view-events/module.ts
+++ b/projects/demos/app/demo-modules/group-similar-events/module.ts
@@ -5,6 +5,7 @@ import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   imports: [
@@ -13,6 +14,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
       provide: DateAdapter,
       useFactory: adapterFactory
     }),
+    NgbPopoverModule,
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],
diff --git a/projects/demos/app/demo-modules/group-month-view-events/sources.ts b/projects/demos/app/demo-modules/group-similar-events/sources.ts
similarity index 100%
rename from projects/demos/app/demo-modules/group-month-view-events/sources.ts
rename to projects/demos/app/demo-modules/group-similar-events/sources.ts
diff --git a/projects/demos/app/demo-modules/group-similar-events/template.html b/projects/demos/app/demo-modules/group-similar-events/template.html
new file mode 100644
index 000000000..062dc9095
--- /dev/null
+++ b/projects/demos/app/demo-modules/group-similar-events/template.html
@@ -0,0 +1,101 @@
+<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate">
+</mwl-demo-utils-calendar-header>
+
+<ng-template #customCellTemplate let-day="day" let-locale="locale">
+  <div class="cal-cell-top">
+    <span class="cal-day-badge" *ngIf="day.badgeTotal > 0"
+      >{{ day.badgeTotal }}</span
+    >
+    <span class="cal-day-number"
+      >{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
+    >
+  </div>
+  <div class="cell-totals">
+    <span
+      *ngFor="let group of day.eventGroups"
+      class="badge badge-{{ group[0] }}"
+    >
+      {{ group[1].length }}
+    </span>
+  </div>
+</ng-template>
+
+<ng-template
+  #customEventTemplate
+  let-weekEvent="weekEvent"
+  let-tooltipPlacement="tooltipPlacement"
+  let-eventClicked="eventClicked"
+  let-tooltipTemplate="tooltipTemplate"
+  let-tooltipAppendToBody="tooltipAppendToBody"
+  let-tooltipDisabled="tooltipDisabled"
+  let-tooltipDelay="tooltipDelay"
+  let-column="column"
+>
+  <ng-template #groupedEventsTemplate>
+    <div style="min-width: 150px;">
+      <div *ngFor="let event of weekEvent.event.meta.groupedEvents">
+        <mwl-calendar-event-actions [event]="event">
+        </mwl-calendar-event-actions>
+        &ngsp;
+        <mwl-calendar-event-title [event]="event" view="week">
+        </mwl-calendar-event-title>
+      </div>
+    </div>
+  </ng-template>
+
+  <div
+    [ngbPopover]="groupedEventsTemplate"
+    [disablePopover]="!weekEvent.event.meta.groupedEvents"
+    class="cal-event"
+    [ngStyle]="{
+          backgroundColor: weekEvent.event.color?.secondary,
+          borderColor: weekEvent.event.color?.primary
+        }"
+    [mwlCalendarTooltip]="
+          !tooltipDisabled && !weekEvent.event.meta.groupedEvents
+            ? (weekEvent.event.title
+              | calendarEventTitle: 'weekTooltip':weekEvent.event)
+            : ''
+        "
+    [tooltipPlacement]="tooltipPlacement"
+    [tooltipEvent]="weekEvent.event"
+    [tooltipTemplate]="tooltipTemplate"
+    [tooltipAppendToBody]="tooltipAppendToBody"
+    [tooltipDelay]="tooltipDelay"
+    (mwlClick)="eventClicked.emit()"
+  >
+    <ng-container *ngIf="!weekEvent.event.meta.groupedEvents">
+      <mwl-calendar-event-actions [event]="weekEvent.event">
+      </mwl-calendar-event-actions>
+      &ngsp;
+    </ng-container>
+    <mwl-calendar-event-title [event]="weekEvent.event" view="week">
+    </mwl-calendar-event-title>
+  </div>
+</ng-template>
+
+<div [ngSwitch]="view">
+  <mwl-calendar-month-view
+    *ngSwitchCase="'month'"
+    [viewDate]="viewDate"
+    [events]="events"
+    [cellTemplate]="customCellTemplate"
+    (beforeViewRender)="beforeMonthViewRender($event)"
+    [activeDayIsOpen]="true"
+  >
+  </mwl-calendar-month-view>
+  <mwl-calendar-week-view
+    *ngSwitchCase="'week'"
+    [viewDate]="viewDate"
+    [events]="groupedSimilarEvents"
+    [eventTemplate]="customEventTemplate"
+  >
+  </mwl-calendar-week-view>
+  <mwl-calendar-day-view
+    *ngSwitchCase="'day'"
+    [viewDate]="viewDate"
+    [events]="groupedSimilarEvents"
+    [eventTemplate]="customEventTemplate"
+  >
+  </mwl-calendar-day-view>
+</div>