jQuery FullCalendar 이벤트 최적화 가져 오기

누군가 내 jQuery 전체 캘린더 코드를 최적화하는 데 도움이되는 몇 가지 지침을 줄 수 있는지 궁금합니다. 내가 겪고있는 문제는 AJAX (> 25)를 통해 많은 이벤트를 가져 오면 브라우저가 멈추고 응답이 없으므로 대개 사용자에게 스크립트를 중단하라는 메시지가 표시됩니다. 나는이 오류를 피하려고 노력하고 있는데, 로딩 시간을 개선하기 위해 할 수있는 일이 있는지 궁금해했다. 여기 jQuery FullCalendar 이벤트 최적화 가져 오기

함수 내가 출마의 복사본입니다 :

//Load the Business Unit Calendar Events 
function ajaxBUEvents(start, end){ 
    //Loop through the selected checked calendars 
    $(selectBUCalendars()).each(function(i, cal){ 
     $.ajax({ 
      type: 'POST', 
      data: {'startDate': start, 'endDate': end, 'buCals[]': cal}, 
      url: '<?= site_url('AJAX/calendar_ajax/get_cal_events'); ?>', 
      dataType: 'json', 
      async: false, 
      beforeSend: function(){ 
       $('#loading-dialog').dialog({minHeight: 100, width: 250}).dialog('open'); 
       $('#loading-dialog p').text('Loading '+cal+' Calendar Events'); 
      }, 
      success: function(calevents){ 
       $.each(calevents, function(i, calevent){ 
        $('#calendar').fullCalendar('renderEvent', calevent, true); 
       }); 
      } 
     }); 
    }); 
    $('#loading-dialog').dialog('close'); 
}

그리고 여기에 반환 된 JSON의 샘플을, 이것은 단지 하나 개의 이벤트입니다. 경우에 따라 50 개 이상의 이벤트가 반환 될 수 있습니다.

[{"id":4377,"title":"BWR - Lighting Affiliates Dinner - Actualized","start":1259874000,"end":1259888400,"className":"BWR Actualized","allDay":false,"editable":false}]

도움을 주셔서 감사합니다.

출처

2009-12-17 whobutsb

트릭은 renderEvent 대신 addEventSource을 사용하는 것입니다. renderEvent을 사용하면 추가 한 모든 이벤트에 대해 전체 캘린더가 다시 그려지기 때문입니다. addEventSource는 사용자가 제공 한 소스에서 모든 이벤트를 추가 한 다음 달력을 한 번 다시 그립니다. 성능의 차이를 확인할 수 있도록

success: function(calevents){ 
    $('#calendar').fullCalendar('addEventSource', calevents); 
}

하는 난, 당신을 위해 두 demopages했다.

는

느린 버전은

가

http://jsbin.com/ewuka

빠른 버전 addEventSource (달력만을 위해 다시 그려되는 방식주의를 통해 50 개 개의 이벤트를 추가 (달력이 모든 이벤트를 다시 그려 얼마나 전체 주) renderEvent를 통해 50 개 개의 이벤트를 추가 한 번)

http://jsbin.com/udode

출처

2009-12-18 00:49:44 jitter

OMG, 완벽 해! 나는이 함수를 완전히 간과했으며 renderEvent가 매번 달력을 다시 썼다는 것을 알지 못했다. 이것은 대단합니다, 내일 직장에서 이것을 시도하기 위해 기다릴 수 없습니다. 데모 페이지와 설명을 보내 주셔서 감사합니다. – whobutsb

BTW JSBIN은 달콤합니다! 나는 이것을 좀더 사용하기 위해 기다릴 수 없다. – whobutsb

그래서 방금 addEventSource를 구현했으며 달력의 성능을 대폭 향상 시켰습니다. 내가 지금 실행하고있는 유일한 문제는 반환 된 모든 이벤트에 대해 중복 이벤트를 추가한다는 것입니다. 따라서 3 개의 이벤트가 반환되면 6 개의 6 개의 이벤트가 화면에 나타납니다. – whobutsb

jQuery FullCalendar 이벤트 최적화 가져 오기

답변

관련 문제