2012-04-15 3 views
0

Я пытаюсь использовать полный календарь JQuery вместе с Spring MVC.Опубликовать новые события для контроллера бэкэнда

Я сделал демо, как that.

Цель: Мне нужно отправить данные ОБНОВЛЕННОГО календаря после ввода моих событий контроллеру для его обработки.

Вопрос: Я добился повторного отправки календаря, который я инициализировал контроллеру. Однако я не могу отправить данные обновленного календаря после ввода моих событий в контроллер, чтобы обработать его.

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> 

ответ

0

Для того, чтобы достичь того, что мне нужно, я сделал обходной путь. Обходной путь основан на создании объекта json и отправке его на контроллер. Если пользователь вводит новые события в календарь, я добавляю эти события к предыдущим старым сохраненным событиям.

Примечание: Я обнаружил, что Stringify изменяет дату, как упоминалось и решил здесь: 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> 

Контроллер:

 @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) 
} 
Смежные вопросы