diff --git a/apps/demo/project.json b/apps/demo/project.json
index d79586172..465fc474d 100644
--- a/apps/demo/project.json
+++ b/apps/demo/project.json
@@ -40,7 +40,7 @@
         "stylePreprocessorOptions": {
           "includePaths": ["packages"]
         },
-        "styles": ["apps/demo/src/styles.scss", "node_modules/angular-calendar/css/angular-calendar.css"],
+        "styles": ["apps/demo/src/styles.scss"],
         "scripts": []
       },
       "configurations": {
diff --git a/apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.ts b/apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.ts
index 2869b3a02..fbb9d0049 100644
--- a/apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.ts
+++ b/apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.ts
@@ -21,41 +21,46 @@ export class DocExtensionCalendarComponent implements OnInit {
   constructor(readonly calendarStore: DbxCalendarStore<TestCalendarEventData>) {}
 
   ngOnInit(): void {
-    const now = new Date();
-    const days = 90;
-    const startsAt = setHours(addMonths(now, -1), 12);
-
-    const timing = dateBlockTiming({ startsAt, duration: 10 }, days);
-    const eventData: TestCalendarEventData[] = range(0, days).map((i) => {
-      const event: TestCalendarEventData = {
-        i,
-        value: `${i}`
-      };
+    function makeEvents(name: string, iFilter = 1, minutes = 90) {
+      const now = new Date();
+      const days = 90;
+      const startsAt = setHours(addMonths(now, -1), 12);
 
-      return event;
-    });
-
-    const dateBlockCollection: DateBlockCollection<TestCalendarEventData> = {
-      timing,
-      blocks: eventData
-    };
-
-    const spans = expandDateBlockCollection(dateBlockCollection);
-    const events: CalendarEvent<TestCalendarEventData>[] = spans
-      .filter((x) => x.i % 2)
-      .map((x) => {
-        const { start, end } = durationSpanToDateRange(x);
-        const title = `Event ${x.i}`;
-
-        return {
-          id: x.i,
-          title,
-          start,
-          end,
-          meta: x
+      const timing = dateBlockTiming({ startsAt, duration: minutes }, days);
+      const eventData: TestCalendarEventData[] = range(0, days).map((i) => {
+        const event: TestCalendarEventData = {
+          i,
+          value: `${i}`
         };
+
+        return event;
       });
 
+      const dateBlockCollection: DateBlockCollection<TestCalendarEventData> = {
+        timing,
+        blocks: eventData
+      };
+
+      const spans = expandDateBlockCollection(dateBlockCollection);
+      const events: CalendarEvent<TestCalendarEventData>[] = spans
+        .filter((x) => x.i % iFilter)
+        .map((x) => {
+          const { start, end } = durationSpanToDateRange(x);
+          const title = `Event ${name} ${x.i}`;
+
+          return {
+            id: x.i,
+            title,
+            start,
+            end,
+            meta: x
+          };
+        });
+
+      return events;
+    }
+
+    const events = [...makeEvents('A', 1), ...makeEvents('B', 2, 120), ...makeEvents('C', 3, 200), ...makeEvents('D', 5, 360), ...makeEvents('E', 5, 600), ...makeEvents('F', 6, 30), ...makeEvents('G', 7, 30)];
     this.calendarStore.setEvents(events);
   }
 }
diff --git a/apps/demo/src/style/_doc.scss b/apps/demo/src/style/_doc.scss
index 672195419..9f25acb31 100644
--- a/apps/demo/src/style/_doc.scss
+++ b/apps/demo/src/style/_doc.scss
@@ -84,6 +84,7 @@ $doc-mat-theme: mat.define-light-theme(
     typography: null
   )
 ); // NOTE: setting density and typography to null is important!
+
 $doc-dbx-theme-with-banner-config: dbx.quick-define-dbx-config-via-banners(variables.$app-top-banner-height);
 $doc-theme: dbx.define-dbx-theme-config($doc-mat-theme, $doc-dbx-theme-with-banner-config);
 $doc-form-theme: dbx-form.define-dbx-form-theme-config($doc-theme);
@@ -96,17 +97,22 @@ This mixin creates the doc-theme components and elements for @angular/material a
   @include dbx-form.theme($root-selector, $doc-form-theme);
 }
 
+$dark-doc-primary: mat.define-palette(mat.$purple-palette);
+$dark-doc-accent: mat.define-palette(mat.$green-palette);
+$dark-doc-warn: mat.define-palette(mat.$red-palette);
 $dark-doc-mat-theme: mat.define-dark-theme(
   (
     color: (
-      primary: $doc-primary,
-      accent: $doc-accent,
-      warn: $doc-warn
+      primary: $dark-doc-primary,
+      accent: $dark-doc-accent,
+      warn: $dark-doc-warn
     ),
     density: null,
     typography: null
   )
-); // NOTE: setting density and typography to null is important!
+);
+
+// NOTE: setting density and typography to null is important!
 $dark-doc-theme: dbx.define-dbx-theme-config($dark-doc-mat-theme, $doc-dbx-theme-with-banner-config);
 $dark-doc-form-theme: dbx-form.define-dbx-form-theme-config($dark-doc-theme);
 
diff --git a/packages/dbx-web/src/lib/extension/calendar/_calendar.scss b/packages/dbx-web/src/lib/extension/calendar/_calendar.scss
index 903b4088d..e7eb0b44b 100644
--- a/packages/dbx-web/src/lib/extension/calendar/_calendar.scss
+++ b/packages/dbx-web/src/lib/extension/calendar/_calendar.scss
@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use '../../style/theming';
+@use './style/angular-calendar' as calendar;
 
 // MARK: Variables
 $calendar-header-height: theming.$content-navbar-height;
@@ -8,6 +10,9 @@ $calendar-scrollable-content-bottom-padding: 12px;
 
 // MARK: Mixin
 @mixin core() {
+  @include calendar.cal-core();
+  @include calendar.cal-theme(());
+
   .dbx-calendar {
     .dbx-calendar-title {
       font-weight: bold;
@@ -34,13 +39,50 @@ $calendar-scrollable-content-bottom-padding: 12px;
 }
 
 @mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $primary: map.get($color-config, 'primary');
+  $accent: map.get($color-config, 'accent');
+  $background: map.get($color-config, 'background');
+  $foreground: map.get($color-config, 'foreground');
+
+  $background-color: theming.get-color-from-palette($background, 'background');
+  $hover-color: theming.get-color-from-palette($background, 'hover');
+  $focused-color: theming.get-color-from-palette($background, 'focused-button');
+  $border-color: theming.get-color-from-palette($foreground, 'divider');
+  $text-color: theming.get-color-from-palette($foreground, 'text');
+
+  $event-icon-color: theming.get-color-from-palette($primary, 600);
+  $event-bg-color: theming.get-color-from-palette($primary, 800);
+  $event-text-color: theming.get-color-from-palette($primary, '800-contrast');
+  $weekend-color: theming.get-color-from-palette($accent, 500);
+  $badge-color: theming.get-color-from-palette($accent, 500);
+  $current-time-marker-color: theming.get-color-from-palette($accent, 400);
+
+  // @debug $foreground;
+  @debug $background;
+
+  #{calendar.$cal-event-icon-color-var}: $event-icon-color; // text/border color
+  #{calendar.$cal-event-color-primary-var}: $event-text-color; // text/border color
+  #{calendar.$cal-event-color-secondary-var}: $event-bg-color; // event background color
+  #{calendar.$cal-border-color-var}: $border-color;
+  #{calendar.$cal-bg-primary-var}: $background-color;
+  #{calendar.$cal-bg-secondary-var}: $hover-color;
+  #{calendar.$cal-bg-active-var}: $hover-color;
+  #{calendar.$cal-today-bg-var}: $hover-color;
+  #{calendar.$cal-weekend-color-var}: $weekend-color;
+  #{calendar.$cal-badge-color-var}: $badge-color;
+  #{calendar.$cal-current-time-marker-color-var}: $current-time-marker-color;
+  #{calendar.$cal-white-var}: #fff;
+  #{calendar.$cal-gray-var}: #555;
+  #{calendar.$cal-black-var}: #000;
+  #{calendar.$cal-gradient-var}: inset 0 0 10px 0 rgba($background-color, 0.2);
 }
 
 @mixin typography($typography-config) {
 }
 
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-action-snackbar') {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-calendar') {
     $color: theming.get-color-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
diff --git a/packages/dbx-web/src/lib/extension/calendar/style/_angular-calendar.scss b/packages/dbx-web/src/lib/extension/calendar/style/_angular-calendar.scss
new file mode 100644
index 000000000..2a6b8995d
--- /dev/null
+++ b/packages/dbx-web/src/lib/extension/calendar/style/_angular-calendar.scss
@@ -0,0 +1,23 @@
+@forward './variables';
+
+@use './common/calendar-tooltip' as tooltip;
+@use './day/calendar-day-view' as day;
+@use './week/calendar-week-view' as week;
+@use './month/calendar-month-view' as month;
+
+@mixin cal-core() {
+  @include tooltip.cal-tooltip-core();
+  @include day.cal-day-view-core();
+  @include week.cal-week-view-core();
+  @include month.cal-month-view-core();
+}
+
+@mixin cal-theme($overrides: null) {
+  @if ($overrides == null) {
+    $overrides: ();
+  }
+
+  @include tooltip.cal-tooltip-theme($overrides);
+  @include month.cal-month-view-theme($overrides);
+  @include week.cal-week-view-theme($overrides);
+}
diff --git a/packages/dbx-web/src/lib/extension/calendar/style/_variables.scss b/packages/dbx-web/src/lib/extension/calendar/style/_variables.scss
new file mode 100644
index 000000000..c9a0ecbc5
--- /dev/null
+++ b/packages/dbx-web/src/lib/extension/calendar/style/_variables.scss
@@ -0,0 +1,72 @@
+$cal-event-icon-color-var: --cal-event-icon-color;
+$cal-event-color-primary-var: --cal-event-color-primary;
+$cal-event-color-secondary-var: --cal-event-color-secondary;
+$cal-border-color-var: --cal-border-color;
+$cal-bg-primary-var: --cal-bg-primary;
+$cal-bg-secondary-var: --cal-bg-secondary;
+$cal-bg-active-var: --cal-bg-active;
+$cal-bg-active-dragover-var: --cal-bg-active-dragover;
+$cal-today-bg-var: --cal-today-bg;
+$cal-weekend-color-var: --cal-weekend-color;
+$cal-badge-color-var: --cal-badge-color;
+$cal-current-time-marker-color-var: --cal-current-time-marker-color;
+$cal-white-var: --cal-white;
+$cal-gray-var: --cal-gray;
+$cal-black-var: --cal-black;
+$cal-gradient-var: --cal-gradient;
+
+$cal-event-icon-color: var($cal-event-icon-color-var);
+$cal-event-color-primary: var($cal-event-color-primary-var);
+$cal-event-color-secondary: var($cal-event-color-secondary-var);
+$cal-border-color: var($cal-border-color-var);
+$cal-bg-primary: var($cal-bg-primary-var);
+$cal-bg-secondary: var($cal-bg-secondary-var);
+$cal-bg-active: var($cal-bg-active-var);
+$cal-bg-active-dragover: var($cal-bg-active-dragover-var);
+$cal-today-bg: var($cal-today-bg-var);
+$cal-weekend-color: var($cal-weekend-color-var);
+$cal-badge-color: var($cal-badge-color-var);
+$cal-current-time-marker-color: var($cal-current-time-marker-color-var);
+$cal-white: var($cal-white-var);
+$cal-gray: var($cal-gray-var);
+$cal-black: var($cal-black-var);
+$cal-gradient: var($cal-gradient-var);
+
+$cal-hint-opacity: 0.7;
+$cal-out-month-hint-opacity: 0.3;
+
+$cal-vars: () !default;
+$cal-vars: map-merge(
+  (
+    event-icon-color: $cal-event-icon-color,
+    // the default event primary color if not set on the event color object
+    event-color-primary: $cal-event-color-primary,
+    // the default event secondary color if not set on the event color object
+    event-color-secondary: $cal-event-color-secondary,
+    // the border color used between cells
+    border-color: $cal-border-color,
+    // the primary background of each component
+    bg-primary: $cal-bg-primary,
+    // the secondary background, used for alternating rows on the day and week views
+    bg-secondary: $cal-bg-secondary,
+    // the color used when hovering over cells and headers
+    bg-active: $cal-bg-active,
+    // the background color to mark today in the week view header
+    today-bg: $cal-today-bg,
+    // the color used to indicate a day is a weekend
+    weekend-color: $cal-weekend-color,
+    // the badge background color on the month view
+    badge-color: $cal-badge-color,
+    // the current time marker color on the week and day view
+    current-time-marker-color: $cal-current-time-marker-color,
+    // a standard white color used for tooltip text and month view event titles
+    white: $cal-white,
+    // a standard gray color used for the background color of the open month view events box
+    gray: $cal-gray,
+    // a standard black color used as the tooltip background and the gradient color of the open month view events
+    black: $cal-black,
+    // box shadow
+    gradient: $cal-gradient
+  ),
+  $cal-vars
+);
diff --git a/packages/dbx-web/src/lib/extension/calendar/style/common/calendar-tooltip.scss b/packages/dbx-web/src/lib/extension/calendar/style/common/calendar-tooltip.scss
new file mode 100644
index 000000000..7972b36d1
--- /dev/null
+++ b/packages/dbx-web/src/lib/extension/calendar/style/common/calendar-tooltip.scss
@@ -0,0 +1,113 @@
+@use 'sass:map';
+@use '../variables';
+
+@mixin cal-tooltip-core() {
+  .cal-tooltip {
+    position: absolute;
+    z-index: 1070;
+    display: block;
+    font-style: normal;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-break: auto;
+    line-height: 1.5;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    white-space: normal;
+    word-break: normal;
+    word-spacing: normal;
+    font-size: 11px;
+    word-wrap: break-word;
+    opacity: 0.9;
+  }
+
+  .cal-tooltip.cal-tooltip-top {
+    padding: 5px 0;
+    margin-top: -3px;
+  }
+
+  .cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px 5px 0;
+  }
+
+  .cal-tooltip.cal-tooltip-right {
+    padding: 0 5px;
+    margin-left: 3px;
+  }
+
+  .cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -5px;
+    border-width: 5px 5px 5px 0;
+  }
+
+  .cal-tooltip.cal-tooltip-bottom {
+    padding: 5px 0;
+    margin-top: 3px;
+  }
+
+  .cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 0 5px 5px;
+  }
+
+  .cal-tooltip.cal-tooltip-left {
+    padding: 0 5px;
+    margin-left: -3px;
+  }
+
+  .cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -5px;
+    border-width: 5px 0 5px 5px;
+  }
+
+  .cal-tooltip-inner {
+    max-width: 200px;
+    padding: 3px 8px;
+    text-align: center;
+    border-radius: 0.25rem;
+  }
+
+  .cal-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+
+@mixin cal-tooltip-theme($overrides) {
+  $theme: map-merge(variables.$cal-vars, $overrides);
+
+  .cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
+    border-top-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
+    border-right-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
+    border-bottom-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
+    border-left-color: map-get($theme, black);
+  }
+
+  .cal-tooltip-inner {
+    color: map-get($theme, white);
+    background-color: map-get($theme, black);
+  }
+}
diff --git a/packages/dbx-web/src/lib/extension/calendar/style/day/calendar-day-view.scss b/packages/dbx-web/src/lib/extension/calendar/style/day/calendar-day-view.scss
new file mode 100644
index 000000000..4ba19f9be
--- /dev/null
+++ b/packages/dbx-web/src/lib/extension/calendar/style/day/calendar-day-view.scss
@@ -0,0 +1,34 @@
+@use 'sass:map';
+@use '../variables';
+
+@mixin cal-day-view-core() {
+  .cal-day-view {
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    mwl-calendar-week-view-header {
+      display: none;
+    }
+
+    .cal-events-container {
+      margin-left: 70px;
+
+      [dir='rtl'] & {
+        margin-left: initial;
+        margin-right: 70px;
+      }
+    }
+
+    .cal-day-column {
+      border-left: 0;
+    }
+
+    .cal-current-time-marker {
+      margin-left: 70px;
+      width: calc(100% - 70px);
+
+      [dir='rtl'] & {
+        margin-left: initial;
+        margin-right: 70px;
+      }
+    }
+  }
+}
diff --git a/packages/dbx-web/src/lib/extension/calendar/style/month/calendar-month-view.scss b/packages/dbx-web/src/lib/extension/calendar/style/month/calendar-month-view.scss
new file mode 100644
index 000000000..d572eb37d
--- /dev/null
+++ b/packages/dbx-web/src/lib/extension/calendar/style/month/calendar-month-view.scss
@@ -0,0 +1,217 @@
+@use 'sass:map';
+@use '../variables';
+
+@mixin cal-month-view-core() {
+  .cal-month-view {
+    .cal-header {
+      text-align: center;
+      font-weight: bolder;
+    }
+
+    .cal-header .cal-cell {
+      padding: 5px 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+      white-space: nowrap;
+    }
+
+    .cal-days {
+      border: 1px solid;
+      border-bottom: 0;
+    }
+
+    .cal-cell-top {
+      min-height: 78px;
+      flex: 1;
+    }
+
+    .cal-cell-row {
+      display: flex;
+    }
+
+    .cal-cell {
+      float: left;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+
+      .cal-event {
+        pointer-events: all !important;
+      }
+    }
+
+    .cal-day-cell {
+      min-height: 100px;
+
+      // ie11 hack for https://github.com/mattlewis92/angular-calendar/issues/501
+      @media all and (-ms-high-contrast: none) {
+        display: block;
+      }
+    }
+
+    .cal-day-cell:not(:last-child) {
+      border-right: 1px solid;
+
+      [dir='rtl'] & {
+        border-right: initial;
+        border-left: 1px solid;
+      }
+    }
+
+    .cal-days .cal-cell-row {
+      border-bottom: 1px solid;
+    }
+
+    .cal-day-badge {
+      margin-top: 18px;
+      margin-left: 10px;
+      display: inline-block;
+      min-width: 10px;
+      padding: 3px 7px;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: middle;
+      border-radius: 10px;
+    }
+
+    .cal-day-number {
+      font-size: 1.2em;
+      font-weight: 400;
+      opacity: variables.$cal-hint-opacity;
+      margin-top: 15px;
+      margin-right: 15px;
+      float: right;
+      margin-bottom: 10px;
+    }
+
+    .cal-events {
+      flex: 1;
+      align-items: flex-end;
+      margin: 3px;
+      line-height: 10px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .cal-event {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      display: inline-block;
+      margin: 2px;
+    }
+
+    .cal-day-cell.cal-in-month.cal-has-events {
+      cursor: pointer;
+    }
+
+    .cal-day-cell.cal-out-month .cal-day-number {
+      opacity: variables.$cal-out-month-hint-opacity;
+      cursor: default;
+    }
+
+    .cal-day-cell.cal-today .cal-day-number {
+      font-size: 1.9em;
+    }
+
+    .cal-open-day-events {
+      padding: 15px;
+    }
+
+    .cal-open-day-events .cal-event {
+      position: relative;
+      top: 2px;
+    }
+
+    .cal-out-month {
+      .cal-day-badge,
+      .cal-event {
+        opacity: 0.5;
+      }
+    }
+
+    .cal-draggable {
+      cursor: move;
+    }
+
+    .cal-drag-active * {
+      pointer-events: none;
+    }
+
+    .cal-event-title {
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@mixin cal-month-view-theme($overrides) {
+  $theme: map-merge(variables.$cal-vars, $overrides);
+
+  .cal-month-view {
+    background-color: map-get($theme, bg-primary);
+
+    .cal-cell-row:hover {
+      background-color: map-get($theme, bg-secondary);
+    }
+
+    .cal-cell-row .cal-cell:hover,
+    .cal-cell.cal-has-events.cal-open {
+      background-color: map-get($theme, bg-active);
+    }
+
+    .cal-days {
+      border-color: map-get($theme, border-color);
+    }
+
+    .cal-day-cell:not(:last-child) {
+      border-right-color: map-get($theme, border-color);
+
+      [dir='rtl'] & {
+        border-right-color: initial;
+        border-left-color: map-get($theme, border-color);
+      }
+    }
+
+    .cal-days .cal-cell-row {
+      border-bottom-color: map-get($theme, border-color);
+    }
+
+    .cal-day-badge {
+      background-color: map-get($theme, badge-color);
+      color: map-get($theme, white);
+    }
+
+    .cal-event {
+      background-color: map-get($theme, event-icon-color);
+      border-color: map-get($theme, event-color-secondary);
+      color: map-get($theme, white);
+    }
+
+    .cal-day-cell.cal-weekend .cal-day-number {
+      color: map-get($theme, weekend-color);
+    }
+
+    .cal-day-cell.cal-today {
+      background-color: map-get($theme, today-bg);
+    }
+
+    .cal-day-cell.cal-drag-over {
+      background-color: map-get($theme, bg-active-dragover);
+    }
+
+    .cal-open-day-events {
+      color: map-get($theme, white);
+      background-color: map-get($theme, gray);
+      box-shadow: map-get($theme, gradient);
+    }
+  }
+}
diff --git a/packages/dbx-web/src/lib/extension/calendar/style/week/calendar-week-view.scss b/packages/dbx-web/src/lib/extension/calendar/style/week/calendar-week-view.scss
new file mode 100644
index 000000000..f572261da
--- /dev/null
+++ b/packages/dbx-web/src/lib/extension/calendar/style/week/calendar-week-view.scss
@@ -0,0 +1,377 @@
+@use 'sass:map';
+@use '../variables';
+
+@mixin cal-week-view-core() {
+  .cal-week-view {
+    * {
+      box-sizing: border-box;
+    }
+
+    .cal-day-headers {
+      display: flex;
+      padding-left: 70px;
+      border: 1px solid;
+
+      [dir='rtl'] & {
+        padding-left: initial;
+        padding-right: 70px;
+      }
+    }
+
+    .cal-day-headers .cal-header {
+      flex: 1;
+      text-align: center;
+      padding: 5px;
+
+      &:not(:last-child) {
+        border-right: 1px solid;
+
+        [dir='rtl'] & {
+          border-right: initial;
+          border-left: 1px solid;
+        }
+      }
+
+      &:first-child {
+        border-left: 1px solid;
+
+        [dir='rtl'] & {
+          border-left: initial;
+          border-right: 1px solid;
+        }
+      }
+    }
+
+    .cal-day-headers span {
+      font-weight: 400;
+      opacity: variables.$cal-hint-opacity;
+    }
+
+    .cal-day-column {
+      flex-grow: 1;
+      border-left: solid 1px;
+
+      [dir='rtl'] & {
+        border-left: initial;
+        border-right: solid 1px;
+      }
+    }
+
+    .cal-event {
+      font-size: 12px;
+      border: 1px solid;
+      direction: ltr;
+    }
+
+    .cal-time-label-column {
+      width: 70px;
+      height: 100%;
+    }
+
+    .cal-current-time-marker {
+      position: absolute;
+      // width: 100%; // breaks out of box sometimes
+      height: 2px;
+      z-index: 2;
+    }
+
+    .cal-all-day-events {
+      border: solid 1px;
+      border-top: 0;
+      border-bottom-width: 3px;
+      padding-top: 3px;
+      position: relative;
+
+      .cal-day-columns {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        position: absolute;
+        top: 0;
+        z-index: 0;
+      }
+
+      .cal-events-row {
+        position: relative;
+        height: 31px;
+        margin-left: 70px;
+
+        [dir='rtl'] & {
+          margin-left: initial;
+          margin-right: 70px;
+        }
+      }
+
+      .cal-event-container {
+        display: inline-block;
+        position: absolute;
+
+        &.resize-active {
+          z-index: 1;
+          pointer-events: none;
+        }
+      }
+
+      .cal-event {
+        padding: 0 5px;
+        margin-left: 2px;
+        margin-right: 2px;
+        height: 28px;
+        line-height: 28px;
+      }
+
+      .cal-starts-within-week .cal-event {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        [dir='rtl'] & {
+          border-top-left-radius: initial;
+          border-bottom-left-radius: initial;
+          border-top-right-radius: 5px !important;
+          border-bottom-right-radius: 5px !important;
+        }
+      }
+
+      .cal-ends-within-week .cal-event {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+
+        [dir='rtl'] & {
+          border-top-right-radius: initial;
+          border-bottom-right-radius: initial;
+          border-top-left-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
+      }
+
+      .cal-time-label-column {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+      }
+
+      .cal-resize-handle {
+        width: 6px;
+        height: 100%;
+        cursor: col-resize;
+        position: absolute;
+        top: 0;
+
+        &.cal-resize-handle-after-end {
+          right: 0;
+
+          [dir='rtl'] & {
+            right: initial;
+            left: 0;
+          }
+        }
+      }
+    }
+
+    .cal-event,
+    .cal-header {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .cal-drag-active {
+      pointer-events: none;
+      z-index: 1;
+
+      & * {
+        pointer-events: none;
+      }
+    }
+
+    .cal-time-events {
+      position: relative;
+      border: solid 1px;
+      border-top: 0;
+      display: flex;
+
+      .cal-day-columns {
+        display: flex;
+        flex-grow: 1;
+      }
+
+      .cal-day-column {
+        position: relative;
+      }
+
+      .cal-events-container {
+        position: relative;
+      }
+
+      .cal-event-container {
+        position: absolute;
+        z-index: 1;
+      }
+
+      .cal-event {
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        margin: 1px;
+        padding: 0 5px;
+        line-height: 25px;
+      }
+
+      .cal-resize-handle {
+        width: 100%;
+        height: 4px;
+        cursor: row-resize;
+        position: absolute;
+
+        &.cal-resize-handle-after-end {
+          bottom: 0;
+        }
+      }
+    }
+
+    .cal-hour-segment {
+      position: relative;
+
+      &::after {
+        content: '\00a0';
+      }
+    }
+
+    .cal-event-container:not(.cal-draggable) {
+      cursor: pointer;
+    }
+
+    .cal-draggable {
+      cursor: move;
+    }
+
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    mwl-calendar-week-view-hour-segment, /* fix for https://github.com/mattlewis92/angular-calendar/issues/260*/
+    .cal-hour-segment {
+      display: block;
+    }
+
+    .cal-hour:not(:last-child) .cal-hour-segment,
+    .cal-hour:last-child :not(:last-child) .cal-hour-segment {
+      border-bottom: thin dashed;
+    }
+
+    .cal-time {
+      font-weight: bold;
+      padding-top: 5px;
+      width: 70px;
+      text-align: center;
+    }
+
+    .cal-hour-segment.cal-after-hour-start {
+      .cal-time {
+        display: none;
+      }
+    }
+
+    .cal-starts-within-day .cal-event {
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+
+    .cal-ends-within-day .cal-event {
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+  }
+}
+
+@mixin cal-week-view-theme($overrides) {
+  $theme: map-merge(variables.$cal-vars, $overrides);
+
+  .cal-week-view {
+    background-color: map-get($theme, bg-primary);
+    border-top: solid 1px map-get($theme, border-color);
+
+    .cal-day-headers {
+      border-color: map-get($theme, border-color);
+      border-top: 0;
+    }
+
+    .cal-day-headers .cal-header {
+      &:not(:last-child) {
+        border-right-color: map-get($theme, border-color);
+
+        [dir='rtl'] & {
+          border-right-color: initial;
+          border-left: solid 1px map-get($theme, border-color) !important;
+        }
+      }
+
+      &:first-child {
+        border-left-color: map-get($theme, border-color);
+
+        [dir='rtl'] & {
+          border-left-color: initial;
+          border-right-color: map-get($theme, border-color);
+        }
+      }
+    }
+
+    .cal-day-headers .cal-header:hover,
+    .cal-day-headers .cal-drag-over {
+      background-color: map-get($theme, bg-active);
+    }
+
+    .cal-day-column {
+      border-left-color: map-get($theme, border-color);
+
+      [dir='rtl'] & {
+        border-left-color: initial;
+        border-right-color: map-get($theme, border-color);
+      }
+    }
+
+    .cal-event {
+      background-color: map-get($theme, event-color-secondary);
+      border-color: map-get($theme, event-color-primary);
+      color: map-get($theme, event-color-primary);
+    }
+
+    .cal-all-day-events {
+      border-color: map-get($theme, border-color);
+    }
+
+    .cal-header.cal-today {
+      background-color: map-get($theme, today-bg);
+    }
+
+    .cal-header.cal-weekend span {
+      color: map-get($theme, weekend-color);
+    }
+
+    .cal-time-events {
+      border-color: map-get($theme, border-color);
+
+      .cal-day-columns {
+        &:not(.cal-resize-active) {
+          .cal-hour-segment:hover {
+            background-color: map-get($theme, bg-active);
+          }
+        }
+      }
+    }
+
+    .cal-hour-odd {
+      background-color: map-get($theme, bg-secondary);
+    }
+
+    .cal-drag-over .cal-hour-segment {
+      background-color: map-get($theme, bg-active);
+    }
+
+    .cal-hour:not(:last-child) .cal-hour-segment,
+    .cal-hour:last-child :not(:last-child) .cal-hour-segment {
+      border-bottom-color: map-get($theme, border-color);
+    }
+
+    .cal-current-time-marker {
+      background-color: map-get($theme, current-time-marker-color);
+    }
+  }
+}
diff --git a/setup/templates/apps/app/src/style/_app.scss b/setup/templates/apps/app/src/style/_app.scss
index d3375987c..fafc18d5a 100644
--- a/setup/templates/apps/app/src/style/_app.scss
+++ b/setup/templates/apps/app/src/style/_app.scss
@@ -86,7 +86,11 @@ This mixin creates the app-theme components and elements for @angular/material a
   @include dbx-form.theme($root-selector, $app-form-theme);
 }
 
-$dark-app-mat-theme: mat.define-dark-theme((color: (primary: $app-primary, accent: $app-accent, warn: $app-warn), density: null, typography: null));    // NOTE: setting density and typography to null is important!
+$dark-app-primary: mat.define-palette(mat.$purple-palette);
+$dark-app-accent: mat.define-palette(mat.$green-palette);
+$dark-app-warn: mat.define-palette(mat.$red-palette);
+
+$dark-app-mat-theme: mat.define-dark-theme((color: (primary: $dark-app-primary, accent: $dark-app-accent, warn: $dark-app-warn), density: null, typography: null));    // NOTE: setting density and typography to null is important!
 $dark-app-theme: dbx.define-dbx-theme-config($dark-app-mat-theme, $app-dbx-theme-with-banner-config);
 $dark-app-form-theme: dbx-form.define-dbx-form-theme-config($dark-app-theme);