angularjs实现行事历

好久没写博客了，今天做完了公司的行事历，决定静下来总结一下，虽然不难，但是也花了好几天时间。

简单说一下实现的功能：
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()">&times;</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();
})

效果
双击之后的可编辑模态框