Last active
June 16, 2024 12:26
-
-
Save vgebrev/c7c8fd580be0d7a44d344ad3114547ad to your computer and use it in GitHub Desktop.
Angular Material theme for angular-calendar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "~@angular/material/prebuilt-themes/purple-green.css"; | |
@import "~angular-calendar/scss/angular-calendar.scss"; | |
@import "/md-angular-calendar-purple-green-theme.scss"; |
Author
vgebrev
commented
Jul 12, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment