从日历中删除所选事件

我正在使用JQuery Full Calendar和Spring MVC。

你好，我做过这样的演示。

目标：我需要当用户点击已经插入的事件时，会出现一个对话框，让他/她能够删除该事件或取消。

问题：现在，只要用户在任何一天点击，就会出现一个对话框，允许用户输入该事件的标题，然后用户点击“确定”保存该事件。

Freemarker：Freemarker： 

 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; }); });

控制器： 

  @RequestMapping(value = "/vacation/loadResourceVacation", method = RequestMethod.GET) public @ResponseBody String loadResourceVacation(HttpServletResponse response) throws Exception { //Here I build my vacationFormBean List 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 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) }

我需要这样的东西：

在此处输入图像描述

====================== UPDATE =========================

我已经添加了domi27 recomendation的click事件。 请查看freemarker更新。 我添加了一个使用以下内容的java脚本方法： http ： //arshaw.com/fullcalendar/docs/event_data/removeEvents/

新的JS方法： 

  $('#calendar').fullCalendar('removeEvents', 1);

此方法与最初从控制器加载的事件完美配合。 但是，每当我尝试使用相同的方法删除刚刚添加的新事件时，都不会发生任何事情。 当我为我创建的新事件触发“选择事件”时，我得到它的id“未定义”。

正如我在我的freemarker上提到的，那就是我用来构建新的事件对象的行，我将其放到列表中。 

 var newVacation = {id:'133',title:'title',start:start,url: 'title'}; resourceVacation.push(newVacation);

当我调试脚本时，我观察到从控制器加载的对象与我在用户添加新事件时创建的新对象之间的差异。

这是我在启动日历时从控制器获得的旧对象： 在此处输入图像描述

这是我插入新事件后得到的新对象：

在此处输入图像描述

您可以像这样实现它：

  1. 获取点击事件
  2. 显示有关（如何）删除此事件的信息
  3. 调用ajax请求来处理后端事件的删除
  4. 从日历前端删除事件

1）首先在这里描述： http ： //arshaw.com/fullcalendar/docs/mouse/eventClick/

2）相当简单的JS：确认（“真想删除此事件吗？”）

3）通过jQuery调用删除操作可能就像保存预订一样

4）通过fullcalendars“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); } }

我通过以下方法使其工作：每当用户触发完整日历上的“选择”或“点击”事件时，我会按用户选择的日期搜索并从我的JS数组中删除它。 我使用：$（’＃calendar’）。fullCalendar（’removeEvents’，id）将其从完整的日历事件中删除。 

 [#ftl /]     
  [@footer/]
Interesting Posts