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

<!-- start: PAGE TITLE -->
<!-- <section id="page-title">
    <div class="row">
        <div class="col-sm-12">
            <h1 class="mainTitle" translate="sidebar.nav.scheduling.CALENDAR">{{ mainTitle }}</h1>
            <span class="mainDescription" translate="sidebar.nav.scheduling.MAINDesc">A port of the bootstrap calendar widget to AngularJS (no jQuery required).</span>
        </div>

    </div>
</section> -->
<section id="page-title">
    <div class="row">
        <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>
<!-- end: PAGE TITLE -->
<!-- start: CALENDAR -->
<!-- <div class="container-fluid container-fullw bg-white"> -->
<div class="">
    <div class="col-md-12">
        <div ng-controller="adminCalendarCtrl" id="demo" class="row">
            <div class="listbote">
                <div class=" schuback" id="searchid">
                    <div class="row" style="padding-right: 0px !important;">
                        <form class="col-xs-12 form-inline schesearchsize">
                            <div class="col-xs-3">
                                <button class="btn btn-weekbutton weekbutton" mwl-date-modifier date="calendarDate" set-to-today>
                                                <span translate="calendar.TODAY">TODAY</span>
                                            </button>
                            </div>
                            <div class="col-xs-6  text-center">
                                <button class="btn btn-weekbutton weekbutton" mwl-date-modifier date="calendarDate" decrement="calendarView">
                                                    <i class="ti-angle-left"></i>
                                                </button>
                                <h2 class="form-group padding-left-10 padding-right-10 text-center" style="width:110px;font-weight:bold">{{ calendarTitle }} </h2>
                                <button class="btn btn-weekbutton weekbutton" mwl-date-modifier date="calendarDate" increment="calendarView">
                                                    <i class="ti-angle-right"></i>
                                                </button>
                            </div>
                            <!-- <div class="col-xs-3">
                                <div class="btn-group pull-right">
                                    <div class="visible-md visible-lg hidden-sm hidden-xs">
                                        <div class="btn-group ">
                                            <label class="btn btn-pributtom" ng-model="calendarView" btn-radio="'month'">
                                                    <span translate="calendar.MONTH">Month</span>
                                                </label>
                                            <label class="btn btn-pributtom" ng-model="calendarView" btn-radio="'week'">
                                                    <span translate="calendar.WEEK">Week</span>
                                                </label>
                                        </div>
                                    </div>
                                    <div class="visible-xs visible-sm hidden-md hidden-lg">
                                        <div class="btn-group" dropdown>
                                            <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
                                                            <i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
                                                        </button>
                                            <ul class="dropdown-menu pull-right dropdown-light" role="menu">
                                                <li>
                                                    <a ng-model="calendarView" btn-radio="'year'" href="">
                                                                    年视图
                                                                </a>
                                                </li>
                                                <li>
                                                    <a ng-model="calendarView" btn-radio="'month'" href="">
                                                                    月视图
                                                                </a>
                                                </li>
                                                <li>
                                                    <a ng-model="calendarView" btn-radio="'week'" href="">
                                                                    周视图
                                                                </a>
                                                </li>
                                                <li>
                                                    <a ng-model="calendarView" btn-radio="'day'" href="">
                                                                    天视图
                                                                </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                        </form>
                        <div class="col-xs-12 fontsizes-14">
                            <div class="alertweek alert-block alert-warning col-xs-12">
                                <div class="control-label pull-left margin-top-5 margin-right-5">排班班次:</div>
                                <div ng-repeat="event in externalEvents track by $index" mwl-draggable="true" drop-data="{event: event}" class="border-light row col-xs-4 margin-right-0">
                                    <div class="form-group">
                                        <div class="input-group col-md-12">
                                            <ui-select multiple tagging tagging-tokens="SPACE|,|/" ng-model="event.users" theme="bootstrap" class="form-control" reset-search-input="true" search-enabled="true" append-to-body="true">
                                                <ui-select-match placeholder="请选择{{event.title}}值班人...">{{$item.name}}</ui-select-match>
                                                <ui-select-choices repeat="option in users | filter: $select.search" refresh="refreshUser($select.search)" refresh-delay="0">
                                                    <div ng-bind-html="option['name'] | highlight: $select.search"></div>
                                                    <!-- <small>
                                                            <img ng-src="assets/images/avatar-{{option['gender']=='男'?'1':'2'}}.jpg" class="messages-item-avatar bordered border-primary"/>
                                                        </small> -->
                                                </ui-select-choices>
                                            </ui-select>
                                            <span href="javascript:;" class="text-white input-group-addon" ng-class="'event-'+ event.type">
                                                  {{ event.title }}
                                                </span>
                                        </div>
                                    </div>
                                </div>
                                <i tooltip='操作提示：选择人员后将输入框整体手动拖入排班日期表格中，即完成排班工作。' tooltip-placement="right" class="fa  ti-help-alt  fontcolor-five pointfont fontsizes-16 margin-top-5"></i>
                                <div class="pull-right">
                                    <!-- <a class="btn  btn-defaultshc " ng-click="export(calendarDate)"><span translate="sidebar.nav.configuremanagerdb.LISTButton.DOWNLOADTEMP">Download Template File</span></a> -->
                                    <!-- <span class="btn btn-primary btn-o btn-file">选择文件
                                        <input name="uploadedFile" type="file" nv-file-select=""  uploader="importUploader" />
                                    </span> -->
                                    <!-- <a uploader="importUploader" class="btn  btn-primary" ladda="ldloading.expand_right" ng-disabled="!(importUploader.getNotUploadedItems().length>0)" ng-click="import()"><span translate="sidebar.nav.configuremanagerdb.LISTButton.IMPORT">Import Data</span></a> -->
                                    <!-- <a uploader="importUploader" class="btn btn-gray  ladda-button" ng-click="importopen()"><span translate="sidebar.nav.configuremanagerdb.LISTButton.IMPORT">Import Data</span></a> -->
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- start: CALENDAR -->
                <!-- <div class=""> -->
                <div class="row">
                    <div class="col-md-12">
                        <!-- /// controller:  'myCalendarCtrl' -  localtion: assets/js/controllers//mycalendarCtrl.js /// -->
                        <div id="demo" class=" col-md-12 borderall borderrou-8 margin-bottom-15">
                            <div class="margin-bottom-15">
                                <!-- <mwl-calendar view="calendarView" view-date="calendarDate" events="events" view-title="calendarTitle" on-event-click="eventClicked(calendarEvent)" on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
                                    edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'" delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'" on-edit-event-click="eventEdited(calendarEvent)" on-delete-event-click="eventDeleted(calendarEvent)"
                                    calendar-time-label="时间" calendar-event-label="描述" cell-is-open="false">
                                </mwl-calendar> -->
                                <mwl-calendar view="calendarView" view-date="calendarDate" view-title="calendarTitle" events="events" on-event-click="eventClicked(calendarEvent)" on-event-times-changed="eventDropped(calendarEvent, calendarNewEventStart, calendarNewEventEnd)" edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
                                    delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'" on-edit-event-click="eventClicked(calendarEvent)" on-delete-event-click="eventDeleted(calendarEvent)" calendar-time-label="时间" calendar-event-label="描述"
                                    cell-is-open="false">
                                </mwl-calendar>

                                <!-- start: EDIT EVENT TEMPLATE -->
                                <script type="text/ng-template" id="calendarEvent.html">
                                    <div class="col-xs-12 col-md-12  padding-top-10 padding-bottom-10" style="height:100%">
                                        <div class="row">
                                            <div class="col-xs-12 col-md-12" style="height:100%">
                                                <!-- <div class="col-xs-12 col-md-12 " style="height:100%"> -->
                                                <div class="schudright" style="height:100%">
                                                    <div class="modal-header">
                                                        <div class="modal-title fontcolor-two fontsizes-14">
                                                            <div>
                                                                值班编辑
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-body fontsizes-14">
                                                        <div class="row">
                                                            <div class="col-xs-12 col-md-12">
                                                                <div class="col-xs-12 col-md-12">
                                                                    <div class="form-group">
                                                                        <div class="control-label padding-top-10 padding-bottom-5">
                                                                            值班描述:
                                                                        </div>
                                                                        <input type="text" placeholder="Enter title" class="form-control " ng-model="event.title">
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <div class="control-label padding-top-5 padding-bottom-5">
                                                                            值班人:
                                                                        </div>
                                                                        <ui-select multiple limit="2" tagging tagging-tokens="SPACE|,|/" ng-model="event.users" theme="bootstrap" reset-search-input="true" search-enabled="true" append-to-body="true">
                                                                            <ui-select-match placeholder="请选择值班人...">{{$item.name}}</ui-select-match>
                                                                            <ui-select-choices repeat="option in modalusers | filter: $select.search" refresh="refreshModalUser($select.search)" refresh-delay="0">
                                                                                <div ng-bind-html="option['name'] | highlight: $select.search"></div>
                                                                            </ui-select-choices>
                                                                        </ui-select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <div class="control-label padding-top-5 padding-bottom-5">
                                                                            开始:
                                                                        </div>
                                                                        <span class="input-icon">
                            <input type="text" class="form-control" ng-click="startOpen = !startOpen" ng-change="setEndOpen()" datepicker-popup="yyyy-MM-dd" ng-model="event.startTime" is-open="startOpen" ng-init="startOpen = false" min-date="currentDate" close-text="关闭" current-text="今天" clear-text="清空"  />
                            <i class="ti-calendar"></i> </span>
                                                                        <timepicker ng-model="event.startTime" readonly-input="true" show-meridian="true" disable-meridian="true" ng-show="!event.allDay" mousewheel="false" arrowkeys="false" show-spinners="false"></timepicker>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <div class="control-label padding-top-5 padding-bottom-5">
                                                                            结束:
                                                                        </div>
                                                                        <span class="input-icon">
                            <input type="text" class="form-control" ng-click="endOpen = !endOpen" datepicker-popup="yyyy-MM-dd" ng-model="event.endTime" is-open="endOpen" ng-init="endOpen = false" min-date="event.startTime" close-text="关闭" current-text="今天" clear-text="清空" />
                            <i class="ti-calendar"></i> </span>
                                                                        <timepicker ng-model="event.endTime" readonly-input="true" show-meridian="true" disable-meridian="true" ng-show="!event.allDay" mousewheel="false" arrowkeys="false" show-spinners="false"></timepicker>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button class="btn btn-addbutton  addbutton" ng-if="bianji" ng-click="ok(event)">确认</button>
                                                        <button class=" btn btn-removebutton removebutton" ng-if="shanchu" ng-click="deleteEvent(event)">删除</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </script>
                                <!-- end: EDIT EVENT TEMPLATE -->
                                <!-- </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- </div> -->
<!-- end: CALENDAR -->