[노트] 캘린더 라이브러리 - Toast UI Calendar (2)

| 캘린더 라이브러리 Toast UI Calendar - 2

 

커스텀 팝업 까지 띄웠으면 달력에 표시가 되어야 하는데 

app.js 를 참고하여 함수를 생성했다.

// Ajax 데이터 호출, 콜백함수에 로직 추가 
function callScheduleAjax(data){
        createList(data);
};
// 라이브러리 스케줄 Set 함수 
function setSchedules() {
        cal.clear();
        //generateSchedule(cal.getViewName(), cal.getDateRangeStart(), cal.getDateRangeEnd());
        
        cal.createSchedules(ScheduleList);      
}
   

참고용,,

 function createList(data){
    	var calendar = cal || findCalendar('1');
    	var schedule = new Array;
    	var newtemp = new ScheduleInfo();
    	var temp = {
    			id : undefined,
	    		calendarId : undefined,
	    		title : undefined,
	    		isAllDay : undefined,
	    		end : undefined,
	    		start : undefined,	    		
	    		category : undefined,
	    		dueDateClass : undefined,
	    		color : undefined,
	    		bgColor : undefined,
	    		dragBgColor : undefined,
	    		borderColor : undefined,
	    		UserCode: undefined,
	    		UserName: undefined
    	}
    	
    	if(data != null){
	    	for(var i in data){
	    		temp.id = String(chance.guid());
	    		temp.calendarId = data[i].Seq;
	    		temp.UserCode = data[i].UserCode;
	    		temp.UserName = data[i].UserName;
	    		temp.title = data[i].title;
	    		temp.isAllDay = 'allday';
	    		temp.start = data[i].start;
	    		temp.end = data[i].end;
	    		temp.category = 'allday';
	    		temp.dueDateClass = '';
	    		temp.color = "#ffffff";
	    		temp.bgColor = "#726ff5";
	    		temp.dragBgColor = "#726ff5";
	    		temp.borderColor = "#726ff5";

	    		schedule.push(temp);
	    		
                temp = {
    			id : undefined,
	    		calendarId : undefined,
	    		title : undefined,
	    		isAllDay : undefined,
	    		end : undefined,
	    		start : undefined,	    		
	    		category : undefined,
	    		dueDateClass : undefined,
	    		color : undefined,
	    		bgColor : undefined,
	    		dragBgColor : undefined,
	    		borderColor : undefined,
	    		UserCode: undefined,
	    		UserName: undefined
    			}
	    	}
    	}
        ScheduleList = schedule;
        console.log(ScheduleList);
    	cal.createSchedules(schedule);
    }

참 지저분하지만 대충 이런식...

생성한 달력 calendar 에 cal.createSchedules 함수로 스케줄을 생성하여 그려주는거 같다.

 

여기까지 작성이 되었다면 스케줄이 생성되어 달력에 표시가 된다.

혹시 월이 바뀌거나 새로고침으로 스케줄이 사라진다면 setSchedules() 을 확인,

Change 될 때 마다 스케줄을 다시 그려주어야 한다.

 

출처 및 참고 : 

https://nicedoc.io/nhn/tui.calendar/blob/master/docs/getting-started.md?theme=dark#user-content-getting-started

https://ui.toast.com/tui-calendar/

https://github.com/nhn/tui.calendar