FullCalendar Spring MVC答案

【问题标题】：FullCalendar Spring MVCFullCalendar Spring MVC
【发布时间】：2018-12-21 15:50:05
【问题描述】：

我在 Spring MVC 中使用 FullCalendar。我有一个控制器 listAll()。此控制器返回所有事件，但我不知道如何在 JavaScript 中使用此控制器功能。

home.html

$(function() {
        $('#calendar').fullCalendar({

            events: [

                {
                  title  : 'tarea2',
                  start  : '2018-12-24',
                  end    : '2010-12-25'
                }

              ]
        })
    });

控制器：

    @GetMapping("/")
public ModelAndView getPlanificado() {
    ModelAndView model = new ModelAndView();
    model.addObject("events", eventsService.listAll());
    model.setViewName("/entrenador/home");
    return model;

}

我需要使用从控制器 MVC（事件）到 JavaScript 的事件列表，但我不知道如何包含它。

【问题讨论】：

标签： javascript spring-mvc model-view-controller fullcalendar

【解决方案1】：

您需要做的第一件事是进行 AJAX 调用并返回 JSON 响应而不是模型。

创建一个 pojo 类，其中包含事件的所有字段以映射 JSON，如下所示。

public class Event{
    private Long id;
    private String title;
    private Date start;
    private Date end;
    //getters setters and other required fields
}

然后控制器方法如下。

@RequestMapping(value = "/", method = RequestMethod.GET,produces="application/json")
@ResponseBody
public ResponseEntity<String> getPlanificado()
{
    List<Event> events = eventsService.listAll();
    HttpHeaders headers = new HttpHeaders();
    headers.add("Content-Type", "application/json; charset=utf-8");
    if (calendarEvents.size() > 0)
    {
        return new ResponseEntity<String>(new JSONSerializer().include("id","title","end","start").exclude("*").serialize(calendarEvents), headers, HttpStatus.OK);
    }
    return new ResponseEntity<String>(null, headers, HttpStatus.OK);
}

然后像下面的AJAX调用一样调用上面的方法。

$.ajax({
    url: '/',
    headers:{
    'Accept' : 'application/json',
    'Content-Type': 'application/json'
    },
    success: function(result){
        if(result!== null){
            var len = result.length;
            if(len > 0){
                var jsonString = JSON.stringify(result);
                console.log(jsonString);
                for(var i=0; i<len; i++){
                    console.log(result[i]);
                    var title=result[i].title;
                    var start=result[i].start;
                    var startDate = new Date(start);
                    console.log("startDate :"+startDate);
                    var end=result[i].end;
                    var endDate = new Date(end);
                    console.log("endDate :"+endDate);
                    var event={ title:classname, start:startDate, end:endDate};
                    $('#calendar').fullCalendar( 'renderEvent', event, true);

                }
            } 
        }else{
            console.log("NO events");
        }
    },error: function (result) {
            console.log("AJAX error");
    }
});

注意：我使用flexjson 将 java 对象转换为 json 序列化目的。

【讨论】：