因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo。我的天,我面试的可是.net工程师啊。虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上了。写的不好,功能不完善,毕竟只是个小小的demo,不要喷我。

在恶补了不少js知识之后,由于水平有限(其实是一脸懵逼),就找了网上开源的日历插件学习,再貌似看懂了之后,开始了我的创作之旅(抄袭之路)。

先定一个小目标,比如先写一个通用插件写法。 通过看了多篇的博客和视频,终于掌握了jquery插件化的基本写法(对于一点都不懂前端的.net工程师压力好大,其中走了无数的弯路,差点丢了饭碗)。

 //闭包限定命名空间
 (function ($) {
     var Calendar= function () {
         var defaults = {
             onsuccess: function () { }
         }

         function Calendar(el, options)//定义构造函数
         {
             options = $.extend({}, defaults, options || {});
             this.init(el, options);
         }

         Calendar.prototype = {
             init: function (el, options) {
               options.onsuccess;
             },
         }

         return Calendar
     }()

     $.fn.Calendar= function (options) {
         return this.each(function () {
             new Calendar($(this), options)
         })
     }

 })(jQuery);
<script>
        $(function () {
            $("#lol").Calendar({

            });
        })
    </script> 

<div id="lol" class="layout">
    </div>

下面的内容是我自己写的,可能很烂,不需要者可以忽略。

