스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 2

'스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 1' 게시글을 통해서 기본적인 캘린더를 구성하는 방법에 대해서 알아보았습니다. 풀캘린더 구현하기 두 번째 게시글에서는 첫 번째 게시글에서 마지막 방식에 해당하는 '일정 목록을 요청할 URL로 풀캘린더에 일정 추가하기'를 구체적인 방법과 흐름으로 확인해 보겠습니다.

풀캘린더 설정하기

전체 소스

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>
</head>
<body>
	<div id="calendar"></div>
</body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
	let calendarEl = document.getElementById('calendar');
	
	let headerToolbar = {
		left: 'prevYear,prev,next,nextYear today',
		center: 'title',
		right: 'dayGridMonth,dayGridWeek,timeGridDay'
	}
	
	let calendar = new FullCalendar.Calendar(calendarEl, {
		initialView: 'dayGridMonth',
		headerToolbar: headerToolbar,
		events: "/scheduleList.do"
	});
	calendar.render();
});
</script>
</html>

적용 화면

가장 먼저, 'events' 속성에 설정된 일정 목록을 조회하기 위한 요청 '/scheduleList.do'를 컨트롤러에서 직접 구성한 List 데이터를 응답으로 받아오는 형식으로 먼저 테스트해봅니다.

서버 설정하기

1. 직접 구성한 List 데이터 응답으로 받기

컨트롤러에서 요청('/scheduleList.do')을 받으면 직접 구성한 List 타입의 데이터를 응답으로 리턴합니다. 리턴된 응답 데이터는 'List<Map<String, Object>>' 타입으로 구성된 데이터를 받아 일정을 출력합니다.

컨트롤러 구성

@Controller
public class ScheduleController {
	
	@GetMapping("/schedule.do")
	public String schedulePage() {
		return "schedule";
	}
	
	@ResponseBody
	@GetMapping("/scheduleList.do")
	public ResponseEntity<List<Map<String, Object>>> scheduleList() {
		// 일정 Map을 담을 List 선언
		List<Map<String, Object>> scheduleList = new ArrayList<>();
		// 일정 첫번째를 구성할 Map 선언
		Map<String, Object> schedule01 = new HashMap<>();
		schedule01.put("id", "sch01");				// 첫번째 일정 아이디
		schedule01.put("title", "일정01");			// 첫번재 일정 제목
		schedule01.put("start", "2025-05-13");		// 첫번째 일정 시작 일정
		schedule01.put("end", "2025-05-13");		// 첫번째 일정 끝 일정
		schedule01.put("allDay", true);				// 첫번재 일정 하루종일 flag
		
		// 일정 두번째를 구성할 Map 선언
		Map<String, Object> schedule02 = new HashMap<>();
		schedule02.put("id", "sch02");					// 두번째 일정 아이디
		schedule02.put("title", "일정02");				// 두번째 일정 제목
		schedule02.put("start", "2025-05-14T09:00:00");	// 두번째 일정 시작 일정
		schedule02.put("end", "2025-05-16T09:00:00");	// 두번재 일정 끝 일정
		schedule02.put("allDay", false);				// 두번재 일정 하루종일 flag
		
		scheduleList.add(schedule01);		// 첫번재 일정 List에 추가
		scheduleList.add(schedule02);		// 두번재 일정 List에 추가
		
		return new ResponseEntity<List<Map<String, Object>>>(scheduleList, HttpStatus.OK); 
	}
	
}

컨트롤러 구성을 확인해 보면 schedulePage() 메서드는 캘린더 화면을 출력하기 위해서 @GetMapping 어노테이션으로 설정된 목적지이고, scheduleList() 메서드는 캘린더 이벤트에서 events 속성에 명시된 요청을 처리하기 위해서 @PostMapping 어노테이션으로 설정된 목적지가 됩니다. 요청에 따른 응답을 페이지 정보가 아닌 데이터를 응답으로 리턴하기 위해서 ResponseEntity 응답 객체 타입으로 설정하였습니다. ResponseEntity 응답 객체는 헤더정보, 데이터를 담을 수 있는 Body, 응답에 따른 상태 코드인 HttpStatus의 정보를 가지고 있기 때문에 @ResponseBody와 같은 어노테이션으로 응답으로 내보낼 정보가 '페이지 정보가 아닌 데이터입니다.'를 명시하고 있습니다. 그렇지만 @ResponseBody 어노테이션이 꼭 필요하지 않지만 붙여준 이유는 직관성 때문에 해당 메서드에 붙여두었습니다.

적용 화면

