带农历的FullCalendar日历使用解析

最新推荐文章于 2024-07-23 13:00:00 发布

no_baobao

最新推荐文章于 2024-07-23 13:00:00 发布

阅读量343

点赞数

分类专栏： jQuery JavaScript 文章标签： FullCalendar jQuery日历

本文链接：https://blog.csdn.net/no_baobao/article/details/84119676

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

jQuery

10 篇文章 0 订阅

订阅专栏

演示代码见附件，
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' 

});
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][/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>