Question

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:

Answer 1

You may implement it like this :

1. Fetch click on an event
2. Display information about (how to) delete this event
3. Call an ajax request to process deletion of event in backend
4. 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);
    }
}