구현 내용
fullcalendar API를 활용해 달력을 구현 함
1. 공연 목록이 캘린더에 표기됨.
2. ‘more’ 을 클릭하면 해당일에 하는 전체 공연을 볼 수 있음.
3. 공연명을 클릭하면 해당 공연 정보가 표기되는 detail 페이지로 이동함.
4. 버튼(>,<)을 클리해 다음 달로 이동할 수 있음
5. today 버튼을 클릭하면 오늘날짜로 이동함.
핵심 코드
문서가 로딩된 시점에 캘린더를 초기화한다.
캘린더에 표기될 이벤트 데이터를 갖고 오기 위해 ajax를 이용한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 600,
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
defaultDate: new Date(),
header: {
left: '',
center: 'title',
right: 'prev,next today'
},
eventLimit: true,
eventLimitText: "more",
eventLimitClick: "popover",
editable: false,
droppable: false,
dayPopoverFormat: { year: 'numeric', month: 'long', day: 'numeric' },
events:function(info, successCallback, failureCallback){
$.ajax({
url: '${pageContext.request.contextPath}/getEvents.do',
dataType: 'json',
success:
function(result) {
var events = [];
if(result!=null){
$.each(result, function(index, element) {
var enddate=element.enddate;
if(enddate==null){
enddate=element.startdate;
}
var startdate=moment(element.startdate).format('YYYY-MM-DD');
var enddate=moment(enddate).format('YYYY-MM-DD');
var realmname = element.realmname;
// realmname (분야) 분야별로 color 설정
if (realmname == "기타"){
events.push({
title: element.title,
start: startdate,
end: enddate,
url: "${pageContext.request.contextPath }/detail.do?seq="+element.seq,
color:"#6937a1"
}); //.push()
}
else if (realmname == "무용"){
events.push({
title: element.title,
start: startdate,
end: enddate,
url: "${pageContext.request.contextPath }/detail.do?seq="+element.seq,
color:"#f7e600"
}); //.push()
}
else if (realmname == "미술"){
events.push({
title: element.title,
start: startdate,
end: enddate,
url: "${pageContext.request.contextPath }/detail.do?seq="+element.seq,
color:"#2a67b7"
}); //.push()
}
else if (realmname == "연극"){
events.push({
title: element.title,
start: startdate,
end: enddate,
url: "${pageContext.request.contextPath }/detail.do?seq="+element.seq,
color:"#008d62"
}); //.push()
}
else if (realmname == "음악"){
events.push({
title: element.title,
start: startdate,
end: enddate,
url: "${pageContext.request.contextPath }/detail.do?seq="+element.seq,
color:"#6937a1"
}); //.push()
}
else{
events.push({
title: element.title,
start: startdate,
end: enddate,
url: "${pageContext.request.contextPath }/detail.do?seq="+element.seq,
color:"#ff3399"
}); //.push()
}
}); //.each()
console.log(events);
}//if end
successCallback(events);
}//success: function end
}); //ajax end
}, //events:function end
});//new FullCalendar end
calendar.render();
});
|
cs |
23행-107행 : data 요청에 성공하면 json 형식으로 인자에 전달된다.
$.each() 메서드를 사용해 jsonArray 의 0번 index 부터 마지막 index까지 담겨있는 fullcaleandarDto에서 필요한 data를 추출하여 object에 담아 events 변수에 담겨 있는 빈 배열에 전달한다.
필요한 data를 모두 다 추출한 뒤 events 변수에 담겨 있는 배열을 successCallback()메소드를 호출하면서 인자로 전달한다.
'프로젝트' 카테고리의 다른 글
| [Home/전체공연List/상세페이지] Open API에서 갖고온 데이터 출력 (0) | 2020.04.09 |
|---|---|
| [Home/전체공연List/상세페이지]상세페이지-공공데이터 포털에서 OPEN API 로 Request 보내고 Response 받기(feat. XML 문서 파싱) (0) | 2020.04.08 |
| [Home/전체공연List]검색 기능 (0) | 2020.04.08 |
| [전체공연List]전체 공연 출력하기 / 페이징 처리 (0) | 2020.04.08 |
| [Home]인기공연 출력하기(owl.carousel) (0) | 2020.04.08 |
