bradberger/angular-material-calendar

$calendar-md-background-active: rgba(0, 0, 0, .02) !default;
$calendar-md-shadow-active: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12) !default;
$calendar-md-border: 1px solid rgba(0, 0, 0, .12) !default;
$calendar-md-background-hover: rgba(0, 0, 0, .04) !default;
$calendar-md-event-background: rgba(150, 202, 45, 1) !default;

calendar-md {

    display: block;
    max-height: 100%;

    .md-toolbar-tools {
        h2 {
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .moveNext {
            -ms-transform: translate3d(0%,0%,0) rotate(180deg);
            -webkit-transform: translate3d(0%,0%,0) rotate(180deg);
            transform: translate3d(0%,0%,0) rotate(180deg);
        }
    }

    md-content {
        > md-content {
            // Week row, agenda view.
            border: $calendar-md-border;

            &.agenda {
                // Week container
                > * {
                    > * {
                        &.disabled {
                            color: rgba(0, 0, 0, .3);
                            pointer-events: none;
                            cursor: auto;
                        }
                        &.has-events {
                            background-color: $calendar-md-event-background;
                        }
                        border-bottom: $calendar-md-border;
                        // Date label.
                        :first-child {
                            padding: 12px;
                            width: 200px;
                            text-align: right;
                            color: rgba(0,0,0,.75);
                            font-weight: 100;
                            overflow-x: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        // Day content container
                        :not(:first-child) {
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }

            // All day cells, don't make them too small, even on tiny screens.
            > * > * {
                min-width: 48px;
            }

            // Week row (calendar view.)
            &.calendar {

                // Subheader row.
                > :first-child {
                    background: $calendar-md-background-active;
                    border-bottom: $calendar-md-border;
                    margin-right: 0;
                    min-height: 36px;
                }

                // Week rows.
                > :not(:first-child) {

                    // Day containers.
                    > * {

                        border-bottom: $calendar-md-border;
                        border-right: $calendar-md-border;
                        cursor: pointer;

                        &:hover {
                            background: $calendar-md-background-hover;
                        }

                        &.disabled {
                            color: rgba(0, 0, 0, .3);
                            pointer-events: none;
                            cursor: auto;
                        }

                        &.active {
                            box-shadow: $calendar-md-shadow-active;
                            background: $calendar-md-background-active;
                        }

                        &.has-events {
                            background-color: $calendar-md-event-background;
                        }

                        // Day number label.
                        :first-child {
                            padding: 0;
                        }

                        // Day html content.
                        :last-child {
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
    }
}