中国区portal小秘书项目中用到的简单的日历插件
中国区portal小秘书项目中用到的简单的日历插件
GreatWall2017 发表于1个月前
中国区portal小秘书项目中用到的简单的日历插件
  • 发表于 1个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

$scope.calendarOption = {
            currentDate: {
                year: "",
                month: "",
                day: "",
                currentIndex: ""
            },
            weekTitles: ["M", "T", "W", "T", "F", "S", "S"],
            dayArr: [],
            hasTaskDaysList: [1, 5, 18, 13, 29],
            calculateDays: function (y, m, d) {
                // 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 || 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 currentDayIndex = new Date(year, month, day).getDay();  //今天在星期的显示位置
                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();  //上月的天数
                $scope.calendarOption.currentDate.year = year;
                $scope.calendarOption.currentDate.month = (month > 8) ? (month + 1) : ("0" + (month + 1));
                $scope.calendarOption.currentDate.day = day;
                $scope.calendarOption.currentDate.currentIndex = firstDayIndex + day - 1;   ////通过本月第一天在星期上的位置计算今天在本日历的位置
                for (var i = 1; i < currentMonthdays + 1; i++) {   //循环输出本月天数
                    var item = {
                        label: i,
                        isDisabled: false,
                        hasTask: false
                    };
                    // 这里闭包出错,是tiny或者angular的问题?
                    // (function (index) {
                    //     $scope.calendarOption.hasTaskDaysList.map(function (option) {
                    //         if (option == index) {
                    //             console.log(option)
                    //         }
                    //     });
                    // })(i);
                    $scope.calendarOption.dayArr.push(item);
                };
                for (var i = 1; i < firstDayIndex + 1; i++) {   //循环输出上月的天数
                    var item = {
                        label: lastMonthDays,
                        isDisabled: true,
                        hasTask: false
                    }
                    $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,
                        hasTask: false
                    }
                    $scope.calendarOption.dayArr.push(item);
                }
            },
            changeDay: function (item, index, e) {
                var val = Number(item.label);
                if (/disabledDay/.test(e.target.className)) {
                    e.preventDefault();
                    return
                }
                $scope.calendarOption.currentDate.currentIndex = index;
                // 联动右边的任务列表
                $scope.taskListTable.srcData.data = [];
            },
            changeYearMonth: function (year, month) {
                var y = $scope.calendarOption.currentDate.year + year;
                var m = Number($scope.calendarOption.currentDate.month) + month;
                var d = $scope.calendarOption.currentDate.day;
                $scope.calendarOption.calculateDays(y, m, d);
                // 联动右边的任务列表
                $scope.taskListTable.srcData.data = [];
            }
        };
<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;
}

 

 

共有 人打赏支持
粉丝 0
博文 13
码字总数 6636
×
GreatWall2017
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: