Development/jQuery
jquery - fullCalendar events function
linuxism
2013. 7. 29. 00:46
jQuery plugin 인 FullCalendar 에서 json data를 화면에 출력할때는 다음과 같은 간단한 코드를 사용한다.
$('#calendar').fullCalendar({
events: "/myfeed.json"
});
[코드1] json feed
간단한 대신, 정해진 형식의 json 형태만 화면에 출력한다는 단점이 있다. FullCalendar 에서 사용하는
표준 Object 를 유지해야 한다는 것이다. url 에서 확인해보면 되겠지만 [코드2]와 같은 형태일 것이다.
[{"allDay":"true",
"editable":"false",
"end":"2010-11-25",
"id":"1",
"start":"2010-11-21",
"title":"test2"}]
[코드2] json data
위의 형식이 지켜지지 않을때는 [코드1]과 같은 형태를 이용하지 못한다. 보통 [코드3]과 같은 형태는 넘어온 데이터로 부터 jsonTxt 관련 부분만을 추출(넘어온 데이터.jsonTxt)해서 이용해야 한다.
{
"commonVO":
{"pageSize":"15","page":"1","totalPage":"0","totalCnt":"0"},
"jsonTxt":
"[{"allDay":"true",
"editable":"false",
"end":"2010-11-25",
"id":"1",
"start":"2010-11-21",
"title":"test2"}]"
}
[코드3] json data
jQuery 의 Ajax 를 이용하여 넘어온 데이터가 [코드3]과 같다면 다음과 같은 형태를 이용하면 될 것이다.
$.ajax({
url: '/myfeed.json',
dataType: 'json',
success: function(data, text, request) {
var events = data.jsonTxt;
callback(events);
}
});
[코드4] ajax code
fullcalendar 에서는 events 가 object 이어야 하기 때문에 다음과 같이 코드를 수정해서 사용하면 화면에 올바르게 출력되는 것을 볼 수 있다.
$('#calendar').fullCalendar({
events: function(start, end, callback) {
$.ajax({
url: '/myfeed.json',
dataType: 'json',
success: function(data, text, request) {
var events = eval(data.jsonTxt);
callback(events);
}
});
}
});
출처 - http://jjanggun.tistory.com/441