首页
所有分类
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下判断是否为闰年的Datetime包
Oct 26 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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
文字识别(1) flex(1) Pytesseract(1) SFTP(3) flex-shrink(1) 柱状图(1) 追加文本(1) GNN(1) 匹配文本(1) 图片模糊(1)
You might like
PHP基于imap获取邮件实例
2014/11/11 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
设定php简写功能的方法
2019/11/28 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
python黑魔法之参数传递
2016/02/12 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python openpyxl使用方法详解
2019/07/18 Python
Python实现Restful API的例子
2019/08/31 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
意大利简约的休闲品牌：Aspesi
2018/02/08 全球购物
澳大利亚Mocha官方网站：包、钱包、珠宝和配饰
2019/07/18 全球购物
Haggar官网：美国男装品牌
2020/02/16 全球购物
如何设置Java的运行环境
2013/04/05 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
《荷花》教学反思
2014/04/16 职场文书
教师节领导致辞
2015/07/29 职场文书
学生会工作感言
2015/08/07 职场文书
2019年教师入党申请书
2019/06/27 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python
python实现简单的三子棋游戏
2022/04/28 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技