Fullcalendar 일정 추가 - Fullcalendar iljeong chuga

  fullcalendar로 개발을 하다 보니 이런저런 소스를 찾아봤으나 그렇게 맘에 드는 게 없어서 결국에는 공식 홈페이지에 있는 소스와 Ajax를 합쳐서 구현을 하였다. 파라메터 값 중에 날짜만 필요해서 moment.js를 사용하여 날짜+시간 => 날짜로 바꿔서 사용했다.

백엔드에서는 start, end 파라메터(String)를 가지고 mybatis에서 Query Where절에 Between을 사용해서 이벤트 목록을 가져오면 된다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

[javascript] 부분

div 태그 ID가 calendar인 정보를 calendarEl로 선언 후 각종 세팅을 한 예제 (옵션은 공식 홈페이지 참조)

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
	plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
	header: {
		left: 'prev,next today',
		center: 'title',
		right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
	},
	defaultView: 'timeGridWeek',
	locale: 'ko',
	navLinks: true, // can click day/week names to navigate views
	editable: true,
	allDaySlot: false,
	eventLimit: true, // allow "more" link when too many events
	minTime: '10:00:00',
	maxTime: '24:00:00',
	contentHeight: 'auto',
	eventSources: [{
		events: function(info, successCallback, failureCallback) {
			$.ajax({
				url: '<c:url value="/test/selectEventList"/>',
				type: 'POST',
				dataType: 'json',
				data: {
					start : moment(info.startStr).format('YYYY-MM-DD'),
					end : moment(info.endStr).format('YYYY-MM-DD')
				},
				success: function(data) {
					successCallback(data);
				}
			});
		}
	}]
});
		
calendar.render();

Ajax로 데이터 조회 후 successCallback(data) 부분에서 data는 JSON-Array 형식으로 입력 해주면 화면에 자동으로 표시된다. 

JSON Array 형식 (예제 - 공식 홈페이지 참조)

  
events: [
    {
      "title"  : "event1",
      "start"  : "2010-01-01"
    },
    {
      "title"  : "event2",
      "start"  : "2010-01-05",
      "end"    : "2010-01-07"
    },
    {
      "title"  : "event3",
      "start"  : "2010-01-09T12:30:00",
      "allDay" : false
    }
  ]

[Spring] TestController.java

CalendarParam 을 통해서 파라미터 (start, end)를 받아서 selectEventList 함수를 통해 DB에서 데이터를 조회 후 JSON Array 형식(List<CalendarVO>)으로 리턴함 (@ResponseBody 선언)

@RequestMapping(value = "/selectEventList")
@ResponseBody
public List<CalendarVO> selectEventList(CalendarParam param) {
	return calendarService.selectEventList(param);
}

[Spring] CalendarVO.java

JSON Object로 사용할 변수들을 선언함 - title, start, end, url, color, textColor 등등

public class CalendarVO {
	
