jquery日历插件e-calendar升级版

jQuery事件日历插件e-calendar，支持针对指定日期自定义日程安排（无条数限制），设置过日程的日期会高亮显示，兼容IE7+主流浏览器。
原版使用方法及演示地址:e-calendar原版（鼠标移动到天显示当天的日程安排）

升级版介绍:
1.同一天可存在多个事件交集
2.点击天在日历下方出现日程列表
3.点击日程列表可添加其事件。
4.添加item-grid的显示和隐藏
5.Events中数组集合可添加id，type等元素（区分日程类型：任务类型或日程类型）
6.增加年份选择,月份选择
7.样式调整
8.将ajax加载事件,item点击事件等写在calendar配置中
运行效果图:

主要代码:
index.html

<！DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/jquery.e-calendar.css" /> <script src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/jquery.e-calendar.js"></script> <script type="text/javascript"> $（document）.ready（function （） { $（"#calendar"）.eCalendar（{ yearRange:["2015","2016","2017","2018","2019","2020","2021"], //年的下拉框 weekDays: ["日", "一", "二", "三", "四", "五", "六"], months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],//月的下拉框 // textArrows: { previous: "<", next: ">" }, //改为图片< > eventTitle: "日程列表", initData: function （settings, month） {//日历加载的数据格式要求:// settings.events = [// { id: "a1", type: "calendar", title: "222", description: "日程", datetime: new Date（2016, new Date（）.getMonth（）, 15, 17） }// ];settings.events = [];if （month） {var sourse = [];$.ajax（{type: "POST",data: { month: month },async: false,url: "/Calendar/GetHomeCalendar?t=" + new Date（）.getMilliseconds（）,success: function （data） {var result = JSON.parse（data）;for （var i = 0; i < result.length; i++） { var item = { id: result[i].Id, type: result[i].Type, title: result[i].Title, description: result[i].Description, datetime: new Date（result[i].Datetime） } sourse.push（item）;}settings.events = sourse;},error: function （） {}}）;} }, //下面详情Item的点击事件 clickItem: function （） {var id = $（this）.attr（"cid"）;var type = $（this）.attr（"ctype"）;alert（"点击id：" + id + "
 类型：" + type）; } }）; }）; </script></head><body> <h1 style="text-align:center;">e-calendar</h1> <div id="calendar"></div></body></html>

通过$（"#calendar"）.eCalendar（）来配置日历加载

参数
yearRange：年下拉框范围
months:月下拉框
initData：数据初始化调用的函数
clickItem：日历列表点击事件
jquery.e-calendar.js

/** * @license e-Calendar v2.0.0 * （c） 2016- 11 * License: CHN */（function （$） { var dMonth = new Date（）.getMonth（）; var dYear = new Date（）.getFullYear（）; var eCalendar = function （options, object） { // Initializing global variables var adDay = new Date（）.getDate（）; var adMonth = new Date（）.getMonth（）; var adYear = new Date（）.getFullYear（）; var dDay = adDay; //var dMonth = adMonth; //var dYear = adYear; var instance = object; var settings = $.extend（{}, $.fn.eCalendar.defaults, options）; function lpad（value, length, pad） { if （typeof pad == "undefined"） { pad = "0"; } var p; for （var i = 0; i < length; i++） { p += pad; } return （p + value）.slice（-length）; } var mouseOver = function （） { $（this）.addClass（"c-nav-btn-over"）; }; var mouseLeave = function （） { $（this）.removeClass（"c-nav-btn-over"）; }; var testFunction=function（）{ alert（"function active"）; } var onItemGridClose = function （） { $（".c-event-grid"）.css（"display", "none"）; }; //日历天事件 var mouseOverEvent = function （） { $（this）.addClass（"c-event-over"）; var d = $（this）.attr（"data-event-day"）; $（"div.c-event-item[data-event-day="" + d + ""]"）.addClass（"c-event-over"）; }; var mouseClickEvent = function （） { $（".c-event-grid"）.css（"display", ""）; $（"div.c-day"）.removeClass（"c-event-over"） $（"div.c-event-item"）.removeClass（"c-event-over"）; $（this）.addClass（"c-event-over"）; var d = $（this）.attr（"data-event-day"）; $（"div.c-event-item[data-event-day="" + d + ""]"）.addClass（"c-event-over"）; }; var mouseLeaveEvent = function （） { }; var mouseClickItem = settings.clickItem; var mouseOverItem = function （） { $（this）.addClass（"c-event-over-item"）; }; var mouseLeaveItem = function （） { $（this）.removeClass（"c-event-over-item"） }; var nextMonth = function （） { if （dMonth < 11） { dMonth++; } else { dMonth = 0; dYear++; } init_eCalendar（）; var ajaxMonth = dYear + "-" + （dMonth - （-1））; loadeCalendarByAjax（settings, ajaxMonth）; }; var previousMonth = function （） { if （dMonth > 0） { dMonth--; } else { dMonth = 11; dYear--; } init_eCalendar（）; var ajaxMonth = dYear + "-" + （dMonth - （-1））; loadeCalendarByAjax（settings, ajaxMonth）; }; var selectYear=function（）{ dYear=$（"#selYears"）.val（）; init_eCalendar（）; var ajaxMonth = dYear + "-" + （dMonth - （-1））; loadeCalendarByAjax（settings, ajaxMonth）; } var selectMonth=function（）{ dMonth=$（"#selMonths"）.val（）; init_eCalendar（）; var ajaxMonth = dYear + "-" + （dMonth - （-1））; loadeCalendarByAjax（settings, ajaxMonth）; } function loadEvents（） { if （typeof settings.initData ！= "undefined" && settings.initData） { var ajaxMonth = dYear + "-" + （dMonth - （-1））; loadeCalendarByAjax（settings, ajaxMonth）;//调前台的方法请求 } } //初始化加载事件 function loadeCalendarByAjax（settings, ajaxMonth） { if （typeof settings.initData ！= "undefined"） { settings.initData（settings, ajaxMonth）; } } function init_eCalendar（） { loadEvents（）; var dWeekDayOfMonthStart = new Date（dYear, dMonth, 1）.getDay（）; var dLastDayOfMonth = new Date（dYear, dMonth + 1, 0）.getDate（）; var dLastDayOfPreviousMonth = new Date（dYear, dMonth + 1, 0）.getDate（） - dWeekDayOfMonthStart + 1; var cBody = $（"<div/>"）.addClass（"c-grid"）; var cEvents = $（"<div/>"）.addClass（"c-event-grid"）; cEvents.css（"display", "none"）; //默认隐藏 var cEventsBody = $（"<div/>"）.addClass（"c-event-body"）; cEvents.append（$（"<div/>"）.addClass（"c_title_sj"）.html（settings.eventTitle））; //标题 //关闭按钮 var itemClose = $（"<div/>"）.on（"click", onItemGridClose）.attr（"href", "javascipt:void（0）"）; var itemClose_a = $（"<a/>"）.on（"click", onItemGridClose）.attr（"href", "javascipt:void（0）"）.html（"<img src="img/calendar_delete_icon.png">"）; itemClose.addClass（"c-close-top"）.html（itemClose_a）; //itemClose.attr（"onclick", "onItemGridClose（）"）; cEvents.append（itemClose）; cEvents.append（cEventsBody）; //主体 var cTitle = $（"<div/>"）.addClass（"top_calendar_div"）; var cYear=$（"<div/>"）.addClass（"c_years"）; var cMonth = $（"<div/>"）.addClass（"c_months"）; var cPage= $（"<div/>"）.addClass（"c_pages"）; //年份选择事件,初始化 var year_sel=document.createElement（"select"）;year_sel.setAttribute（"id","selYears"）; //year_sel.options.add（new Option（"2016","2016"））; var yearRanges=settings.yearRange||new Array（）.push（dYear）; //年份的区间,无值时默认当前年份 for（var i=0;i<yearRanges.length;i++）{ year_sel.options.add（new Option（yearRanges[i],yearRanges[i]））; }year_sel.onchange=function（）{ selectYear（）; } for（var i=0; i<year_sel.options.length; i++）{if（year_sel.options[i].innerHTML == dYear）{ year_sel.options[i].selected = true; break;}}//end //月份选择事件,初始化 var month_sel=document.createElement（"select"）;month_sel.setAttribute（"id","selMonths"）; var monthRanges=settings.months||[]; //月份 for（var i=0;i<monthRanges.length;i++）{ month_sel.options.add（new Option（monthRanges[i],i））; } month_sel.onchange=function（）{ selectMonth（）; } for（var i=0; i<month_sel.options.length; i++）{if（month_sel.options[i].innerHTML ==monthRanges[dMonth]）{ month_sel.options[i].selected = true; break;}}//end var cPrevious=$（"<a/>"）.on（"click", previousMonth）.attr（"href","javascipt:void（0）"）.html（"<img src="img/page_left.png">"）; var cNext=$（"<a/>"）.on（"click", nextMonth）.attr（"href","javascipt:void（0）"）.html（"<img src="img/page_right.png">"）;//cMonth.html（settings.months[dMonth] + " " + dYear）; cYear.html（year_sel）; cMonth.html（month_sel）; cPage.append（cPrevious）; cPage.append（cNext）; cTitle.append（cYear）; cTitle.append（cMonth）; cTitle.append（cPage）; cBody.append（cTitle）;for （var i = 0; i < settings.weekDays.length; i++） { var cWeekDay = $（"<div/>"）.addClass（"c-week-day c-pad-top"）; cWeekDay.html（settings.weekDays[i]）; cBody.append（cWeekDay）; } var day = 1; var dayOfNextMonth = 1; for （var i = 0; i < 42; i++） { var cDay = $（"<div/>"）; if （i < dWeekDayOfMonthStart） {cDay.addClass（"c-day-previous-month c-pad-top"）;cDay.html（dLastDayOfPreviousMonth++）; } else if （day <= dLastDayOfMonth） {cDay.addClass（"c-day c-pad-top"）;if （day == dDay && adMonth == dMonth && adYear == dYear） {cDay.addClass（"c-today"）;}for （var j = 0; j < settings.events.length; j++） {var d = settings.events[j].datetime;if （d.getDate（） == day && d.getMonth（） == dMonth && d.getFullYear（） == dYear） {cDay.addClass（"c-event"）.attr（"data-event-day", d.getDate（））;cDay.on（"click", mouseClickEvent）.on（"mouseleave", mouseLeaveEvent）;}}cDay.html（day++）; } else {cDay.addClass（"c-day-next-month c-pad-top"）;cDay.html（dayOfNextMonth++）; } cBody.append（cDay）; } var eventList = $（"<div/>"）.addClass（"c-event-list"）; for （var i = 0; i < settings.events.length; i++） { var d = settings.events[i].datetime; if （d.getMonth（） == dMonth && d.getFullYear（） == dYear） {var date = lpad（d.getDate（）, 2） + "/" + lpad（d.getMonth（） + 1, 2） + " " + lpad（d.getHours（）, 2） + ":" + lpad（d.getMinutes（）, 2）;//cid赋给div,查看日程是传递;ctype:任务或日程var item = $（"<div/>"）.addClass（"c-event-item"）.attr（"cid", settings.events[i].id）.attr（"ctype", settings.events[i].type）;item.attr（"title", settings.events[i].description）; //鼠标移动显示提示文字//var title = $（"<div/>"）.addClass（"title"）.html（date + " " + settings.events[i].title + "<br/>"）;var title = $（"<div/>"）.addClass（"title"）.html（settings.events[i].title + "<br/>"）;var description = $（"<div/>"）.addClass（"description"）.html（settings.events[i].description + "<br/>"）;item.attr（"data-event-day", d.getDate（））;item.on（"mouseover", mouseOverItem）.on（"mouseleave", mouseLeaveItem）;item.append（title）.append（description）;//c-event-item的点击事件item.on（"click", mouseClickItem）;eventList.append（item）; } } $（instance）.addClass（"calendar"）; cEventsBody.append（eventList）; $（instance）.html（cBody）.append（cEvents）; } return init_eCalendar（）; } $.fn.eCalendar = function （oInit） { return this.each（function （） { return eCalendar（oInit, $（this））; }）; }; // plugin defaults $.fn.eCalendar.defaults = { weekDays: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"], months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"], textArrows: { previous: "<", next: ">" }, eventTitle: "Eventos", url: "", events: [ ] };}（jQuery））;

下载地址:e-calendar-v2
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。