Remove selected event from the Calendar

问题:

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:

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

回答2:

I have make it work by the following approach: whenever the user fires whether the "select" or "click" event over the full calendar, I go to and search by the date the user selected and remove it from the my JS array. I use :$('#calendar').fullCalendar('removeEvents', id) to remove it from the full calendar event.

[#ftl /]
<script type="text/javascript">
var resourceVacation;
var vacationStart;

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 isVacation(day) {
    for (var index = 0; index < resourceVacation.length; index++) {
        if (resourceVacation[index].id == day) {
            return true;
        }
    }
    return false;
}

function deleteVacation(day) {
    for (var index = 0; index < resourceVacation.length; index++) {
        if (resourceVacation[index].id == day)

            resourceVacation.splice(index,1);
    }  

}

function showTheCorrectDialog(vacationStartDay) {
    var vacationID = $.fullCalendar.formatDate(vacationStartDay, "yyyy-MM-dd")
    if (isVacation(vacationID))
        getDeletionConfirmationDialog(vacationID);
    else
        getInsertionConfirmationDialog(vacationStartDay)
}


function doAjax() {

    $.each(resourceVacation, function(index) {
        var tmpDate = resourceVacation[index].start;

        tmpDate.setHours(tmpDate.getHours() - tmpDate.getTimezoneOffset() / 60);
        resourceVacation[index].start = tmpDate;

    });
    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) {
                        vacationStart = start;
                        showTheCorrectDialog(vacationStart);

                    },

            eventClick: function(calEvent, jsEvent, view) {

                showTheCorrectDialog(calEvent.start);

                // change the border color just for fun
                $(this).css('border-color', 'red');
            },

            editable: true,
            events
                    :
                    data
        });
        resourceVacation = data;
    });
});


function getInsertionConfirmationDialog(vacationStart) {
      var complimentaryVacationHTML = "<input  type = \"radio\" name = \"vacationTypes\" value = \"Complimentary\">Complimentary<br>";

    var scheduledVacationHTML = "<input  type = \"radio\" name = \"vacationTypes\" value = \"Scheduled\" checked=\"checked\">Scheduled<br>";


    $('html').append('<div id="insertionConfirmDialog" align="left">' +
            complimentaryVacationHTML +scheduledVacationHTML + ' </div > ');
    var selectedVacationType = "";
    var insertionConfirmDialog = $('#insertionConfirmDialog');
    insertionConfirmDialog.dialog({
        modal: true,
        autoOpen: false,
        resizable:false,
        title: 'Please select the vacation type',
        width: 300,
        height: 310,
        buttons: {
            'Ok': function() {
                selectedVacationType = $(this).find('input:checked').val();
                $(this).remove();

                vacationStart.setHours(vacationStart.getHours() - vacationStart.getTimezoneOffset() / 60);
                var vacationID = $.fullCalendar.formatDate(vacationStart, "yyyy-MM-dd")

                var newVacation = {id:vacationID,title:selectedVacationType,start:vacationStart};
                resourceVacation.push(newVacation);
                $('#calendar').fullCalendar('refetchEvents',
                {
                    title: selectedVacationType,
                    start: vacationStart,

                    allDay: true
                },
                        true // make the event "stick"
                        );

                $('#calendar').fullCalendar('unselect');
            },
            Cancel: function() {
                $(this).remove();
            }
        }
    });

    insertionConfirmDialog.dialog('open');
}

function getDeletionConfirmationDialog(vacationStart) {


    $('html').append('<div id="deletionConfirmDialog" align="left"><p>Are you sure you need to delete your vacation on:'+vacationStart +'</p>'+
            ' </div > ');
    var deletionConfirmDialog = $('#deletionConfirmDialog');
    deletionConfirmDialog.dialog({
        modal: true,
        autoOpen: false,
        resizable:false,
        title: 'Delete Confirmation',
        width: 300,
        height: 310,
        buttons: {
            'Delete': function() {
                $(this).remove();

                deleteVacation(vacationStart);
                $('#calendar').fullCalendar('removeEvents', vacationStart);

            },
            Cancel: function() {
                $(this).remove();
            }
        }
    });

    deletionConfirmDialog.dialog('open');
}


</script>
<style type='text/css'>


    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    }

    #calendar {
        width: 900px;
        margin: 0 auto;
    }

</style>
<body>
<input type="button" id="editProject" name="editProject" class="btn btn-inverse"
       value="Save Vacations"
       onclick="doAjax()"
        />


<div id='calendar'></div>

</body>
[@footer/]