jquery ajax 日历,jquery日历插件e-calendar升级版

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

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

升级版介绍:

1.同一天可存在多个事件交集

2.点击天在日历下方出现日程列表

3.点击日程列表可添加其事件 。

4.添加item-grid的显示和隐藏

5.Events中数组集合可添加id，type等元素(区分日程类型：任务类型或日程类型)

6.增加年份选择,月份选择

7.样式调整

8.将ajax加载事件,item点击事件等写在calendar配置中

运行效果图:

主要代码:

index.html

$(document).ready(function () {

$('#calendar').eCalendar({

yearRange:['2015','2016','2017','2018','2019','2020','2021'], //年的下拉框

weekDays: ['日', '一', '二', '三', '四', '五', '六'],

months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],//月的下拉框

// textArrows: { previous: '' }, //改为图片< >

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);

}

});

});

e-calendar

通过$('#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 = $('

var cEvents = $('

cEvents.css("display", "none"); //默认隐藏

var cEventsBody = $('

cEvents.append($('

//关闭按钮

var itemClose = $('

var itemClose_a = $('').on('click', onItemGridClose).attr("href", "javascipt:void(0)")

.html('');

itemClose.addClass('c-close-top').html(itemClose_a);

//itemClose.attr('onclick', "onItemGridClose()");

cEvents.append(itemClose);

cEvents.append(cEventsBody); //主体

var cTitle = $('

var cYear=$('

var cMonth = $('

var cPage= $('

//年份选择事件,初始化

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

year_sel.options.add(new Option(yearRanges[i],yearRanges[i]));

}

year_sel.οnchange=function(){

selectYear();

}

for(var i=0; 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

month_sel.options.add(new Option(monthRanges[i],i));

}

month_sel.οnchange=function(){

selectMonth();

}

for(var i=0; i

if(month_sel.options[i].innerHTML ==monthRanges[dMonth]){

month_sel.options[i].selected = true;

break;

}

}

//end

var cPrevious=$('').on('click', previousMonth).attr("href","javascipt:void(0)")

.html('');

var cNext=$('').on('click', nextMonth).attr("href","javascipt:void(0)")

.html('');

//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 = $('

cWeekDay.html(settings.weekDays[i]);

cBody.append(cWeekDay);

}

var day = 1;

var dayOfNextMonth = 1;

for (var i = 0; i < 42; i++) {

var cDay = $('

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 = $('

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 = $('

item.attr("title", settings.events[i].description); //鼠标移动显示提示文字

//var title = $('

');

var title = $('

');

var description = $('

');

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: '' },

eventTitle: 'Eventos',

url: '',

events: [

]

};

}(jQuery));

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