接下来就是实现绘制日历,所以就借鉴某篇博客的日历实现思路(其实就是抄袭加稍加修改),终于完成初步绘制。

  fill: function (el, options) {
                var $this = this;
                var item = $(el).data('calendar');
                var cal = $(el);
                var calendarHtml = '<div class="layout"> <div id="jsc" style="width:110%;height:300px;"><div class="calendar"><div style="width:100%;">'
             + '<a href="#" class="calendar-btn calendar-btn-l"><span><img src="data:images/07.png"/></span></a>'
             + '<p class="calendar-year" id="pcalyear">' + options.year + '年'+options.month+'月</p>'
             + '<a href="#" class="calendar-btn  calendar-btn-r"><span><img src="data:images/09.png"/></span></a></div>'
             + '<div class="calendar-day" ><ul class="week week-b week-hd" ><li style="color:grey;">' + options.weeekday[0] + '</li><li>' + options.weeekday[1] + '</li><li>' + options.weeekday[2] + '</li><li>' + options.weeekday[3] + '</li><li>' + options.weeekday[4] + '</li><li>' + options.weeekday[3] + '</li><li style="color:grey;">' + options.weeekday[6] + '</li></ul>'
             + '<ul class="week week-b week-day week-day-b" id="caldayli"><li class="1"></li><li class="2"></li><li  class="3"></li><li  class="4" ></li><li class="5"></li><li class="6"></li><li class="7"></li></ul>'
             + '</div></div></div>'
             + '<input type="hidden" value="" id="selectYear"><input type="hidden" value="" id="selectMonth"><input type="hidden" value="" id="selectDay"><input type="hidden" value="3" id="selectMonIndex">'
             + '<div class="reset">'
             + '     <label for="checkday1"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg1">周一</label><input type="checkbox" id="checkday1" style="display:none" datanum="day1" value="1" />'
             + '     <label for="checkday2"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg2">周二</label><input type="checkbox" id="checkday2" style="display:none" datanum="day2" value="2" />'
             + '    <label for="checkday3"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg3">周三</label><input type="checkbox" id="checkday3" style="display:none" datanum="day3" value="3" />'
             + '    <label for="checkday4"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg4">周四</label><input type="checkbox" id="checkday4" style="display:none" datanum="day4" value="4" />'
             + '     <label for="checkday5"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg5">周五</label><input type="checkbox" id="checkday5" style="display:none" datanum="day5" value="5" />'
             + '     <label for="checkday6"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg6">周六</label><input type="checkbox" id="checkday6" style="display:none" datanum="day6" value="6" />'
             + '     <label for="checkday0"><img class="checkbox" alt="未选" src="data:images/19.png" id="checkimg0">周日</label><input type="checkbox" id="checkday0" style="display:none" datanum="day0" value="0" />'
             + '     <a href="#" class="change">重置</a>'
             + ' </div>'
             + ' <div id="gz" class="cc">'
             + '    <p id="tsgz"><span>特殊工作日</span>(默认是节假日,但是需要上班的日期)</p>'
             + '  </div>'
             + '<div id="jj" class="cc">'
             + ' <p id="tsjj"><span>节假日</span>(默认是上班日期,但是设置为节假日的日期)</p>'
             + ' </div>'
             + ' <div style="width:100%;">'
             + '  <input type="button" value="确认" id="btnsave" class="btn1" />'
             + '</div></div>';
                cal.html(calendarHtml);
                this.initTime(options)
                this.SetCheckbox(options)
                this.setCalendar(options)

                $(".reset>input:checkbox").click(function () {
                    $this.setOneDay($(this).val())
                })

                //日期点击事件
                cal.on("click", "#caldayli>li", function () {
                    var v = this.firstChild.innerHTML;//获取点击结点日期
                    $("#selectDay").val(v);//改变当前选择日期
                    var $selectDay = $("#selectDay").val();
                    var $selectMonth = parseInt($("#selectMonth").val()) + 1
                    var year = $("#selectYear").val();
                    var $monthday =year+"-"+$selectMonth + "-" + $selectDay;
                    if ($(this).hasClass("duty-cur")) {//要么周一到周五,fdgz,特殊gz
                        $(this).removeClass("duty-cur");
                        if ($.inArray($monthday, options.gonguzoarr) > -1) {
                            options.gonguzoarr.remove($monthday);
                            $this.removeGZ($monthday)
                        }
                        else {
                            options.jiejiaarr.push($monthday)
                            $this.Addtsjjicon($monthday)
                        }

                    }
                    else {//要么是周六周日,fdjj,特殊jj
                        $(this).addClass("duty-cur");
                        if ($.inArray($monthday, options.jiejiaarr) > -1) {//存在
                            options.jiejiaarr.remove($monthday);
                            $this.removeJJ($monthday)
                        }
                        else {//不存在,放进特殊工作日
                            options.gonguzoarr.push($monthday)
                            $this.Addtsgzicon($monthday)
                        }

                    }
                })
                //删除按钮点击事件
                cal.on("click", " .tsgzicon", function () {//删除
                    var item = $(this).parent('div').attr("data-num");
                    $(this).parent('div').remove();
                    options.gonguzoarr.remove(item);
                    $this.removeGZ(item);
                    //变为不是工作日,日历上直接修改,removeclass
                    if (true) {
                        $("span[datanum=" + item + "]").parent("li").removeClass("duty-cur");
                    }
                })
                //删除按钮点击事件
                cal.on("click", " .tsjjicon", function () {//删除
                    var item = $(this).parent('div').attr("data-num");
                    $(this).parent('div').remove();
                    options.jiejiaarr.remove(item);
                    $this.removeJJ(item);
                    //变为工作日日历上直接修改,addclass
                    if (true) {
                        $("span[datanum=" + item + "]").parent("li").addClass("duty-cur");
                    }
                })

                //翻页
                cal.on('click', '.calendar-btn-l', function () {
                    $this.setLastMonth(options);
                })
                cal.on('click', '.calendar-btn-r', function () {
                    $this.setNextMonth(options);
                })
                cal.on('click', '.change', function () {
                    $this.Change(options);
                })
                $("#btnsave").click(function () {
                    options.onsuccess;
                })

            },
            initTime : function (options) {
                var selectYear = options.year;
                $("#selectYear").val(selectYear);
                $("#selectMonth").val(options.month-1);
                $("#selectDay").val(1);
            },
            setCalendar: function (options) {
                this.clearCalendar();
                var selectYear = $("#selectYear").val();
                var selectMonth = $("#selectMonth").val();
                var selectDay = $("#selectDay").val();
                var dmonth = selectMonth * 1 + 1;//获取当月最后一天所用月份(下个月的第0天)
                var dayNum = new Date(selectYear, dmonth, 0);//获取当月的最后一天
                dayNum = dayNum.getDate();
                var selectMonthDay = new Date(selectYear, selectMonth, 1);//选择月份的第一天
                var firstDayWeek = selectMonthDay.getDay();//获取第一天的星期

                for (var i = firstDayWeek, j = 1; i <= $(".week-day-b li").length && j <= dayNum; i++, j++) {
                    //法定节假日
                    var monthday = selectYear + "-" + (parseInt(selectMonth) + 1) + "-" + j;
                    $(".week-day-b li").eq(i).html("<span id='id" + j + "' datanum='" + monthday + "'>" + j + "</span>");//填写日期

                    //判断公司规定工作日(如周1到周4,周六)
                    var day = $(".week-day-b li").eq(i).attr('class');
                    if ($.inArray(day, options.mrsb) > -1) {
                        $(".week-day-b li").eq(i).addClass("duty-cur");
                    }

                    if ($.inArray(monthday, options.fdgz) > -1) {
                        if (!$(".week-day-b li").eq(i).hasClass("duty-cur")) {
                            $(".week-day-b li").eq(i).addClass("duty-cur");
                        }
                    }
                    if ($.inArray(monthday, options.fdjj) > -1) {
                        if ($(".week-day-b li").eq(i).hasClass("duty-cur")) {
                            $(".week-day-b li").eq(i).removeClass("duty-cur");
                        }
                    }
                    //判断公司规定的特殊节假日,工作日
                    if ($.inArray(monthday, options.gonguzoarr) > -1) {
                        if (!$(".week-day-b li").eq(i).hasClass("duty-cur")) {
                            $(".week-day-b li").eq(i).addClass("duty-cur");
                        }
                    }
                    if ($.inArray(monthday, options.jiejiaarr) > -1) {
                        if ($(".week-day-b li").eq(i).hasClass("duty-cur")) {
                            $(".week-day-b li").eq(i).removeClass("duty-cur");
                        }
                    }

                    if (i == $(".week-day-b li").length - 1 && j != dayNum) {//如果日历格子不够再画一行
                        for (var k = 0; k < 7; k++) {
                            $("#caldayli").append("<li class='day" + k + "'></li>");
                        }
                    }

                }
            },
            clearCalendar: function () {
                $("#caldayli").html("");
                for (var k = 0; k < 7; k++) {
                    $("#caldayli").append("<li  class='day" + k + "'></li>");
                }
            },
            setLastMonth : function (options) {
                this.clearCalendar();
                var selectYear = $("#selectYear").val();
                var selectMonth = $("#selectMonth").val();
                if (selectMonth == 0) {
                    $("#selectYear").val(parseInt(selectYear) - 1);
                    $("#selectMonth").val(11);
                }
                else {
                    $("#selectMonth").val(parseInt(selectMonth) - 1);
                }

                this.SetYearMonth($("#selectYear").val(), parseInt($("#selectMonth").val()) + 1)
                this.setCalendar(options);
            },
            setNextMonth : function (options) {
                this.clearCalendar();
                var selectYear = $("#selectYear").val();
                var selectMonth = $("#selectMonth").val();
                if (selectMonth == 11) {
                    $("#selectYear").val(parseInt(selectYear) + 1);
                    $("#selectMonth").val(0);
                }
                else {
                    $("#selectMonth").val(parseInt(selectMonth) + 1);
                }
                this.SetYearMonth($("#selectYear").val(), parseInt($("#selectMonth").val()) + 1)
                this.setCalendar(options);
            },
            SetYearMonth : function (year, month) {
                $("#pcalyear").html(year + "年" + month + "月");//改变显示年
            },

做完了之后,就是做日期管理了,由于不是专业的,只好随便写写,先做了几个关于array辅助js。

function arrayRemove(arr1, arr2) {
    for (var j = 0 ; j < arr2.length ; j++) {
        if ($.inArray(arr2[j], arr1) > -1) {
            arr1.remove(arr2[j])
        }
    }
}//去除arr2的

function arrayCombine(arr1, arr2) {
    var arr3 = [].concat(arr2)
    for (var i = 0 ; i < arr1.length ; i++) {
        for (var j = 0 ; j < arr3.length ; j++) {
            if (arr1[i] === arr3[j]) {
                arr3.splice(j, 1); //利用splice函数删除元素,从第i个位置,截取长度为1的元素
            }
        }
    }
    for (var i = 0; i < arr3.length; i++) {
        arr1.push(arr3[i]);
    }
    return arr1;
}//合并

function arrayIntersection(arr1, arr2) {
    var result = new Array();
    for (var i = 0 ; i < arr1.length ; i++) {
        for (var j = 0 ; j < arr2.length ; j++) {
            if (arr1[i] === arr2[j]) {
                result.push(arr1[i]);
            }
        }
    }
    return result;
}//交集

Array.prototype.indexOf = function (val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};
Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

接下来就是制作功能。

  Addtsgzicon : function (item) {
                $("#tsgz").after("<div class=\"icon\" data-num=\"" + item + "\"><span>" + item + "</span><img class=\"tsgzicon\" src=\"images/03.png\" /></div>")
            },
            Addtsjjicon : function (item) {
                $("#tsjj").after("<div class=\"icon\" data-num=\"" + item + "\"><span>" + item + "</span><img class=\"tsjjicon\" src=\"images/03.png\" /></div>")
            },
            removeGZ : function (item) {
                $("#gz").find("div[data-num=" + item + "]").remove();
            },
            removeJJ : function (item) {
                $("#jj").find("div[data-num=" + item + "]").remove();
            },
            removeGZAll : function () {
                $("#gz").find("div").remove();
            },
            removeJJAll : function () {
                $("#jj").find("div").remove();
            },
            Change : function (options) {
                options.gonguzoarr = [];
                options.jiejiaarr = [];
                options.mrsb = [];

                this.removeGZAll();
                this.removeJJAll();

                //获取你重置的checkbox的值放入mrsb
                $('input:checked').each(function () {
                    options.mrsb.push($(this).attr("datanum"))
                })
                this.setCalendar(options)
            },
            setOneDay: function (num) {
                if ($("#checkday" + num).is(":checked")) {
                    $("#checkimg" + num).attr('src', 'images/18.png')
                    $("#checkimg" + num).attr('alt', '选中')
                    // $(".day" + num).addClass("duty-cur");
                }
                else {
                    $("#checkimg" + num).attr('src', 'images/19.png')
                    $("#checkimg" + num).attr('alt', '未选')
                    //  $(".day" + num).removeClass("duty-cur");
                }
            },
            SetCheckbox: function (options) {
                var $this = this;
                $.each(options.mrsb, function (index, item) {
                    $("[datanum=" + item + "]:checkbox").attr("checked", true);
                    var checkboxvalue = $("[datanum=" + item + "]:checkbox").val();
                    $this.setOneDay(checkboxvalue);
                })
            },

