中国区portal小秘书项目中用到的简单的日历插件

于 2017-09-11 20:37:00 发布
阅读量145 收藏
点赞数
原文链接：https://my.oschina.net/u/3288561/blog/1535395
版权 
$scope.calendarOption = {
                currentDate: {
                    year: "",
                    month: "",
                    day: "",
                    currentIndex: 0,
                    trueMonth: ""
                },
                weekTitles: ["M", "T", "W", "T", "F", "S", "S"],
                dayArr: [],
                hasTaskDaysList: [],
                ctrlPress: false,
                ctrlPressChanging: false,
                selectedDays: [],
                /**
                 * 设置当前时间
                 * @params {* int } year 年份
                 * @params {* int } month 月份
                 * @params {* int } day 天
                 * @params {* int } firstDayIndex 本月第一天在星期上的位置
                 */
                setcurrentDate: function (year, month, day, firstDayIndex) {
                    var self = this;
                    self.currentDate.year = year;
                    self.currentDate.month = (month > 8) ? (month + 1) : ("0" + (month + 1));
                    self.currentDate.trueMonth = month + 1;
                    self.currentDate.day = day;
                    self.currentDate.currentIndex = firstDayIndex + day - 1; 通过本月第一天在星期上的位置计算今天在本日历的位置
                },
                calculateDays: function (y, m, d) {
                    var self = this;
                    /********************************************************
                        // new Date(yy,mth,dd,hh,mm,ss,ms)
                        // getFullYear: 从 Date 对象以四位数字返回年份
                        // getMonth: 从 Date 对象返回月份 (0 ~ 11)
                        // getDate: 从 Date 对象返回一个月中的某一天 (1 ~ 31)
                        // getDay: 从 Date 对象返回一周中的某一天 (0 ~ 6)
                    *********************************************************/
                    $scope.calendarOption.dayArr = []; // 初始化
                    var today = new Date();
                    var year = y || today.getFullYear();
                    var month = (m == 1) ? 0 : (m - 1 || today.getMonth());
                    var day = d || today.getDate();
                    var firstDayIndex = (new Date(year, month, 1).getDay() == 0) ? 6 : new Date(year, month, 1).getDay() - 1; //本月第一天在星期的显示位置
                    var currentMonthdays = new Date(new Date(year, month + 1, 1) - 24 * 60 * 60 * 1000).getDate(); //本月的天数
                    var lastMonthDays = new Date(new Date(year, month, 1) - 24 * 60 * 60 * 1000).getDate(); //上月的天数
                    //设置当前日期
                    self.setcurrentDate(year, month, day, firstDayIndex);

                    for (var i = 1; i < currentMonthdays + 1; i++) { //循环输出本月天数
                        var item = {
                            label: i,
                            isDisabled: false
                        };
                        $scope.calendarOption.dayArr.push(item);
                    };
                    for (var i = 1; i < firstDayIndex + 1; i++) { //循环输出上月的天数
                        var item = {
                            label: lastMonthDays,
                            isDisabled: true
                        }
                        $scope.calendarOption.dayArr.unshift(item);
                        lastMonthDays--;
                    };
                    //循环输出下月天数(本日历横七竖六42个位置，如果数组内的数字没有42个，就从1累加作为下月的天数)
                    var leftDays = 42 - $scope.calendarOption.dayArr.length;
                    for (var i = 1; i < leftDays + 1; i++) {
                        var item = {
                            label: i,
                            isDisabled: true
                        }
                        $scope.calendarOption.dayArr.push(item);
                    }
                    if ($scope.calendarOption.selectedDays.length == 0) {
                        $scope.calendarOption.selectedDays.push($scope.calendarOption.currentDate.day);
                    }
                    $(document).on("keydown", function (e) {
                        var keycode = e.which || e.keyCode;
                        if (keycode == 17 && $scope.calendarOption.ctrlPress == false) {
                            $scope.calendarOption.ctrlPress = true;
                        }
                    });
                    $(document).on("keyup", function (e) {
                        var keycode = e.which || e.keyCode;
                        if (keycode == 17 && $scope.calendarOption.ctrlPress == true) {
                            $scope.calendarOption.ctrlPress = false;
                            // Ctrl键松开时选中天数有变化联动右边的任务列表
                            if ($scope.calendarOption.ctrlPressChanging) {
                                $scope.calendarOption.ctrlPressChanging = false;
                                $scope.Fn.getTaskList();
                            }
                        }
                    });
                },
                //清空之前的日期
                clearSelectedDate: function () {
                    $scope.timeSelect.selectedList = [];
                    $scope.calendarOption.selectedDays = [];
                },
                daySelect: {
                    /**
                     * 选择单个日期
                     */
                    pressSigle: function (dayValue) {
                        $scope.timeSelect.startDate.value = null;
                        $scope.timeSelect.endDate.value = null;
                        // 清空之前选择的日期
                        $scope.calendarOption.clearSelectedDate(dayValue);
                        //设置日期
                        $scope.calendarOption.selectedDays[0] = dayValue;
                        // 点击单选联动右边的任务列表
                        $scope.Fn.getTaskList();
                    },
                    /**
                     * 选择多个日期
                     */
                    pressMore: function (dayValue) {
                        $scope.calendarOption.ctrlPressChanging = true;
                        if ($scope.calendarOption.selectedDays.indexOf(dayValue) < 0) {
                            $scope.calendarOption.selectedDays.push(dayValue);
                        } else {
                            if ($scope.calendarOption.selectedDays.length == 1) return;
                            $scope.calendarOption.selectedDays = $scope.calendarOption.selectedDays.filter(function (itemValue) {
                                return itemValue != dayValue;
                            });
                        }
                    }
                },
                // 切换选中日期，支持按ctrl多选
                changeDay: function (item, index) {
                    var self = this;
                    var dayValue = Number(item.label);
                    if (item.isDisabled) return;

                    if ($scope.calendarOption.ctrlPress) { //多选
                        self.daySelect.pressMore(dayValue);
                        return;
                    }
                    //单选
                    self.daySelect.pressSigle(dayValue);
                },
                // 切换上下年、上下月
                changeYearMonth: function (year, month) {
                    var yearValue = $scope.calendarOption.currentDate.year + year;
                    var monthValue = Number($scope.calendarOption.currentDate.trueMonth) + month;
                    if (monthValue > 12) {
                        monthValue = 1;
                        yearValue++;
                    } else if (monthValue < 1) {
                        monthValue = 12;
                        yearValue--;
                    }
                    var dayValue = $scope.calendarOption.currentDate.day;
                    $scope.calendarOption.calculateDays(yearValue, monthValue, dayValue);
                    $scope.calendarOption.selectedDays = [];
                    $scope.timeSelect.drawSelectedDays();
                    // 重新获取有任务的日期
                    $scope.Fn.getHasTaskList();
                }
            };
