jquery日历插件e-calendar升级版

2019-11-19 18:59:18

字体：大中小

来源：转载

供稿：网友

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 + "/r/n 类型：" + 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：关于json字符串与实体之间的严格验证代码

下一篇：Vue.js开发环境搭建