full-calendar라이브러리에 DB연동

사용한 개발도구 및 언어 : spring, java, js, ajax, oracle

이글은 기본 스프링과 자바 jsp, orecle환경세팅이 되어있는것을 기본으로 한다.

fullcalendar.io/

 

인터넷에는 다양한 무료 라이브러리들이 많은데 백엔드 개발을 갓 배운 나에게는 그림의 떡이었다.

기껏해야 swiper를 이용해 슬라이드만 만들었는데, 데이터베이스를 연동하려니

피상적으로 데이터를 뿌려줘야지..  생각은 들지만 정확한 로직이 그려지질 않았다.

 

1. 라이브러리 파일 다운 받기

우선 fullcalendar홈페이지에 최근 버전을 다운받는다

깃허브에서 v5.6.0을 다운 받았다.

 

파일을 보면 예제파일과 lib폴더가 있다.

파일구조

모든 메서드나 이벤트핸들러를 숙지하는것보다 예제파일을 보고 필요한 기능페이지를 뽑아서 쓰기로 했다.

한 파일을 jsp로 세팅한다.

여기서 나는 fullcalendar-5.6.0/examples/selectable.html을 사용했다

 

2.  jsp 및 기본 js세팅

java와 spring사용을 위해 jsp페이지로 세팅하여야 한다.

이번 글에서는 그렇게 중요한 부분은 아니기 때문에 pass하고

기본 html코드는 이렇게 세팅해준다.

<div id='calendar'></div>

 

그리고 라이브러리 기본 js 세팅

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
	// new FullCalendar.Calendar(대상 DOM객체, {속성:속성값, 속성2:속성값2..})
	
    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      initialDate: '2021-04-12', // 초기 로딩 날짜.
      navLinks: true, // can click day/week names to navigate views
      selectable: true,
      selectMirror: true,
      // 이벤트명 : function(){} : 각 날짜에 대한 이벤트를 통해 처리할 내용..
      select: function(arg) {
    	  console.log(arg);

        var title = prompt('입력할 일정:');
    // title 값이 있을때, 화면에 calendar.addEvent() json형식으로 일정을 추가
        if (title) {
          calendar.addEvent({
            title: title,
            start: arg.start,
            end: arg.end,
            allDay: arg.allDay,
            backgroundColor:"yellow",
            textColor:"blue"
          })
        }
        calendar.unselect()
      },
      eventClick: function(arg) {
    	  // 있는 일정 클릭시,
    	  console.log("#등록된 일정 클릭#");
    	  console.log(arg.event);
    	  
        if (confirm('Are you sure you want to delete this event?')) {
          arg.event.remove()
        }
      },
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: 
      //================ ajax데이터 불러올 부분 =====================//
  });

    calendar.render();
  });

div안에 calendar를 세팅해주는 코드이다.

이번글에서 db와 연동시킬 곳은

events : /*json데이터*/

뒤이다. (캘린더에 생성된 일정)

3. 테이블 생성

오라클에서 이벤트에 넣을 table을 생성해준다.

create table calendar(
	id number primary key,
	groupId NUMBER,
	title varchar2(50),
	writer varchar2(50),
	content varchar2(1000),
	start1 date,
	end1 date,
	allDay number(1),
	textColor varchar(50),
	backgroundColor varchar2(50),
	borderColor varchar2(50)
);

create sequence cal_seq
	start with 1
	increment by 1
	minvalue 1
	maxvalue 99999;

이벤트의 id와 제목등을 설정해준다.( 잘들어갔나 확인을 위해 색도 넣어보았다)

아래는 일정의 id를 위한 sequence테이블이다.

INSERT INTO calendar values(cal_seq.nextval,'','할일title','test',
'내용-content',to_date('2021/05/01','YYYY/MM/DD'),
to_date('2021/05/03','YYYY/MM/DD'),1,'yellow','navy','navy');

test하기 위해 데이터를 임의로 입력했다.

이제 view단과 기본 데이터는 세팅됐다 !

4. Model 단

1) vo

db와 연동하기위해 Calendar.java를 만들었다.

public class Calendar {
	private int id;
	private String groupId;
	private String title;
	private String writer;
	private String content;
	private String start;
	private String end;
    private boolean allday;
	private String textColor;
	private String backgroundColor;
	private String borderColor;
    /*set/get메서드*/
    }

 

2) dao

@Repository
public interface CalenDao {
	public ArrayList<Calendar> calenList();
}

3) Mapper세팅

sql을 불러올 CalenMapper.xml을 만든다.

<mapper namespace="CalenDao">
	<resultMap type="calen" id="calMap">
		<result property="start" column="start1"/>
		<result property="end" column="end1"/>
	</resultMap>
	<select id="calenList" resultMap="calMap">
		SELECT id, title,
		TO_char(start1, 'YYYY-MM-DD"T"HH24:MI:SS') start1,
		TO_char(end1, 'YYYY-MM-DD"T"HH24:MI:SS') end1,
		ALLDAY,
		TEXTCOLOR,
		BACKGROUNDCOLOR,
		BORDERCOLOR 
		FROM CALENDAR
	</select>
</mapper>

4) mybatis.xml세팅

  <typeAliases>
      <typeAlias alias="calen" type="vo.Calendar"/>
   </typeAliases>

   <mappers>
       <mapper resource="resource/CalenMapper.xml"/>
   </mappers>

 

5. Controller 단

 

1) service

@Service
public class CalenService {
	@Autowired(required = false)
	private A04_CalenDao dao;
	
	public ArrayList<Calendar> calenList(){
		return dao.calenList();
	}
}

2) Controller

@Controller
@RequestMapping("calendar.do")
public class CalendarController {
	@Autowired(required = false)
	private CalenService service;

	@GetMapping(params="method=list")
	public String list() {
		return "fullcalendar.jsp";
	}
 }

	@GetMapping(params = "method=data")
	public String data(Model d) {
		d.addAttribute("list", service.calenList());
		return "pageJsonReport";
	}

아까 만들어뒀던 db와 연동된 data이다. json형태로 만들어진다.

 

{"list":[{
  "id":1,
  "groupId":null,
  "title":"할일title",
  "writer":null,
  "content":null,
  "start":"2021-05-01T00:00:00",
  "end":"2021-05-03T00:00:00",
  "allday":true,"textColor":"yellow",
  "backgroundColor":"navy",
  "borderColor":"navy"
 }]}

6. view단

   events: function(info, successCallback, failureCallback){
    	  // ajax 처리로 데이터를 로딩 시킨다.
    	  $.ajax({
    		 type:"get",
    		 url:"${path}/calendar.do?method=data",
    		dataType:"json"  
    	  });
      }

jsp파일에 events뒤 jsondata들어갈 곳에 ajax 로 데이터를 로딩시킨다.

7. 완성

이렇게 데이터가 보여진다 !! ^ ^완성 !