我正在使用 JQuery Full Calendar 和 Spring MVC。
您好, 我做了一个类似 that 的演示.
目标:我需要当用户点击她/他已经插入的事件时,会出现一个对话框,让他/她能够删除该事件或取消。
问题:现在每当用户点击任何一天时,都会出现一个对话框,允许用户输入该事件的标题,然后用户点击“确定”以保存该事件。
自由标记: 自由标记:
<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>
Controller :
@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);
此方法与最初从 Controller 加载的事件完美配合。 但是,每当我尝试使用相同的方法删除刚刚添加的新事件时,什么都没有发生。 当我为我创建的新事件触发“选择事件”时,我得到它的 ID“未定义”。
正如我在我的 freemarker 中提到的,这些行是我用来构建新事件对象的行,我将其附加到列表中。
var newVacation = {id:'133',title:'title',start:start,url: 'title'};
resourceVacation.push(newVacation);
当我调试我的脚本时,我观察到从 Controller 加载的对象与我在用户添加新事件时创建的新对象之间存在差异。
这是我启动日历时从 Controller 获得的旧对象:
这是我插入新事件后得到的新对象:
最佳答案
你可以这样实现它:
- 获取事件点击
- 显示有关(如何)删除此事件的信息
- 调用ajax请求在后端处理事件删除
- 从日历前端删除事件
1) 首先在这里描述:http://arshaw.com/fullcalendar/docs/mouse/eventClick/
2) 最简单的 JS: confirm("真的要删除这个事件?")
3) 像保存预订一样通过 jQuery 调用删除操作
4) 通过完整日历的“removeEvents”方法删除此事件:http://arshaw.com/fullcalendar/docs/event_data/removeEvents/
这是一个简短且非常基本的示例:
eventClick: function(calEvent, jsEvent, view) {
/**
* calEvent is the event object, so you can access it's properties
*/
if(confirm("Really delete event " + calEvent.title + " ?")) {
// delete event in backend
jQuery.post(
"/vacation/deleteEvent"
, { "id": calEvent.id }
);
// delete in frontend
calendar.fullCalendar('removeEvents', calEvent.id);
}
}
关于javascript - 从日历中删除选定的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10183667/