被逼着写的jquery工作日管理日历插件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了被逼着写的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 Calendar 21 }() 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 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="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="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="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="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="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="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="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="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="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工作日管理日历插件的主要内容,如果未能解决你的问题,请参考以下文章