Angular Material theme for angular-calendar

md-angular-calendar-purple-green-theme.scss

// Material Design theme for mattlewis92's angular-calendar component
// angular-calendar component: https://github.com/mattlewis92/angular-calendar
// Angular Material: https://material.angular.io/

@import '~@angular/material/theming';
@include mat-core();

// Based on the Angular Material purple-green prebuilt theme. 
// Pick differnet colors and/or switch to a light background theme here:
$primary: mat-palette($mat-purple, 700);
$accent:  mat-palette($mat-green, A200, A100, A400);
$theme: mat-dark-theme($primary, $accent);

@mixin calendar-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $background: map-get($theme, background);

    .cal-month-view {
        .cal-open-day-events {
            box-shadow: none;
            background-color: mat-color($background, card);
            border-bottom: 1px solid white;
        }

        .cal-day-cell.cal-weekend .cal-day-number {
            color: mat-color($primary, A100);
        }

        .cal-day-cell.cal-today .cal-day-number {
            color: mat-color($primary, default-contrast);
            opacity: 1;
        }

        .cal-day-cell.cal-drag-over {
            background-color: mat-color($primary, 600) !important;
        }

        .cal-day-cell.cal-today.cal-drag-over {
            background-color: mat-color($primary, 600) !important;
        }

        .cal-cell-row {
            .cal-cell.cal-today:hover {
                background-color: mat-color($primary, 600);
            }

            .cal-cell:hover {
                background-color: mat-color($background, hover);
            }
        }

        .cal-cell.cal-has-events.cal-open {
            background-color:mat-color($background, card);
            color: mat-color($primary, A100);
        }
        
        // The cal-event-highlight class was added to angular-calendar in version 0.26.0-alpha.26 
        // For earlier versions, you will need to specify the event secondary color in code (eg #8E24AA) 
        .cal-cell.cal-event-highlight {
            background-color: mat-color($primary, 600) !important;
        }

        .cal-day-cell.cal-today.cal-open, 
        .cal-day-cell.cal-today {
            background-color:mat-color($primary);
            color: mat-color($primary, A100);
        }

        .cal-day-badge {
            background-color: mat-color($accent);
            color: mat-color($accent, default-contrast);
        }

        .cal-cell-row:hover {
            background-color: mat-color($background, card);
        }

        .cal-event {
            background-color: mat-color($accent);
            width: 16px;
            height: 16px;
            border-radius: 2px;            
            border-color: mat-color($accent, darker);
        }
    }

    .cal-week-view {
        .cal-day-headers {
            .cal-header:hover,
            .cal-drag-over {
                background-color: mat-color($background, card); 
            }
        }

        .cal-header.cal-weekend span {
            color: mat-color($primary, A100); 
        }
        
        .cal-header.cal-today {
            background-color:mat-color($primary);

            span {
                color:mat-color($primary, default-contrast);
                opacity: 1;
            }
        }

        .cal-header.cal-today:hover {
            background-color: mat-color($primary, 600);
        }

        .cal-event {
            background-color: mat-color($primary, 600);
            color: mat-color($primary, default-contrast);
            border: 1px solid mat-color($primary, lighter);
        }

        .cal-starts-within-week .cal-event {
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px; 
        }
        
        .cal-ends-within-week .cal-event {
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px; 
        }
    }

    .cal-day-view {
        .cal-hour:nth-child(odd) {
            background-color: mat-color($background, background); 
        }
        .cal-hour:nth-child(even) {
            background-color: mat-color($background, card); 
        }

        .cal-hour-segment:hover,
        .cal-drag-over .cal-hour-segment {
            background-color: mat-color($background, hover); 
        }

        .cal-hour:not(:last-child) .cal-hour-segment,
        .cal-hour:last-child :not(:last-child) .cal-hour-segment {
          border-bottom: thin dashed mat-color($background, unselected-chip); 
        }

        .cal-event {
            background-color: mat-color($primary, 600);
            color: mat-color($primary, default-contrast);
            border: 1px solid mat-color($primary, lighter);
        }

        .cal-starts-within-day .cal-event {
            border-top-left-radius: 2px;
            border-top-right-radius: 2px; 
        }
        .cal-ends-within-day .cal-event {
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px; 
        }
    }
}

@include calendar-theme($theme);

styles.scss

@import "~@angular/material/prebuilt-themes/purple-green.css";
@import "~angular-calendar/scss/angular-calendar.scss";
@import "/md-angular-calendar-purple-green-theme.scss";