被逼着写的jquery工作日管理日历插件
因为工作原因，在我刚进入新公司之后，立马要求让我做一个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工作日管理日历插件的更多相关文章
- Jquery中的日历插件
这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...
- 自己写一个jQuery垂直滚动栏插件（panel）
html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...
- 【UI插件】简单的日历插件（下）—— 学习MVC思想
前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...
- jquery.fullCalendar官方文档翻译(一款小巧好用的日程管理日历, 可集成Google Calendar)
1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的是一个option对象 2. 普通属性 2.1. year, ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 10个漂亮的jQuery日历插件下载【转载】
10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
随机推荐
- NodeJs之调试
关于调试 当我们只专注于前端的时候,我们习惯性F12,这会给我们带来安全与舒心的感觉. 但是当我们使用NodeJs来开发后台的时候,我想噩梦来了. 但是也别泰国担心,NodeJs的调试是很不方便!这是 ...
- 从0开始搭建SQL Server AlwaysOn 第二篇（配置故障转移集群）
从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
- [APUE]文件和目录(下)
一.mkdir和rmdir函数 #include <sys/types.h> #include <sys/stat.h> int mkdir(const char *pathn ...
- RabbitMq应用一
RabbitMq应用一 RabbitMQ的具体概念,百度百科一下,我这里说一下我的理解,如果有少或者不对的地方,欢迎纠正和补充. 一个项目架构,小的时候,一般都是传统的单一网站系统,或者项目,三层架构 ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- 微信公众号开发（一）--验证服务器地址的Java实现
现在主流上都用php写微信公众号后台,其实作为后端语言之一的java也可以实现. 这篇文章将对验证服务器地址这一步做出实现. 参考资料:1.慕课网-<初识java微信公众号开发>,2.微信 ...
- Postman - 功能强大的 API 接口请求调试和管理工具
Postman 是一款功能强大的的 Chrome 应用,可以便捷的调试接口.前端开发人员在开发或者调试 Web 程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的 Fi ...
- Eclipse出现"Running Android Lint has encountered a problem"解决方案
安装eclipse for android 时候的错误记录,转载自:http://blog.csdn.net/chenyufeng1991/article/details/47442555 (1)打开 ...
- Java企业实训 - 01 - Java前奏
前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...
- JS案例之2——cycle元素轮播
元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...