zuel-itsm-3.0.2/assets/views/system/user/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;
        /* border-top-left-radius: 8px; */
        /* border-top-right-radius: 8px; */
    }
    
    .layout-row {
        display: inherit;
        flex-direction: row;
    }
    
    .layout-row.entity {
        border-radius: 8px;
    }
    
    .layout-padding {
        padding: 8px;
        flex: 1;
    }
    
    .layout-height {
        /* display: inherit; */
        display: inline-block;
        vertical-align: middle;
        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: #f5f5f5;
    }
    
    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> -->
<section id="page-title">
    <div class="row">
        <!-- <i class="iconfont icon-bianji pull-left"></i> -->
        <div class="col-sm-8">
            <h1 class="mainTitle">工作日管理<i tooltip='可搭配下面两种工作日设置方式进行工作日设置。' tooltip-placement="right" class="fa  ti-help-alt margin-left-10 fontcolor-five pointfont"></i></h1>
        </div>
    </div>
</section>
<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'">
      额外排班调整
    </label>
        <label class="btn btn-primary" ng-model="calendarView" btn-radio="'week'">
      排班设置
    </label>
    </div> -->
    <div class="list-controls clearfix">
        <div class="btn-group">
            <!-- <button class="btn btn-statebutton statebutton  keepleftbottom" ng-click="onChange('all')" ng-class="{'statecolor':searchstate=='all'}">全部</button> -->
            <label class="btn btn-pributtom" ng-model="calendarView" btn-radio="'month'">
                    额外排班调整
                  </label>
            <label class="btn btn-pributtom" ng-model="calendarView" btn-radio="'week'">
                    周工作日设置
                  </label>
        </div>
    </div>
    <div ng-if="calendarView=='week'" ng-model="options.selected" class="margin-top-20">
        <angular-dayparts options="options"></angular-dayparts>
        <p class="fontcolor-one">操作提示：此处为周排班设置，即在此处可以根据学校人员出勤情况勾选一个星期需出勤的星期数，点击即为出勤天，未做操作即为休息日，如有其它非常规休息日，你可到额外排班调整中将其点击取消出勤日。</p>
    </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 ng-if="calendarView=='week'&&bianji" class="text-center margin-top-30px">
        <a ng-click="saveweek(options.selected);" class="btn btn-addbutton  addbutton">保存</a>
    </div>
    <div ng-if="calendarView=='month'&&bianji" class="text-center margin-top-30px">
        <a ng-click="saveMonth();" class="btn btn-addbutton  addbutton">保存</a>
    </div>
    </div>