链接:https://github.com/hmllk/calendar

被逼着写的jquery工作日管理日历插件的更多相关文章

  1. Jquery中的日历插件

    这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...

  2. 自己写一个jQuery垂直滚动栏插件(panel)

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

  3. 【UI插件】简单的日历插件(下)—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  4. jquery.fullCalendar官方文档翻译(一款小巧好用的日程管理日历, 可集成Google Calendar)

    1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options});  接受的是一个option对象 2. 普通属性 2.1. year, ...

  5. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  6. 10个漂亮的jQuery日历插件下载【转载】

    10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件   日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...

  7. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  8. 一款基于jQuery日历插件的开发过程

    这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的  也就是说  日历的样式是定制的: /******************************** ...

  9. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

随机推荐

  1. 通过adb方式给安卓手机截图的cmd批处理文件

    @echo off rem  通过adb方式截图rem  需要安装adb ,一般安装了android sdk 默认带了adb ,路径为sdk目录的android-sdk\platform-toolsr ...

  2. HttpClient的替代者 - RestTemplate

    需要的包 ,除了Spring的基础包外还用到json的包,这里的数据传输使用json格式 客户端和服务端都用到一下的包 <!-- Spring --> <dependency> ...

  3. jQuery学习之路(3)- 事件

    ▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...

  4. 如何在网页中提取Email地址

    开博好久了,今天第一次发表技术文档,之前总是将一些好的事例保存在电脑,时间久了找起来也很麻烦,所以还是放在博客里进行归类比较方便,这样也能将自己在学习过程中的一些心得体会分享给大家,也能给需要的人一点 ...

  5. Android 剪贴板详解

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Clipboard 如本文有助于你理解 Android 剪贴板,不妨给我一个 Star.对于码农而言, ...

  6. Http请求

    HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. 请求报文 一个HTTP请求报文由请求行(request line ...

  7. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  8. 代码的坏味道(18)——依恋情结(Feature Envy)

    坏味道--依恋情结(Feature Envy) 特征 一个函数访问其它对象的数据比访问自己的数据更多. 问题原因 这种气味可能发生在字段移动到数据类之后.如果是这种情况,你可能想将数据类的操作移动到这 ...

  9. 分布式学习系列【dubbo入门实践】

    分布式学习系列[dubbo入门实践] dubbo架构 组成部分:provider,consumer,registry,monitor: provider,consumer注册,订阅类似于消息队列的注册 ...

  10. H3 BPM让天下没有难用的流程之技术特性

    一.集成性  H3 BPM可以与其它系统进行多个层面的集成,满足企业的针对不同系统的集成需求. 图:多种集成维度 Ø  用户集成 可与企业现有系统进行组织架构同步或调用,也可以直接与AD 进行集成. ...