你的位置:首页 > Java教程

[Java教程]被逼着写的jquery工作日管理日历插件


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

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

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

 1 //闭包限定命名空间 2 (function ($) { 3   var Calendar= function () { 4     var defaults = { 5       onsuccess: function () { } 6     } 7  8     function Calendar(el, options)//定义构造函数 9     {10       options = $.extend({}, defaults, options || {});11       this.init(el, options);12     }13 14     Calendar.prototype = {15       init: function (el, options) {16        options.onsuccess;17       },18     }19 20     return Calendar21   }()22 23   $.fn.Calendar= function (options) {24     return this.each(function () {25       new Calendar($(this), options)26     })27   }28 29 })(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 > <div id="jsc" ><div ><div >'       + '<a href="#" ><span><img src="images/07.png"/></span></a>'       + '<p id="pcalyear">' + options.year + '年'+options.month+'月</p>'       + '<a href="#" ><span><img src="images/09.png"/></span></a></div>'       + '<div ><ul ><li >' + 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 >' + options.weeekday[6] + '</li></ul>'       + '<ul id="caldayli"><li ></li><li ></li><li ></li><li  ></li><li ></li><li ></li><li ></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 >'       + '   <label for="checkday1"><img alt="未选" src="images/19.png" id="checkimg1">周一</label><input type="checkbox" id="checkday1" datanum="day1" value="1" />'       + '   <label for="checkday2"><img alt="未选" src="images/19.png" id="checkimg2">周二</label><input type="checkbox" id="checkday2" datanum="day2" value="2" />'       + '  <label for="checkday3"><img alt="未选" src="images/19.png" id="checkimg3">周三</label><input type="checkbox" id="checkday3" datanum="day3" value="3" />'       + '  <label for="checkday4"><img alt="未选" src="images/19.png" id="checkimg4">周四</label><input type="checkbox" id="checkday4" datanum="day4" value="4" />'       + '   <label for="checkday5"><img alt="未选" src="images/19.png" id="checkimg5">周五</label><input type="checkbox" id="checkday5" datanum="day5" value="5" />'       + '   <label for="checkday6"><img alt="未选" src="images/19.png" id="checkimg6">周六</label><input type="checkbox" id="checkday6" datanum="day6" value="6" />'       + '   <label for="checkday0"><img alt="未选" src="images/19.png" id="checkimg0">周日</label><input type="checkbox" id="checkday0" datanum="day0" value="0" />'       + '   <a href="#" >重置</a>'       + ' </div>'       + ' <div id="gz" >'       + '  <p id="tsgz"><span>特殊工作日</span>(默认是节假日,但是需要上班的日期)</p>'       + ' </div>'       + '<div id="jj" >'       + ' <p id="tsjj"><span>节假日</span>(默认是上班日期,但是设置为节假日的日期)</p>'       + ' </div>'       + ' <div >'       + ' <input type="button" value="确认" id="btnsave" />'       + '</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 + "月");//改变显示年      },

View Code

     做完了之后,就是做日期管理了,由于不是专业的,只好随便写写,先做了几个关于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);        })      },

View Code

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