首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery日历插件e-calendar升级版

Posted in Javascript onNovember 10, 2016

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

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

jquery日历插件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 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
超全面的JavaScript开发规范（推荐）
Jan 21 Javascript
详解vue中axios的封装
Jul 18 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
Promise扫盲贴
Jun 24 Javascript
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
i7 6700(1) win11(40) R71E(1) 对讲机(1) React(6) i5 9400(1) R72E(1) i5 10400(1) GTX1660(1) win10(43)
You might like
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
PHP图片裁剪函数（保持图像不变形）
2014/05/04 PHP
PHP链表操作简单示例
2016/10/15 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
javascript编程起步（第三课）
2007/02/27 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么？
2017/02/10 Javascript
jquery编写日期选择器
2017/03/16 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
5种Python单例模式的实现方式
2016/01/14 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
django框架自定义用户表操作示例
2018/08/07 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
pandas中的series数据类型详解
2019/07/06 Python
详解Django CAS 解决方案
2019/10/30 Python
详解python itertools功能
2020/02/07 Python
Python实现密钥密码（加解密）实例详解
2020/04/26 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
详解Python模块化编程与装饰器
2021/01/16 Python
化学实验员岗位职责
2013/12/28 职场文书
入学申请自荐信范文
2014/02/26 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
撤诉状格式范本
2015/05/19 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书