Remove selected event from the Calendar

freemarker, fullcalendar, javascript, jquery, spring-mvc

Solution

You may implement it like this :

- Fetch click on an event

- Display information about (how to) delete this event

- Call an ajax request to process deletion of event in backend

- Delete event from calendar frontend

1) First is described here : http://arshaw.com/fullcalendar/docs/mouse/eventClick/

2) Quite simpliest JS: confirm("Really want to delete this event ?")

3) Call a delete action via jQuery likely as you do to save a reservation

4) Remove this event via fullcalendars "removeEvents" method : http://arshaw.com/fullcalendar/docs/event_data/removeEvents/

Here's a short and very basic example :

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

Problem

I am using JQuery Full Calendar along with Spring MVC. Hello, I have made a demo like that. Target: I need when the user clicks on an event s/he already inserted,a dialog box appears and gives him/her the capability to either remove that event or cancel. Issue: Now whenever the user clicks on any day, a dialog appears to allow the user to enter title for that event then user clicks "Ok" to save that event. 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> ``` 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) } ``` I need something like that : ======================UPDATE========================= I have add the click event as a result of domi27 recomendation. Kindly review the freemarker updates. I have added a java script method that uses :http://arshaw.com/fullcalendar/docs/event_data/removeEvents/ The new JS method : ``` $('#calendar').fullCalendar('removeEvents', 1); ``` This method works perfectly with the events that was initially loaded from the controller. However,whenever I try to use the same method to remove the new events I have just added,Nothing happens. When I fire the "select event" for the new event I created ,I get for its id"undefined". As I've mentiond on my freemarker,that are the lines I use to build the new event object that I aappend to the list. ``` var newVacation = {id:'133',title:'title',start:start,url: 'title'}; resourceVacation.push(newVacation); ``` When I debug my script,I observe a difference among the objects loaded from the controller and the new object I created when the user adds a new event. Here is the old object I got from the controller when I initiated the calendar: Here is the new Object I got after I insert the new event:

Original source