Supprimer l’événement sélectionné du calendrier

J’utilise JQuery Full Calendar avec Spring MVC.

Bonjour, j’ai fait une démo comme ça .

Cible: lorsque l’utilisateur clique sur un événement qu’il a déjà inséré, une boîte de dialog apparaît et lui donne la possibilité de supprimer cet événement ou d’annuler.

Problème: désormais, chaque fois que l’utilisateur clique sur un jour quelconque, une boîte de dialog apparaît pour lui permettre de saisir le titre de cet événement, puis l’utilisateur clique sur “OK” pour enregistrer cet événement.

Freemarker: Freemarker:

 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.ssortingngify(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; }); });  

Manette:

  @RequestMapping(value = "/vacation/loadResourceVacation", method = RequestMethod.GET) public @ResponseBody Ssortingng loadResourceVacation(HttpServletResponse response) throws Exception { //Here I build my vacationFormBean List vacationFormBeanList= buildVacationFormBean(); // Convert to JSON ssortingng. Ssortingng json = new Gson().toJson(vacationFormBeanList); // Write JSON ssortingng. response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); return json; } @RequestMapping(value = "/vacation/saveResourceVacation", method = RequestMethod.POST) public @ResponseBody void saveResourceVacation(@RequestBody Ssortingng jsonSsortingng, Principal principal) throws Exception { List resourceVacations = extractVacationDatesFromJsonObject(jsonSsortingng); } 

VacationFormBean:

 public class VacationFormBean { int id; // (With Setter & Getter) Ssortingng title; // (With Setter & Getter) Ssortingng start; // (With Setter & Getter) Ssortingng url; // (With Setter & Getter) } 

J’ai besoin de quelque chose comme ça:

entrez la description de l'image ici

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

J’ai ajouté l’événement click suite à la recommandation de domi27. Veuillez examiner les mises à jour de freemarker. J’ai ajouté une méthode de script Java qui utilise: http://arshaw.com/fullcalendar/docs/event_data/removeEvents/

La nouvelle méthode JS:

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

Cette méthode fonctionne parfaitement avec les événements initialement chargés à partir du contrôleur. Cependant, chaque fois que j’essaie d’utiliser la même méthode pour supprimer les nouveaux événements que je viens d’append, rien ne se produit. Lorsque je déclenche le “select event” pour le nouvel événement que j’ai créé, son identifiant est “undefined”.

Comme je l’ai mentionné sur mon freemarker, ce sont les lignes que j’utilise pour construire le nouvel object événement que j’ajoute à la liste.

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

Lorsque je débogue mon script, j’observe une différence entre les objects chargés à partir du contrôleur et le nouvel object que j’ai créé lorsque l’utilisateur ajoute un nouvel événement.

Voici l’ancien object que j’ai reçu du contrôleur lorsque j’ai lancé le calendrier: entrez la description de l'image ici

Voici le nouvel object obtenu après avoir inséré le nouvel événement:

entrez la description de l'image ici

Vous pouvez l’implémenter comme ceci:

  1. Aller chercher sur un événement
  2. Afficher les informations sur (comment) supprimer cet événement
  3. Appeler une demande ajax pour traiter la suppression d’un événement dans le backend
  4. Supprimer un événement du calendrier de l’agenda

1) Le premier est décrit ici: http://arshaw.com/fullcalendar/docs/mouse/eventClick/

2) JS le plus simple: confirmer (“Vous voulez vraiment supprimer cet événement?”)

3) Appelez une action de suppression via jQuery comme vous le feriez pour enregistrer une réservation

4) Supprimer cet événement via la méthode complète “removeEvents” des calendriers complets: http://arshaw.com/fullcalendar/docs/event_data/removeEvents/

Voici un exemple court et très basique:

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

Je l’ai fait fonctionner selon l’approche suivante: chaque fois que l’utilisateur déclenche l’événement “select” ou “click” sur tout le calendrier, j’effectue une recherche par date sélectionnée par l’utilisateur et le supprime du tableau my JS. J’utilise: $ (‘# calendar’). FullCalendar (‘removeEvents’, id) pour le supprimer de l’événement de calendrier complet.

 [#ftl /]     
[@footer/]