jquery - fullCalendar events function

[fullcalendar] events : function 처리

jQuery 2010/11/22 15:50

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