title: Remove selected event from the Calendar
body: <p>I am using JQuery Full Calendar along with Spring MVC.</p>
  
  <p>Hello,
  I have made a demo like <a href="https://i.stack.imgur.com/zy8Aa.jpg" rel="nofollow noreferrer">that</a>.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Freemarker:
  Freemarker:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var resourceVacation;
  
      function censor(censor) {
          return (function() {
              var i = 0;
              return function(key, value) {
                  if (i !== 0 &amp;&amp; typeof(censor) === 'object' &amp;&amp; typeof(value) == 'object' &amp;&amp; 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;
          });
      });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>     @RequestMapping(value = "/vacation/loadResourceVacation", method = RequestMethod.GET)
          public
          @ResponseBody
          String loadResourceVacation(HttpServletResponse response) throws Exception {
  
  
              //Here I build my vacationFormBean
              List&lt;VacationFormBean&gt; 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&lt;String&gt; resourceVacations = extractVacationDatesFromJsonObject(jsonString);
  
      }
  </code></pre>
  
  <p>VacationFormBean:</p>
  
  <pre><code>public class VacationFormBean {
      int id; // (With Setter &amp; Getter)
      String title; // (With Setter &amp; Getter)
      String start;  // (With Setter &amp; Getter)
      String url; // (With Setter &amp; Getter)
  }
  </code></pre>
  
  <p>I need something like that :</p>
  
  <p><img src="https://i.stack.imgur.com/zy8Aa.jpg" alt="enter image description here"></p>
  
  <p>======================UPDATE=========================</p>
  
  <p>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 :<a href="http://arshaw.com/fullcalendar/docs/event_data/removeEvents/" rel="nofollow noreferrer">http://arshaw.com/fullcalendar/docs/event_data/removeEvents/</a></p>
  
  <p>The new JS method :            </p>
  
  <pre><code>   $('#calendar').fullCalendar('removeEvents', 1);
  </code></pre>
  
  <p>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".</p>
  
  <p>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.</p>
  
  <pre><code>var newVacation = {id:'133',title:'title',start:start,url: 'title'};
                                      resourceVacation.push(newVacation);
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is the old object I got from the controller when I initiated the calendar:
  <img src="https://i.stack.imgur.com/8pjIG.jpg" alt="enter image description here"></p>
  
  <p>Here is the new Object I got after I insert the new event:</p>
  
  <p><img src="https://i.stack.imgur.com/PBQL3.jpg" alt="enter image description here"></p>