itsm-pc-handle/assets/views/scheduling/matrialcalendar.html

<style>
.dayparts {
    width: 750px;
}

.dayparts table {
    width: 100%;
}

.dayparts td {
    cursor: pointer;
    width: 26px;
    height: 26px;
    border: 1px solid #ccc;
}

.dayparts th {
    font-weight: normal;
}

.dayparts td, .dayparts th {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0;
}

.dayparts tr:first-child th {
    text-align: left;
    text-indent: -4px;
}

.dayparts tr:not(:first-child) th {
    text-align: right;
    padding-right: 5px;
}

.dayparts .selected {
    background: #1e4163;
    color: white;
}

.dayparts button {
    margin-top: 10px;
    float: right;
    cursor: pointer;
    margin-right: 25px;
}

.dayparts a {
    cursor: pointer;
}
.dayparts a:hover {
    color: #333333;
}


.flex-size {
    -webkit-flex: 1;
    flex: 1;
}

.calendar-md {
    display: -webkit-flex;
    display: flex;
    flex-direction:column;
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}
.calendar-md .subheader {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.12);
    margin-right: 0;
    min-height: 36px; 
}
.layout-row {
    display: inherit;
    flex-direction:row;
}
.layout-padding {
    padding: 8px;
    flex:1;
}
.layout-height{
    display: inherit;
    flex:1;
    align-content:center;
}
.subheader-day {
    min-width: 48px;
}
.weekday{
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.flex {
    -webkit-flex:1;
    flex:1;
    box-sizing:border-box;
}

angular-dayparts .calendar-md .layout-row.entity .weekday:hover {
     background: rgba(17, 110, 191, 0.75);
}
angular-dayparts .calendar-md .layout-row.entity *:disabled {
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    cursor: auto; 
}
angular-dayparts .calendar-md .layout-row.entity .weekday.active {
    box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.75);
    background: rgba(17, 110, 191, 0.75);
}
</style>

<!-- <script>
angular.module('app', ['angular-dayparts']).controller('main', function($scope){
    $scope.options = {
        reset: true,
        onChange: function(selected) {
            console.log('selected', selected);
        },
        selected: []
    };
});
</script> -->

<md-content id="calendar-demo" ng-controller="calendarCtrl" layout="column" layout-fill>  
  <div class="input-group" style="padding: 10px;">
    <label class="btn btn-primary" ng-model="calendarView" btn-radio="'month'">
      <span translate="calendar.MONTH">Month</span>
    </label>
    <label class="btn btn-primary" ng-model="calendarView" btn-radio="'week'">
      <span translate="calendar.WEEK">Week</span>
    </label>
  </div>
  <div ng-if="calendarView=='week'" ng-model="options.selected">
    <angular-dayparts options="options"></angular-dayparts>
  </div>
  <div ng-if="calendarView=='month'">
    <calendar-md flex layout layout-fill
    calendar-direction="direction"
    on-prev-month="prevMonth"
    on-next-month="nextMonth"
    on-day-click="dayClick"
    title-format="'MMMM y'"
    ng-model='selectedDate'
    day-format="'d'"
    day-label-format="'EEE'"
    day-label-tooltip-format="'EEEE'"
    day-tooltip-format="'fullDate'"
    week-starts-on="firstDayOfWeek"
    day-content="setDayContent"></calendar-md>
  </div>

   <div class="panel-footer " ng-if="calendarView=='week'">
        <a ng-click="saveweek(options.selected);"  class="btn btn-primary liveright">保存</a>
      </div> 
</div>