好久没写博客了，今天做完了公司的行事历，决定静下来总结一下，虽然不难，但是也花了好几天时间。
简单说一下实现的功能：
1.当月的日历，按照星期排列，每星期七天，不满的留空
2.显示农历二十四节气，包括节假日
3.不同的类型显示不同的背景颜色，如补班为黄色，休假为紫色等
4.每一天都应该再对应的周次内
5.鼠标悬浮显示当天的注意事项
6.双击弹出模态框，可以修改保存注意事项
大体思路为：拿到后台的数据后，先遍历，生成一个只含有周数的数组；
然后ng-repeat生成行，再在行里ng-repeat生成列，让行的周数和列的周数相等的日期显示就可以了；再根据属性加内容和颜色；最后用$modal生成模态框，数据绑定一下；点击保存传入绑定的数据。
数据格式大致为[{date:1,color:”red”…},{}…,{}…]
下面是HTML代码：
<div class="row" style="font-size:12px;"> <div class="col-md-12"> <table class="table table-bordered" style="table-layout:fixed;"> <caption class="text-center" style="background:#d9edf7;font-weight:900;color:black;" >二月行事历</caption> <thead> <tr> <th>Week</th> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </thead> <tbody style="text-align:center;"> <tr ng-repeat="week in layoutVm.calendarWeeks"> <td style="background:#d9edf7;"> {{week}} </td> <td style="background:{{item.DateColor}};padding-left:0;padding-right:0;" ng-repeat="item in layoutVm.calendarDatas" ng-show="item.YearWeekNumber=={{week}}" title="{{item.tips}}" ng-dblclick="operate.editItem(item)"> {{item.CalendarDay}} <br /> <span style="font-size:12px;">{{item.ChineseCalendar}}</span> </td> </tr> </tbody> </table> <div class="col-md-3" style="background:blue;border:1px solid black;"> 法定假日 </div> <div class="col-md-2" style="background:yellow;border:1px solid black;"> 补班 </div> <div class="col-md-2" style="background:violet;border:1px solid black;"> 休假 </div> <div class="col-md-3" style="background:red;border:1px solid black;"> 星期六日 </div> <div class="col-md-2" style="background:#d9edf7;border:1px solid black;"> 周数 </div> </div> </div>` 生成模态框代码` <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" ng-show="title"> <button type="button" class="close" ng-click="$hide()">×</button> <h4> <i class="fa fa-bell-o"></i> {{title}} </h4> </div> <div class="modal-body"> <div class="panel"> <form class="form-horizontal" name="calendar" role="form" novalidate> <fieldset> <legend>基本信息</legend> <div class="form-group"> <label for="dates" class="col-md-2 control-label">日期</label> <div class="col-md-4"> <input type="text" ng-model="vm.CalendarDate" class="form-control" readonly> </div> </div> <div class="form-group"> <label for="color" class="col-md-2 control-label">类别</label> <div class="col-md-4"> <button type="button" class="btn btn-default" ng-model="vm.DateProperty" data-html="1" data-multiple="0" data-animation="am-flip-x" data-placeholder="修改类别" data-bs-options="calendar.color as calendar.type for calendar in vmManager.calendarColors" data-bs-select> <span class="caret"></span> </button> </div> </div> <div class="form-group"> <label for="tips" class="col-md-2 control-label">事项</label> <div class="col-md-10"> <textarea name="tips" rows="3" class="form-control" ng-model="vm.Title"/> </div> </div> </fieldset> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" ng-click="$hide()"><i class="fa fa-undo"></i>取消</button> <button type="button" class="btn btn-primary" ng-click="editSave($scope.vm)"><i class="fa fa-save"></i>确定</button> </div> </div> </div> </div>
`js
.controller('calendarManageCtrl',function ($scope,homeDataopService,$modal) {
//013935创建视图模型
var uiVM = {
CalendarMonth: 0,NowMonthWeekNumber: 0,ChineseCalendar: null,CalendarDate: null,CalendarYear: 0,CalendarDay: null,YearWeekNumber: 0,CalendarWeek: 0,DateProperty: null,DateColor: null,Title: null,OpSign: null,OpDate: null,OpTime: null,Id_Key: null,}
//013935创建视图管理器
var vmManager = {
nowYear: new Date().getFullYear(),nowMonth: new Date().getMonth() + 1,calendarWeeks: null,calendarDatas: null,//013935获取日历数据
loadCalendarDatas: function () {
if (window.localStorage) {
if (localStorage.getItem("calendarDatas") == null) {
$scope.promise = homeDataopService.getCalendarDatas(vmManager.nowYear,vmManager.nowMonth).then(function (datas) {
var calendarStr = JSON.stringify(datas);
localStorage.setItem("calendarDatas",calendarStr);
vmManager.calendarDatas = datas;
var week = [];
for (var i = 0; i < datas.length; i++) {
if (datas[i].YearWeekNumber != 0) {
if (week.indexOf(datas[i].YearWeekNumber) == -1) {
week.push(datas[i].YearWeekNumber);
}
}
}
vmManager.calendarWeeks = week;
})
} else {
var datas = JSON.parse(localStorage.getItem("calendarDatas"));
vmManager.calendarDatas = datas;
var week = [];
for (var i = 0; i < datas.length; i++) {
if (datas[i].YearWeekNumber != 0) {
if (week.indexOf(datas[i].YearWeekNumber) == -1) {
week.push(datas[i].YearWeekNumber);
}
}
}
vmManager.calendarWeeks = week;
}
}
},//013935双击显示模态框
editItem: function (item) {
if (item.CalendarDay != "") {
uiVM = _.clone(item);
vmManager.editModal.$promise.then(vmManager.editModal.show);
}
},editModal: $modal({
title: '修改日历信息',content: '',templateUrl:"Home/EditHomeCalendarTpl/",controller: function ($scope,homeDataopService) {
$scope.vm = uiVM;
$scope.vmManager = vmManager;
var op = Object.create(leeDataHandler.operateStatus);
op.vm = uiVM;
$scope.operate = op;
var vmEditManager = {
calendarColors: [
{ type: "正常",color: "white" },{ type: "法定假日",color: "#29B8CB" },{ type: "补班",color: "yellow" },{ type: "休假",color: "violet" },{ type: "星期六日",color: "red" }],};
$scope.vmEditManager = vmEditManager;
$scope.editSave = function () {
uiVM.OpSign = 'edit';
$scope.promise = homeDataopService.saveCalendarDatas($scope.vm).then(function () {
var selItemColor = _.find(vmEditManager.calendarColors,{ type: uiVM.DateProperty });
if (selItemColor !== undefined)
{
var selectedItem = _.find(vmManager.calendarDatas,{ CalendarDate: $scope.vm.CalendarDate });
if (selectedItem != null);
selectedItem.DateColor = $scope.vm.DateColor = selItemColor.color;
selectedItem.DateProperty = $scope.vm.DateProperty = selItemColor.type;
selectedItem.Title = $scope.vm.Title;
}
var calendarStr = JSON.stringify(vmManager.calendarDatas);
localStorage.setItem("calendarDatas",calendarStr);
vmManager.editModal.$promise.then(vmManager.editModal.hide);
})
};
},show: false,}),};
$scope.vmManager = vmManager;
var operate = Object.create(leeDataHandler.operateStatus);
$scope.operate = operate;
vmManager.loadCalendarDatas();
})
效果
双击之后的可编辑模态框
