带农历的FullCalendar日历使用解析

演示代码见附件,
1、使用josn获取日历对象
2、日历带有农历
3、后台可以获取开始时间和结束时间
4、日期事件里面可以添加图标
等等
。。。。
代码访问fullCalendar.jsp

---------------------------代码讲解,主调用fullCalendar.jsp--------


<%@page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath() %>/dutyCalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath() %>/dutyCalendarr/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='<%=request.getContextPath() %>/dutyCalendar/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dutyCalendar/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dutyCalendar/fullcalendar.js'></script>

<script type='text/javascript'>

$(document).ready(function() {



var date = new Date();

var d = date.getDate();

var m = date.getMonth();

var y = date.getFullYear();
var tt="";
var calendar = $('#calendar').fullCalendar({
dayClick: function() {
alert('a day has been clicked!');
},
eventClick: function(event) {
// opens events in a popup window
//window.open('http://www.baidu.com', 'gcalevent', 'width=700,height=600');
alert(event.url)
return false;
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'

},

editable: false,
events: 'cc.html' <!-- 演示代码换成aa.jsp可以动态获取json对象,可以接收开始时间和结束时间 -->

});
eventRender: function(calEvent, element) {
element.qtip({
content: calEvent.description,
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomRight'
}
},
style: {
name: 'dark'
}
});
};
$('#my-prev-button').click(function() {
// var d = $('#calendar').fullCalendar('getDate');
// alert("当前翻页时间 " + d.pattern("yyyy-MM-dd"));

// function( true, calendar );
alert("选择到2011-03-03");
$('#calendar').fullCalendar( 'gotoDate', 2011 , 2, 3);
});

});

[color=red]<!-- 时间格式化js代码-->[/color]
Date.prototype.pattern=function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
"H+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
var week = {
"0" : "\u65e5",
"1" : "\u4e00",
"2" : "\u4e8c",
"3" : "\u4e09",
"4" : "\u56db",
"5" : "\u4e94",
"6" : "\u516d"
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "\u661f\u671f" : "\u5468") : "")+week[this.getDay()+""]);
}
for(var k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
</script>
<style type='text/css'>

body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}

#calendar {
width: 900px;
margin: 0 auto;
}
[color=red]
.OneClass{
width:12px;
height:12px;
vertical-align:middle;
cursor:help;
background:url(<%=request.getContextPath()%>/images/help2.gif) no-repeat;
}[/color]

</style>
</head>
<body>
<div id='calendar'></div>

</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值