文档章节

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

G
 GreatWall2017
发布于 2017/09/11 20:37
字数 937
阅读 10
收藏 0
点赞 0
评论 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 ⋅ 2

9个有用的jQuery日历和网页设计师的日期选择器插件

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

未来十年 ⋅ 2012/01/02 ⋅ 0

bootstrap双日历插件实例化

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

孟飞阳 ⋅ 2016/07/22 ⋅ 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 ⋅ 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 ⋅ 14

Ionic系列——极光推送

一、准备工作 1、首先你要创建好一个Ionic的项目。 2、你要去JPush官网注册一个账号,并新建一个应用,这个管理平台是可以手动发送消息,并统计分析的。 3、在上图中的应用包名要注意,这个得...

龙马行空 ⋅ 2015/10/09 ⋅ 0

关于call forward和transfer的争论

本是一个需要实现的feature,在项目例会上因为transfer是由tablet实现还是server实现,开发和测试的两个人争论的不休,又有什么好争论的呢?无论是使用subscribe + xml、还是使用refer to、还...

eric_zhang ⋅ 2011/06/16 ⋅ 0

Portal-Basic v3.1.1 beta-1 示例工程发布

portal-basic 3.1.1 已开发完成,正在编写帮助文档,将于近期发布。现在先发布 portal-basic 3.1.1-BETA-1 的示例工程供大家下载试用,体验新特性。同时希望收集一些意见反馈。谢谢 *_^ 注:...

伤神小怪兽 ⋅ 2013/04/14 ⋅ 0

Simple Framework 4 介绍

simple4 是 simpleframework第四版本的简称。 simple4是简洁、开放、高效的基于java实现的web 平台,simple 本身提供了针对企业级项目的技术解决方案和项目开发规范。simple4已开发出符合企业...

simplesns ⋅ 2013/03/01 ⋅ 19

maven dependency中scope=compile 和 provided区别

问题再现: 上次这边朋友问我一个问题,就是他们在pom.xml中的dependency中,看到有一些是provided的情况,比如如下: com.liferay.portal portal-impl 6.1.0 provided 他们问我scope在何种情...

余二五 ⋅ 2017/11/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JDK1.6和JDK1.7中,Collections.sort的区别,

背景 最近,项目正在集成测试阶段,项目在服务器上运行了一段时间,点击表格的列进行排序的时候,有的列排序正常,有的列在排序的时候,在后台会抛出如下异常,查询到不到数据,而且在另外一...

tsmyk0715 ⋅ 24分钟前 ⋅ 0

spring RESTful

spring RESTful官方文档:http://spring.io/guides/gs/rest-service/ 1. 可以这么去理解RESTful:其实就是web对外提供的一种基于URL、URI的资源供给服务。不是一个原理性知识点。是一个方法论...

BobwithB ⋅ 26分钟前 ⋅ 0

C++ 中命名空间的 5 个常见用法

相信小伙伴们对C++已经非常熟悉,但是对命名空间经常使用到的地方还不是很明白,这篇文章就针对命名空间这一块做了一个叙述。 命名空间在1995年被引入到 c++ 标准中,通常是这样定义的: 命名...

柳猫 ⋅ 29分钟前 ⋅ 0

@Conditional派生注解

@Conditional派生注解(Spring注解版原生的@Conditional作用) 作用:必须是@Conditional指定的条件成立,才给容器中添加组件,配置配里面的所有内容才生效; @Conditional扩展注解 作用(判...

小致dad ⋅ 30分钟前 ⋅ 0

适配器模式

适配器模式 对象适配器 通过私有属性来实现的类适配器 通过继承来实现的接口适配器 通过继承一个默认实现的类实现的

Cobbage ⋅ 33分钟前 ⋅ 0

Java 限流策略

概要 在大数据量高并发访问时,经常会出现服务或接口面对暴涨的请求而不可用的情况,甚至引发连锁反映导致整个系统崩溃。此时你需要使用的技术手段之一就是限流,当请求达到一定的并发数或速...

轨迹_ ⋅ 37分钟前 ⋅ 0

GridView和子View之间的间隙

默认的情况下GridView和子View之间会有一个间隙,原因是GridView为了在子View被选中时在子View周围显示一个框。去掉的办法如下: android:listSelector="#0000" 或 setSelector(new ColorDra...

国仔饼 ⋅ 40分钟前 ⋅ 0

idea插件开发

1 刷新页面要使用多线程 2 调试要使用restart bug 不要去关闭调试的idea 否则再次启动会卡住

林伟琨 ⋅ 40分钟前 ⋅ 0

Java 内存模型

物理机并发处理方案 绝大多数计算任务,并不是单纯依赖 cpu 的计算完成,不可避免需要与内存交互,获取数据。内存要拿到数据,需要和硬盘发生 I/O 操作。计算机存储设备与 cpu 之间的处理速度...

长安一梦 ⋅ 47分钟前 ⋅ 0

思路分析 如何通过反射 给 bean entity 对象 的List 集合属性赋值?

其实 这块 大家 去 看 springmvc 源码 肯定可以找到实现办法。 因为 spirngmvc 的方法 是可以 为 对象 参数里面的 list 属性赋值的。 我也没有看 具体的 mvc 源码实现,我这里只是 写一个 简...

之渊 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部