编程 Javascript

jquery日历插件e-calendar升级版

Posted in Javascript onNovember 10, 2016

jQuery事件日历插件e-calendar，支持针对指定日期自定义日程安排（无条数限制），设置过日程的日期会高亮显示，兼容IE7+主流浏览器。

原版使用方法及演示地址:e-calendar原版 (鼠标移动到天显示当天的日程安排)

升级版介绍:

1.同一天可存在多个事件交集
2.点击天在日历下方出现日程列表
3.点击日程列表可添加其事件。
4.添加item-grid的显示和隐藏
5.Events中数组集合可添加id，type等元素(区分日程类型：任务类型或日程类型)

6.增加年份选择,月份选择
7.样式调整
8.将ajax加载事件,item点击事件等写在calendar配置中

运行效果图:

jquery日历插件e-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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jquery日历插件e-calendar升级版

- Author -

齐大人

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用js写了一个类似php的print_r输出换行功能

Feb 18 Javascript

JS中批量给元素绑定事件过程中的相关问题使用闭包解决

Apr 15 Javascript

JavaScript实现计算字符串中出现次数最多的字符和出现的次数

Mar 12 Javascript

在JavaScript中对HTML进行反转义详解

May 18 Javascript

AngularJS API之copy深拷贝详解及实例

Sep 14 Javascript

jquery easyui validatebox remote的使用详解

Nov 09 Javascript

vue实现todolist单页面应用

Apr 11 Javascript

Angular搜索场景中使用rxjs的操作符处理思路

May 30 Javascript

JS实现的input选择图片本地预览功能示例

Aug 29 Javascript

在Vue 中使用Typescript的示例代码

Sep 10 Javascript

微信小程序全局变量改变监听的实现方法

Jul 15 Javascript

jQuery实现穿梭框效果

Jan 19 jQuery

Vue.js开发环境搭建

Nov 10 #Javascript

js 获取本地文件及目录的方法(推荐)

Nov 10 #Javascript

javascript中的后退和刷新实现方法

Nov 10 #Javascript

jQuery中Nicescroll滚动条插件的用法

Nov 10 #Javascript

js对字符串进行编码的方法总结(推荐)

Nov 10 #Javascript

EasyUI 结合JS导出Excel文件的实现方法

Nov 10 #Javascript

浅谈MVC+EF easyui dataGrid 动态加载分页表格

Nov 10 #Javascript