文档章节

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

G
 GreatWall2017
发布于 2017/09/11 20:37
字数 937
阅读 11
收藏 0
$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;
}

 

 

© 著作权归作者所有

共有 人打赏支持
G
粉丝 0
博文 23
码字总数 11916
作品 0
深圳
ibm portlet环境搭建

已经安装了RAD8开发者版本,使用install manager安装的,这个自带了一个运行环境Websphere appication server,可以开发部署测试普通的web项目,但是我想开发可以运行在ibm portal中的portl...

杨喆
2014/04/19
482
2
9个有用的jQuery日历和网页设计师的日期选择器插件

事件日历和日期选择器是是我们开发当中经常遇到的问题,这个时候我们就需要用jquery插件来实现,昨天我在做项目的时候,遇到了个问题就是如何显示倒计时问题,我这个时候就用jquery插件解决的...

未来十年
2012/01/02
0
0
bootstrap双日历插件实例化

网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件. http://www.jq22.com/jquery-info1087 这是...

孟飞阳
2016/07/22
59
0
Java Web 应用开发框架(Portal-Basic v3.1.1 即将发布)

Portal-Basic Java Web应用开发框架(简称 Portal-Basic)是一套功能完备的高性能Full-Stack Web应用开发框架,内置稳定高效的MVC基础架构和DAO框架(已内置Hibernate、MyBatis和JDBC支持),...

伤神小怪兽
2013/04/12
447
0
Portal-Basic Java Web 开发框架 v3.1.1 正式发布

Portal-Basic Java Web应用开发框架(简称 Portal-Basic)是一套功能完备的高性能Full-Stack Web应用开发框架,内置稳定高效的MVC基础架构和DAO框架(已内置Hibernate、MyBatis和JDBC支持),...

伤神小怪兽
2013/04/24
1K
14

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python3.6 取整除法

python3.6 中取整除法运算逻辑如下: d 非零,那么商 q 满足这样的关系: a = qd + r ,且0 ≤ r n1=7//3#7 = 3*2 +1n2=-6.1//3#-7 = 3*(-3)+2'{},{}'.format(n1,n2) 从运行结果可以...

colinux
22分钟前
3
0
阶段总结——用虚拟机搭建一个高可用负载均衡集群架构

[toc] linux基本知识已经介绍完,现有一个业务需要操作,通过对这个项目的操作,可以复习、总结、巩固之前的知识点; ** 用13台虚拟机搭建一个高可用负载均衡集群架构出来,并运行三个站点,...

feng-01
25分钟前
0
0
mysql 设置utf8字符集 (CentOS)

1.查看数据库及mysql应用目前使用的编码方式 (1)链接mysql 客户端 (2)执行:status 结果: 2.修改mysql 应用的字符编码(server characterset ) (1)打开配置文件:vim /etc/mysql/my...

qimh
25分钟前
0
0
windows无法格式化u盘解决方法

1。点开始-运行-输入cmd-format f: /fs: fat32 (这里f:是指U盘所在盘符) 这个格式化会很慢 请耐心等待

大灰狼wow
37分钟前
0
0
MySql 8.0连接失败

原来,MySql 8.0.11 换了新的身份验证插件(caching_sha2_password), 原来的身份验证插件为(mysql_native_password)。而客户端工具Navicat Premium12 中找不到新的身份验证插件(caching_s...

放飞E梦想O
53分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部