编程 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 相关文章推荐

基于jquery tab切换(防止页面刷新)

May 23 Javascript

固定表格行列(expression)在IE下适用

Jul 25 Javascript

jquery和ajax的关系详细介绍

Nov 29 Javascript

JavaScript中实现PHP的打乱数组函数shuffle实例

Oct 11 Javascript

node.js中的fs.mkdirSync方法使用说明

Dec 17 Javascript

js获取及修改网页背景色和字体色的方法

Dec 29 Javascript

Angular.js实现多个checkbox只能选择一个的方法示例

Feb 24 Javascript

js轮播图无缝滚动效果

Jun 17 Javascript

关于react-router的几种配置方式详解

Jul 24 Javascript

ES6新增的math,Number方法

Aug 06 Javascript

浅析Proxy可以优化vue的数据监听机制问题及实现思路

Nov 29 Javascript

JS实现的进制转换，浮点数相加，数字判断操作示例

Nov 09 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