文档章节

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

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

 

 

© 著作权归作者所有

共有 人打赏支持
下一篇: canvas时钟
G
粉丝 0
博文 25
码字总数 13402
作品 0
深圳
私信 提问
9个有用的jQuery日历和网页设计师的日期选择器插件

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

未来十年
2012/01/02
0
0
ibm portlet环境搭建

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

杨喆
2014/04/19
648
2
bootstrap双日历插件实例化

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

孟飞阳
2016/07/22
59
0
django搭建个人博客01,mysql连接配置

创建并注册app www python3 manage.py startapp www mkdir -p www/templates/www mkdir -p www/static/www vim mysite/settings.py 在INSTALLED_APPS里添加’www’, 配置django-mysql数据库连......

古城寨主
2017/11/07
0
0
Ionic系列——极光推送

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

龙马行空
2015/10/09
4.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
28分钟前
1
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
31分钟前
4
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
3
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
17
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部