3
我正在使用JQuery Full Calendar和Spring MVC。從日曆中刪除所選事件
你好， 我做了一個演示，如that。
目標：我需要當用戶點擊一個他/她已經插入的事件時，會出現一個對話框，讓他/她能夠移除該事件或取消。
問題：現在每當用戶點擊任何一天，就會出現一個對話框，允許用戶輸入該事件的標題，然後用戶單擊「確定」保存該事件。
的Freemarker： Freemarker的：
<script type="text/javascript">
var resourceVacation;
function censor(censor) {
return (function() {
var i = 0;
return function(key, value) {
if (i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value)
return '[Circular]';
++i; // so we know we aren't using the original object anymore
return value;
}
})(censor);
}
function doAjax() {
$.each(resourceVacation, function(index) {
var tmpDate = resourceVacation[index].start;
tmpDate.setHours(tmpDate.getHours() - tmpDate.getTimezoneOffset()/60);
resourceVacation[index].start=tmpDate;
});
// var arrays = [
// {"id":111,"title":"event1","start":"2012-04-15T22:00:00.000Z","url":"http://yahoo.com/"}
// ];
// var objects = {"id":111,"title":"event2","start":"2012-04-16T22:00:00.000Z","url":"http://yahoo2.com/"};
//
// arrays.push(objects);
var test = JSON.stringify(resourceVacation, censor(resourceVacation));
var x = test;
$.ajax(
{
url:"[@spring.url '/vacation/saveResourceVacation'/]",
type: "POST",
data :x ,
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/loadResourceVacation'/]', function (data) {
var 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) {
start.setHours(start.getHours() - start.getTimezoneOffset()/60);
// var dat=$.fullCalendar.formatDate(start, "yyyy/MM/dd")
var newVacation= {id:133,title:'title',start:start,url: 'title'};
resourceVacation.push(newVacation);
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('start: ' + calEvent.start);
}
editable: true,
events:data
});
resourceVacation = data;
});
});
</script>
控制器：
@RequestMapping(value = "/vacation/loadResourceVacation", method = RequestMethod.GET)
public
@ResponseBody
String loadResourceVacation(HttpServletResponse response) throws Exception {
//Here I build my vacationFormBean
List<VacationFormBean> vacationFormBeanList= buildVacationFormBean();
// Convert to JSON string.
String json = new Gson().toJson(vacationFormBeanList);
// Write JSON string.
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
return json;
}
@RequestMapping(value = "/vacation/saveResourceVacation", method = RequestMethod.POST)
public
@ResponseBody
void saveResourceVacation(@RequestBody String jsonString, Principal principal) throws Exception {
List<String> resourceVacations = extractVacationDatesFromJsonObject(jsonString);
}
VacationFormBean：
public class VacationFormBean {
int id; // (With Setter & Getter)
String title; // (With Setter & Getter)
String start; // (With Setter & Getter)
String url; // (With Setter & Getter)
}
我需要類似的東西：
更新===================== ====
我添加了點擊事件作爲domi27推薦的結果。 請檢閱freemarker更新。 我已經添加了一個使用Java腳本方法：http://arshaw.com/fullcalendar/docs/event_data/removeEvents/
新的JS方法：
$('#calendar').fullCalendar('removeEvents', 1);
這種方法與最初從控制器加載的事件完美的作品。 但是，每當我嘗試使用相同的方法刪除剛剛添加的新事件時，什麼都不會發生。 當我爲我創建的新事件啓動「選擇事件」時，我得到其ID爲「未定義」的ID。
正如我在freemarker上提到的那樣，我使用這些線來構建新的事件對象，並將其添加到列表中。
var newVacation = {id:'133',title:'title',start:start,url: 'title'};
resourceVacation.push(newVacation);
當我調試我的腳本時，我觀察到從控制器加載的對象與我在用戶添加新事件時創建的新對象之間的差異。
這裏是舊的對象，我從控制器得到，當我開始日曆： 
這是新對象我後，我插入新的事件：
謝謝。這是有幫助的。但是我試圖不去後端。我嘗試通過構建數組對象在客戶端做到這一點，然後當用戶按下「保存」時，我將此數組轉換爲JSON對象並將其發送到服務器爲隊伍。我已更新我的帖子。請檢查並反饋給我。再次感謝您的答案。 – Echo 2012-04-20 14:18:37