Spring Boot+FullCalendar+JSONで実験してみた

Spring Bootでカレンダー表示をやってみたい、と思い実験してみました。


## 使ったライブラリとバージョン
* spring-boot: 1.5.8.RELEASE
* [fullcalendar: 3.5.1](https://fullcalendar.io/)
* jackson-databind: 2.8.10

## サンプルプロジェクトの中身

EclipseでSpring Starter Projectを作成し、こんな感じのプロジェクトにしました。

![eclipse_project_explorer.png](https://qiita-image-store.s3.amazonaws.com/0/208699/1206af72-ea82-f128-0852-382181bd4d81.png)


## 設定追加

```xml:pom.xml

以下を追加。

        <dependency>
	        <groupId>org.webjars</groupId>
	        <artifactId>jquery</artifactId>
	        <version>2.0.3</version>
	    </dependency>
        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>moment</artifactId>
            <version>2.19.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>fullcalendar</artifactId>
            <version>3.5.1</version>
        </dependency>
```


## モデル作成

FullCalendarのサンプルやドキュメントを参考に、簡単なモデルクラスを作成しました。

```java:event.java
package com.example.model;

/**
 * FullCalendar用Event Object
 * 
 * @see https://fullcalendar.io/docs/event_data/Event_Object/
 */
public class Event {

	private String title;
	
	/**
	 * カレンダーの開始日付
	 */
	private String start;
	
	/**
	 * カレンダーの終了日付
	 */
	private String end;
	
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getStart() {
		return start;
	}
	public void setStart(String start) {
		this.start = start;
	}
	public String getEnd() {
		return end;
	}
	public void setEnd(String end) {
		this.end = end;
	}
}

```


## コントローラー作成

筆者がSpring Bootを使い始めて間もなく理解不足のため、ちょっと回りくどい実装になっているかもしれません・・・


```java:CalendarController.java
package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;


@Controller
public class CalendarController {

	@RequestMapping(path = "/calendar", method = RequestMethod.GET)
	String index(Model model) {
		return "calendar/index";
	}
}
```

```java:RestWebController.java
package com.example.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.model.Event;
import com.fasterxml.jackson.databind.ObjectMapper;


@RestController
@RequestMapping("/api/event")
public class RestWebController {

	/**
	 * カレンダーに表示するEvent情報を取得
	 * @return Event情報をjsonエンコードした文字列
	 */
	@GetMapping(value = "/all")
	public String getEvents() {
		String jsonMsg = null;
		try {
			List<Event> events = new ArrayList<Event>();
			Event event = new Event();
			event.setTitle("first event");
			event.setStart("2017-10-01");
			events.add(event);

			event = new Event();
			event.setTitle("second event");
			event.setStart("2017-10-11");
			event.setEnd("2017-10-12");
			events.add(event);

			// FullCalendarにエンコード済み文字列を渡す
			ObjectMapper mapper = new ObjectMapper();
			jsonMsg =  mapper.writerWithDefaultPrettyPrinter().writeValueAsString(events);
		} catch (IOException ioex) {
			System.out.println(ioex.getMessage());
		}
		return jsonMsg;
	}
}
```

```java:CalendarDemoApplication.java
package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class CalendarDemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(CalendarDemoApplication.class, args);
	}
}


```


## 画面作成

カレンダーをデフォルト設定で表示させます。


```html:index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>calendar demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel='stylesheet' href='webjars/fullcalendar/3.5.1/dist/fullcalendar.css' />
<script src="webjars/jquery/2.0.3/jquery.min.js"></script>
<script src='webjars/moment/2.19.1/min/moment.min.js'></script>
<script src='webjars/fullcalendar/3.5.1/dist/fullcalendar.js'></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      events: {
        url : '/api/event/all'
      }
    });
  });
</script>
</head>
<body>
  <div id='calendar'></div>
</body>
</html>
```

## 動作確認

Spring Boot Appよりcalendar-demoを起動し、http://127.0.0.1:8080 を開いてください。
カレンダーに2件のイベントが表示されていればOKです。

![calendar_sample.png](https://qiita-image-store.s3.amazonaws.com/0/208699/373f9755-15da-b248-3fc9-fff18a1a2313.png)



 
## 参考サイト
[How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot](http://javasampleapproach.com/java-integration/integrate-jquery-ajax-post-get-spring-boot-web-service)
[Convert Java Object to JSON and Vice Versa](https://www.tuturself.com/posts/view?menuId=81&postId=911)