50 events should be like nothing.
I suspect the problem may be that you're calling
"$('#calendar').fullCalendar('renderEvent', calevent, true);" separately for
each individual event.
I'm not too familiar with the Full Calendar, but can you use the 'events'
option described on this page:
http://arshaw.com/fullcalendar/docs/events-and-sources.php
That sounds like it should let you feed your entire events array into Full
Calendar in one fell swoop.
Also, the async:false option in your $.ajax call is a VERY BAD IDEA. Sorry
for the shouting! But in a single-threaded browser like Firefox, that option
will not only lock up the current browser tab during the download, but it
will also lock up all browser tabs in all windows. If your site is slow to
respond and your visitor decides to go look at another browser window while
it loads, they will find that all their browser windows are locked up
completely. Not a good thing. Do you need the async:false?
-Mike
On Thu, Dec 17, 2009 at 12:27 PM, WhoButSB <whobu...@gmail.com> wrote:
> Hello All,
>
> I was wondering if someone could give me some pointers to help
> optimize my jQuery Full Calendar Code. The issue i'm running into is
> when I fetch a lot of events through AJAX (> 25), the browser stalls
> and becomes unresponsive usually resulting in a message to the user to
> abort the script. I'm trying to avoid this error, and I was wondering
> if there was something I could do in my function to improve the
> loading time.
>
> Here is a copy of the function I'm running:
>
> //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');
> }
>
> And here is a sample of the JSON that is returned, this is only one
> event. Sometimes there can be 50+ events returned:
> [{"id":4377,"title":"BWR - Lighting Affiliates Dinner -
> Actualized","start":1259874000,"end":1259888400,"className":"BWR
> Actualized","allDay":false,"editable":false}]
>
> Thank you for the help!
>
