Geek asks and answers

Delete selected event from Calendar

I use the full jQuery calendar with Spring MVC.

Hello, I made a demo, for example which .

Purpose: I need it, when the user clicks on an event that he has already inserted, a dialog box appears and gives him the opportunity to delete this event or cancel it.

Problem: now, when the user clicks on any day, a dialog box appears allowing the user to enter a title for this event, then the user clicks “Ok” to save this 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 this:

enter image description here

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

click domi27. , freemarker. java script, : http://arshaw.com/fullcalendar/docs/event_data/removeEvents/

JS:

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

, . , , , . " " , "undefined".

freemarker, , , .

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

script, , , , , .

, , : enter image description here

, , :

enter image description here

+3
2

:

  • ()
  • ajax-

1) : http://arshaw.com/fullcalendar/docs/mouse/eventClick/

2) JS: ( " ?" )

3) jQuery, , .

4) "removeEvents" fullcalendars: http://arshaw.com/fullcalendar/docs/event_data/removeEvents/

:

eventClick: function(calEvent, jsEvent, view) {
    /**
     * calEvent is the event object, so you can access it 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);
    }
}
+5

: , "select" "click" , , , JS. : $('# calendar'). FullCalendar ('removeEvents', id), .

[#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/]
0

More articles:


All Articles