적용 화면을 통해서 확인된 것처럼 일정을 Map 형태로 만들고 만들어진 일정을 List에 추가 후 응답 데이터로 리턴하니 풀캘린더 화면에 일정 두 개가 추가된 걸 확인할 수 있습니다. 그렇다면 위 형태를 그대로 DB로 옮겨 동일한 값들을 가질 수 있도록 설정해 보겠습니다.

2. DB 연동 후, 일정 목록 데이터 받기

컨트롤러 구성

@Controller
public class ScheduleController {
	
	@Autowired
	private IScheduleService service;
	
	@GetMapping("/schedule.do")
	public String schedulePage() {
		return "schedule";
	}
	
	@ResponseBody
	@GetMapping("/scheduleList.do")
	public ResponseEntity<List<ScheduleVO>> scheduleList() {
		List<ScheduleVO> scheduleList = service.selectScheduleList();
		return new ResponseEntity<List<ScheduleVO>>(scheduleList, HttpStatus.OK); 
	}
	
}

서비스 구성

public interface IScheduleService {
	public List<ScheduleVO> selectScheduleList();
}

@Service
public class ScheduleServiceImpl implements IScheduleService {

	@Autowired
	private IScheduleMapper mapper;
	
	@Override
	public List<ScheduleVO> selectScheduleList() {
		List<ScheduleVO> list = mapper.selectScheduleList();
		changeAllDayStatus(list);	// 조회된 일정 목록의 allDay 상태 값 처리
		return list;
	}
	
	// allDayStatus 값에 따라 allDay true/false 처리
	public void changeAllDayStatus(List<ScheduleVO> list) {
		for(int i = 0; i < list.size(); i++) {
			ScheduleVO schedule = list.get(i);		// 일정 목록에서 일정 꺼내기
			String status = schedule.getAllDayStatus();	// 하루종일 상태 값 꺼내기(TRUE, FALSE)
			if(status.equals("FALSE")) {			// 상태 값 FALSE 일 때
				schedule.setAllDay(false);		// bool 타입의 false 설정
				continue;
			}
			schedule.setAllDay(true);			// 상태 값 TRUE 일 때, bool 타입의 true 설정
		}
	}

}

Mapper 구성

@Mapper
public interface IScheduleMapper {
	public List<ScheduleVO> selectScheduleList();
}

Mapper XML 구성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="kr.or.ddit.mapper.IScheduleMapper">

	<select id="selectScheduleList" resultType="kr.or.ddit.vo.ScheduleVO">
		select 
			sch_no as "no", 
			sch_id as "id", 
			sch_title as "title", 
			sch_start as "start", 
			sch_end as "end", 
			sch_backgroundcolor as "backgroundColor", 
			sch_textcolor as "textColor", 
			sch_allday as "allDayStatus"
		from schedule
	</select>

</mapper>

데이터베이스 테이블 구성

VO 클래스 구성

@Data
public class ScheduleVO {
	private int no;
	private String id;
	private String title;
	private String start;
	private String end;
	private String backgroundColor;
	private String textColor;
	private String allDayStatus;
	private boolean allDay;
}

적용 화면

DB를 통해서 조회된 일정 목록 데이터를 'Controller - Service - Mapper - DB' 순서로 가져옵니다. 가져온 데이터를 요청을 호출한 callback으로 응답합니다. 응답된 일정 목록 데이터는 events 속성에 의해서 풀캘린더 화면에 일정을 출력합니다.

@Junesker

저작자표시 (새창열림)

'OPEN SOURCE > FullCalendar' 카테고리의 다른 글

스프링부트(SpringBoot)로 풀캘린더(FullCalendar) 구현하기 - 1 (0)	2025.05.12
[FullCalendar] 풀캘린더(FullCalendar) 속성 - 6, 상호작용 (Interaction Options) (0)	2025.02.11
[FullCalendar] 풀캘린더(FullCalendar) 속성 - 4, 선택 기능 (Selectable Options) (0)	2025.02.10
[FullCalendar] 풀캘린더(FullCalendar) 속성 - 3, 이벤트 관련 설정 (Event Settings) (2)	2025.02.06
[FullCalendar] 풀캘린더(FullCalendar) 속성 - 2, 날짜 및 시간 설정 (Date & Time) (0)	2024.06.24

풀캘린더 설정하기

서버 설정하기

1. 직접 구성한 List 데이터 응답으로 받기

2. DB 연동 후, 일정 목록 데이터 받기

'OPEN SOURCE > FullCalendar' 카테고리의 다른 글

티스토리툴바