<div class="calendarBox fl">
        <div class="calendarTitle">{{lang.common.calendarTitle}}</div>
        <div class="yearMonthBox">
            <i class="sm-backward2" ng-click="calendarOption.changeYearMonth(-1,0)"></i>
            <i class="sm-backward4" ng-click="calendarOption.changeYearMonth(0,-1)"></i>
            <span>{{calendarOption.currentDate.year}}-{{calendarOption.currentDate.month}}</span>
            <i class="sm-play1" ng-click="calendarOption.changeYearMonth(0,1)"></i>
            <i class="sm-forward4" ng-click="calendarOption.changeYearMonth(1,0)"></i>
        </div>
        <ul class="dayBox">
            <li class="clearfix">
                <a class="weekTitle fl" ng-repeat="item in calendarOption.weekTitles track by $index" ng-class="{'weekendDay' : ($index % 7) > 4}">{{item}}</a>
            </li>
            <li class="clearfix">
                <a class="dayNumber fl" ng-repeat="item in calendarOption.dayArr track by $index" ng-class="{'disabledDay' : item.isDisabled,'weekendDay' : ($index % 7) > 4,'selectedDay':calendarOption.currentDate.currentIndex == $index}"
                    ng-click="calendarOption.changeDay(item,$index,$event)">{{item.label}}
                    <span ng-if="item.hasTask" class="hasTask"></span>
                </a>
            </li>
        </ul>
    </div>
/*我的任务*/
.myTaskBox{
    position: relative;
    margin-top:2em;
    min-height: 100px;
}
.calendarBox{
    width:460px;
    /*min-height:500px;*/
    height: 100%;
    border:1px solid #ddd;
    box-sizing: border-box;
    padding:1em;
    overflow: auto;
    background: #fff;
}
.calendarTitle{
    font-size: 1.4em;
    color: #666;
    line-height: 4em;
    text-indent: 1.5em;
}
.yearMonthBox{
    width:200px;
    text-align: center;
    margin:1.5em auto;
    font-size: 1.2em;
}
.yearMonthBox i{
    display: inline-block;
    color:#999;
    padding:0.2em;
    cursor: pointer;
}
.yearMonthBox i:hover{
    color:#00aaff;
}
.yearMonthBox span{
    color:#333;
    display: inline-block;
    padding:0.3em;
}
.dayBox{
    /*padding:1em;*/
}
.dayBox li{
    display: block;
}
.dayBox li a{
    font-size:1.2em;
    width:50px;
    margin:4px;
    line-height:50px;
    text-align: center;
    color:#666;
    cursor: pointer;
    position: relative;
}
.dayBox li a.weekTitle{
    font-size:1.3em;
    cursor: text;
}
.dayBox li a.disabledDay{
    color:#999!important;
    cursor: not-allowed!important;
    background:#fff!important;
}
.dayBox li a.weekendDay{
    color:#00aaff;
}
.dayBox li a.selectedDay{
    background: #00aaff;
    color:#fff;
}
.dayBox li a.dayNumber:hover{
    background: #00aaff;
    color:#fff;
}
.dayBox li a span.hasTask{
    border: 1px solid #00aaff;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    display: block;
    margin-left: -21px;
    margin-top: -21px;
}

 

 

转载于:https://my.oschina.net/u/3288561/blog/1535395

chouzhan9715
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值