演示代码见附件，
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);
});
});
<!-- 时间格式化js代码-->
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;
}
.OneClass{
width:12px;
height:12px;
vertical-align:middle;
cursor:help;
background:url(<%=request.getContextPath()%>/images/help2.gif) no-repeat;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
分享到：
相关推荐
fullcalendar 日历控件知识点集合 以下是对 fullcalendar 日历控件的详细知识点的总结和概览： 基本语法 fullcalendar 的基本语法可以分为两种：一种是利用 fullcalendar 提供的方法来进行字符串和日期间的转换，...
在Vue.js框架中，FullCalendar是一个非常流行的库，用于创建功能丰富的日历组件，它可以用于显示日程安排、事件管理等。本项目示例将详细阐述如何在Vue中集成并使用FullCalendar，以实现一个完整的日程安排系统。 ...
全历插件FullCalendar是一款广泛使用的JavaScript日历库，它为网页应用提供了强大的日程管理功能。这个插件以其灵活性和可定制性而受到开发者们的青睐。标题提及的"fullcalendar支持农历 年历"意味着它不仅限于公历...
在本项目中，“PHP+Mysql+FullCalendar日历拖动与数据保存”是一个结合了后端编程语言PHP、数据库管理系统MySQL以及前端日历插件FullCalendar的应用实例，旨在实现日程管理功能，允许用户通过拖放操作在日历上安排...
**FullCalendar日历组件**是一款强大的JavaScript库，用于在网页上展示日程安排和事件管理。它提供了丰富的自定义选项，使得开发者可以轻松地创建出符合项目需求的日历视图，包括日视图、周视图、月视图以及多日视图...
使用插件fullcalendar日历插件制作课程表 实例参考https://blog.csdn.net/qq_25285531/article/details/130356264#comments_32087741
在Vue.js应用中，FullCalendar是一个非常流行的开源库，用于创建功能丰富的日历组件，能够显示事件、进行日程管理。这个项目示例提供了一种方法来集成FullCalendar到Vue项目中，帮助开发者构建出交互性强的日程安排...
FullCalendar 是一个jQuery插件，它提供一个全尺寸，像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 （如单击或拖动事件） ...
全历（FullCalendar）是一款广泛使用的JavaScript库，用于在网页上展示交互式的日历视图。这个库允许用户轻松地创建、编辑和显示各种类型的事件，包括日程、会议和其他重要日期。"全历可点击事件"指的是用户可以通过...
日历插件FullCalendar.rar 日历插件FullCalendar.rar 日历插件FullCalendar.rar 日历插件FullCalendar.rar 日历插件FullCalendar.rar 日历插件FullCalendar.rar 日历插件FullCalendar.rar 日历插件FullCalendar.rar ...
这个项目展示了如何将前后端分离的开发模式运用到实际项目中，利用Struts2的强大功能处理后端逻辑，结合JSP展现动态视图，同时利用FullCalendar提供直观的日历界面，实现任务管理和提醒功能。这样的组合提供了高效、...
全历插件FullCalendar是一款功能强大的JavaScript日历组件，常用于网站或应用中的日程管理、事件安排等场景。它提供了丰富的自定义选项，使得开发者可以轻松地根据需求进行二次开发。在C#环境下，我们可以利用...
全历插件FullCalendar是一款广泛使用的JavaScript日历库，它为网页应用提供了强大的日程管理功能。这个"fullcalendar-1.6.4-修改增加农历节日版.zip"压缩包是一个针对FullCalendar 1.6.4版本的增强版本，特别加入了...
全历插件FullCalendar是一款广泛应用于网页端的事件日历组件，版本2.7.3在原有的功能基础上，特别针对中国市场进行了优化，加入了中国的节日和节气，使得它更加适用于中国的用户群体。以下是对FullCalendar及其2.7.3...
"fullCalendar"是一款广受欢迎的JavaScript库，专为构建交互式、功能丰富的日历应用而设计。本文将深入探讨如何在C#环境中集成并利用fullCalendar插件进行日程管理。 首先，`fullCalendar`是一款开源的前端日历组件...
开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。
**全栈前端开发中的日历插件：FullCalendar** 在Web开发中，日历插件是一种常见的组件，用于展示和管理日期相关的事件。FullCalendar是一款功能强大的JavaScript库，专为前端开发者设计，它能帮助创建交互式的、...
JavaWeb项目FullCalendar日历插件使用示例代码 JavaWeb项目中使用FullCalendar日历插件可以实现丰富的日历功能，以下是使用FullCalendar日历插件的示例代码和相关知识点： 使用FullCalendar需要引用的文件 使用...
**全尺寸日历控件FullCalendar 3.9.0详解** FullCalendar是一款功能强大的JavaScript日历组件，广泛应用于Web应用程序中，用于展示和管理事件日程。版本3.9.0是其一个稳定版本，提供了丰富的功能和高度的自定义选项...