	private String title;
	private Date start;
	private Date end;
	private String url;
	private String color;
	private String textColor;
	private boolean allDay = false;

	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public Date getStart() {
		return start;
	}
	public void setStart(Date start) {
		this.start = start;
	}
	public Date getEnd() {
		return end;
	}
	public void setEnd(Date end) {
		this.end = end;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public String getColor() {
		return color;
	}
	public void setColor(String color) {
		this.color = color;
	}
	public String getTextColor() {
		return textColor;
	}
	public void setTextColor(String textColor) {
		this.textColor = textColor;
	}
	public boolean isAllDay() {
		return allDay;
	}
	public void setAllDay(boolean allDay) {
		this.allDay = allDay;
	}
}

참고 사이트 : https://fullcalendar.io/docs/events-function

events (as a function) - Docs | FullCalendar

A custom function for programmatically generating Events. function( fetchInfo, successCallback, failureCallback ) { } FullCalendar will call this function whenever it needs new event data. This is triggered when the user clicks prev/next or switches views.

728x90

반응형

FullCalendar의 경우 버전에 따라 함수가 굉장히 다르기 때문에 다루기 좀 까다로웠다.

**캘린더 생성

var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendarWrap'); //캘린더 div

//캘린더 속성

var calProps = {
plugins : [ 'interaction', 'dayGrid' ] //월 캘린더

, header : { left  :''  
    , center : 'title' 
    , right : ''//'prevYear,prev,next,nextYear' 
       } 
//, locale : 'ko' // 한국어 설정이다. 하지만 date Cell 포맷팅이 어려우니 그냥 주석으로 
, titleFormat : function(date) { // title 설정
  return date.date.year +"년 "+(date.date.month +1)+"월"; 
  }  
, columnHeaderText : function(date) { 
  return weekList[date.getDay()]; // 헤더 var weekList = ['일','월','화','수','목','금','토']; 
    } , defaultDate : strToday // 기준일자
, editable : false
, eventLimit : true // allow "more" link when too many events
, height  : 'parent'
// , eventColor : '#5c6a96' // 이벤트 색상
, eventBorderColor : '#5c6a96'
, eventBackgroundColor : '#ffffff' 
, events : eventData
, eventClick : fn_calEventClick // 이벤트 클릭 시
, dateClick : fn_calDateClick // 백그라운드 클릭시
, droppable : true // this allows things to be dropped onto the calendar
, drop : fn_calDrop  // 그리드에서 긁어올 때
// , eventAllow :function (dropInfo, draggedEvent) { //드롭 가능한 위치 설정
// , dropAccept : '.cool-event' // 긁어올 수 있는 draggable 설정
// , eventReceive : function (event, xhr) { debugger; return false;    } // drag 종료 시
// , eventOverlap: function(stillEvent, movingEvent) {debugger; return false;    } // 이벤트가 겹칠 때
// , eventSourceSuccess : function(content, xhr) {debugger; return false;    }
// , eventDragStop : function(stillEvent, movingEvent) {debugger; return false;    } 
// , eventDrop  : function(stillEvent, movingEvent) {debugger; return false;    }
    };
calendarId = new FullCalendar.Calendar(calendarEl, calProps );
calendarId.render();

// draggable 설정
// 드래거 New 를 계속 해주면 중복실행이 일어난다, 아래 코드는 한번만 실행하기

// 그리드 등 class 를 지정하여 드래그 가능하게 만들어준다
var Draggable = FullCalendarInteraction.Draggable;

var containerEl = document.getElementById('Grid1'); // 클래스의 상위 아이디
new Draggable(containerEl, {
itemSelector: '.dragCalendar', // 클래스
revert: true, 
revertDuration: 0,
eventData: fn_calDrag
    });

** 캘린더 함수 호출

var calendarId ; // new FullCalendar.Calendar(calendarEl, calProps ); 를 통해 생성한 캘린더 객체

// 캘린더 이벤트 업데이트 (id 지정해야 함)

var event = calendarId.getEventById(CAL_ID);
event._def.extendedProps = returnData; // 확장된 Prop
calendarId.rerenderEvents();

// 캘린더 이벤트 조회 

var eventList = calendarId.getEvents(); 

// 캘린더 기본값 지정. getEvents 시 가끔 deFault Date가 이동되어 고정 

calendarId.gotoDate(eventData); 

// 캘린더 삭제

calendarId.destroy(); // 이를 통해 삭제하면 선언이 충돌날 수 있다.

//캘린더 이벤트 전체 삭제

calendarId.removeAllEvents();

//캘린더 이벤트 추가

calendarId.addEvent(eventData);

calendarId.addEventSource(eventData)

드래깅 관련

// 캘린더 드래그 시작 시

function fn_calDrag(eventEl){
  result.title = USER+'-'+DATA;  // 이벤트 타이틀
  result.create = false; //실제 생성은 하지 않음 => 요구조건이 생성은 드래깅 후 팝업창으로 
  return result;       
}

728x90

반응형

공유하기

게시글 관리

'JAVA HTML JAVASCRIPT > 소오스' 카테고리의 다른 글