I am trying to use JQuery Full Calendar along with Spring MVC + Freemarker.
I have made a demo like that.
Target: I need to send the calendar's data I just put to the controller to handle it.
Issue: When I send the data to the contoller ,The String parameter I recieve on the contoller has "undefined=undefined" !!
Freemarker:
[#ftl /]
<script type="text/javascript">
var calendar;
var calendarData;
function sendDataViaAjax() {
$.ajax(
{
url:"[@spring.url '/vacation/setVacation'/]",
type: "POST",
data: calendarData,
dataType: "json",
contentType: "application/json"
} );
}
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$.getJSON('[@spring.url '/vacation/getVacation'/]', function (data) {
calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events:[data]
});
calendarData=data;
});
});
</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;
}
</style>
<body>
<div id='calendar'></div>
<button value="Test" onclick="sendDataViaAjax()"
</body>
Java Controller whose String parameter comes as "undefined=undefined" :
@RequestMapping(value = "/vacation/setVacation", method = RequestMethod.POST)
public
@ResponseBody
String setVacation( @RequestBody String response) {
//Rest of code
}
I have changed a little bit my freemarker like the following:
<script type="text/javascript">
var calendar;
var calendarData;
function doAjax() {
var test = JSON.stringify(calendarData);
$.ajax(
{
url:"[@spring.url '/vacation/setVacation'/]",
type: "POST",
data :test ,
dataType: "json",
contentType: "application/json"
});
}
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$.getJSON('[@spring.url '/vacation/getVacation'/]', function (data) {
calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events:[data] //To allow Calendar to render data ,I use events:data instead
});
calendarData = data;
});
});
</script>
By this way I can post json String to the controller and from there I can continue what I need. What it's killing me that now the calendar is rendered empty without the events I passed while initializing. However, In order to render Calendar data I make a small change ,as mentioned on the comment above. By this way, whenever I try to post json String,I get the following error :"Uncaught TypeError: Converting circular structure to JSON" . I have made many trials but I still have the mentioned issues !! Anyone has an idea about what's going on there !!
