jQuery事件日历插件e-calendar,支持针对指定日期自定义日程安排(无条数限制),设置过日程的日期会高亮显示,兼容IE7+主流浏览器。
原版使用方法及演示地址:e-calendar原版 (鼠标移动到天显示当天的日程安排)

升级版介绍:
1.同一天可存在多个事件交集
2.点击天在日历下方出现日程列表
3.点击日程列表可添加其事件 。
4.添加item-grid的显示和隐藏
5.Events中数组集合可添加id,type等元素(区分日程类型:任务类型或日程类型)
6.增加年份选择,月份选择
7.样式调整
8.将ajax加载事件,item点击事件等写在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 () {










