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); } }); } });




신고

'jQuery' 카테고리의 다른 글

jqgrid 에서의 custom validation  (0) 2011.01.11
[fullcalendar] events : function 처리  (2) 2010.11.22
[jquery] fullcalendar  (33) 2010.11.02
[jquery] ajax  (0) 2010.06.29
posted by 소연파파™
  • zalanzalan 2011.11.30 16:10 신고

    감사합니다. json 처리하는거때문에 애먹었었는데 이거보고 바로 해결했습니다.

  • BlogIcon 개발자 2014.11.24 17:29 신고

    callback 함수에서는 어떻게 데이터를 뿌려줘야 하나요??