Veröffentlichen Sie die neuen Ereignisse auf dem Back-End-Controller

Question

Ich versuche, JQuery Full Calendar zusammen mit Spring MVC zu verwenden.

Ich habe eine Demo wie that gemacht.

Ziel: Ich muss die UPDATED-Kalenderdaten, nachdem ich meine Ereignisse eingeben, an den Controller senden, um damit umzugehen.

Problem: Es ist mir gelungen, den Kalender erneut zu senden, den ich in den Controller eingegeben habe. Ich kann die Daten des aktualisierten Kalenders jedoch nicht senden, nachdem ich meine Ereignisse eingegeben habe, damit der Controller sie verarbeiten kann.

Freemarker:

<script type="text/javascript"> 
    var calendar; 
    var calendarData;   

    function doAjax() { 
     var test = JSON.stringify(calendarData, censor(calendarData)); 
      var x=$('#calendar').value; 
     $.ajax(
     { 
      url:"[@spring.url '/vacation/setVacation'/]", 
      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/getVacation'/]', function (data) { 
      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) { 
         calendar.fullCalendar('renderEvent', 
         { 
          title: title, 
          start: start, 
          end: end, 
          allDay: allDay 
         }, 
           true // make the event "stick" 
           ); 
        } 
        calendar.fullCalendar('unselect'); 
       }, 
       editable: true, 
       events:data 
      }); 
      calendarData = data; 
     }); 
    }); 

</script> 

Answer 1

Um dies zu erreichen, was ich brauche, ich habe eine Abhilfe gemacht. Die Problemumgehung basiert darauf, ein JSON-Objekt zu erstellen und es an den Controller zu senden. Wenn der Benutzer neue Ereignisse in den Kalender eingibt, füge ich diese Ereignisse an die vorherigen gespeicherten Ereignisse an.

Anmerkung: Ich habe entdeckt, dass Stringify das Datum ändert, wie hier erwähnt und gelöst: JSON Stringify changes time of date because of UTC

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

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