如何使用我的数据库值我填充fullCalendar？ [英] how do i populate the fullCalendar using my database values?
问题描述
我建立的，我现在用的是著名的fullCalendar的应用程序。现在我需要使用的present在我的数据库中的值来填充我的日历。我试图使用AJAX调用来做到这一点。但它不工作。任何帮助将是AP preciated。
这是我的jsp。其中即时通讯使用，以显示我的日历之一。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;链接的href ='CSS / fullcalendar.css相对=样式/＆GT;
＆LT;链接的href ='CSS / fullcalendar.print.css相对='样式'媒体=打印/＆GT;
＆LT;脚本的src ='JS / jquery.min.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src ='JS / jQuery的-ui.custom.min.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src ='JS / fullcalendar.min.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接HREF =的jQuery UI的1.10.0.custom.css相对=样式类型=文本/ CSS媒体=所有/＆GT;
＆LT;链接相对=样式类型=文本/ CSSHREF ='cssdata / fullcalendar.css/＆GT;
＆LT;脚本SRC =JS / jQuery的-1.9.0.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / jQuery的-UI-1.10.0.custom.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / fullcalendar.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT; pre＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
getEvents（）;
VAR日期=新的日期（）;
变种D = date.getDate（）;
变种米= date.getMonth（）;
变种Y = date.getFullYear（）;
$（'＃日历）。fullCalendar（{
标题：{
左：'preV，接下来的今天，
中心：'标题'，
右：一个月，basicWeek，basicDay
}，
编辑：真正的，
事件：[getEvents（）
/ * {
标题：全天事件，
开始：新的日期（Y，M，1）
} * /
]
}）;
}）;
功能getEvents（）{
警报（HI）;
$。员额（的http：//本地主机：8080 / S360Portal / eventAjax.action，{}，
功能（数据）{
警报（你好）;
警报（数据）;
}）;
}
＆LT; / SCRIPT＆GT;
＆LT;风格＆GT;
体 {
的margin-top：40PX;
文本对齐：中心;
字体大小：14px的;
字体家庭：龙力大，黑体，宋体，宋体，无衬线;
}
＃日历 {
宽度：900px;
保证金：0汽车;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID ='历'＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
请尝试使用 eventSources ，而不是事件，这考虑到你的函数实际上返回任何事件。为什么不使用 $。阿贾克斯（{}）而不是 $。交？它会让你的生活更轻松。
下面是我如何做到这一点的例子：
EventSources 阵列。
无功源= {
的SourceOne：{
网址：ajaxcallURL（）
键入：POST，
数据：{年为：y}，
缓存：假的，//这是可选
颜色：＃6C92A8'，//这是可选
文字颜色：'白'//这是可选
}
}
在 Fullcalendar 拨打我有这样的：
VAR日历= $（'＃日历）。fullCalendar（{
...
eventSources：[sources.sourceone]
...
}）;
这对我的作品，请注意，我返回JSON，所以如果你正在返回的XML例如，你将不得不遍历XML。
另外，如果你的事件，返回日期从接受他们不会被映射在日历中，（YYYY-MM-DD）的工作原理不同。
好运
I am building an application in which i am using the famous fullCalendar. Now i need to populate my calendar using the values that are present in my database. I am trying to do it using an AJAX call. But its not working . Any help would be appreciated.
This is my jsp . The one which im using to display my calendar.
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/jquery.min.js'></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<link href="jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" media = "all"/>
<link rel='stylesheet' type='text/css' href='cssdata/fullcalendar.css' />
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type='text/javascript' src='js/fullcalendar.js'></script>
<pre>
<script>
$(document).ready(function() {
getEvents();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events: [ getEvents()
/* {
title: 'All Day Event',
start: new Date(y, m, 1)
}, */
]
});
});
function getEvents(){
alert("hi");
$.post("http://localhost:8080/S360Portal/eventAjax.action", {},
function(data){
alert("Hello");
alert(data);
});
}
</script>
<style>
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;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Try using eventSources instead of events, this considering your function is in fact returning any events. Why not use $.Ajax({}) instead of $.post? It will make your life easier.
Here's an example of how i do it:
EventSources array.
var sources = {
sourceone: {
url: ajaxcallURL(),
type: 'POST',
data: { 'year': y },
cache: false, //this is optional
color: '#6C92A8', //this is optional
textColor: 'white' //this is optional
}
}
In Fullcalendar call I have this:
var calendar = $('#calendar').fullCalendar({
...
eventSources: [sources.sourceone],
...
});
This works for me, notice that I'm returning JSON so if you are returning XML for example you will have to iterate the XML.
Also if your events returns Dates different from the accepted they wont be mapped in the calendar, ( yyyy-mm-dd ) works.
Good Luck
这篇关于如何使用我的数据库值我填充fullCalendar？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
