How can i prevent the flicker of jQuery´s datepicker when changing month?

Question

I have created a jQuery datepicker that has some days coloured (weekends, holidays). The fact is that the decission to colour that days depend on a ajax call that returns which days of the month have to be coloured.

When I click to the button to change the month, the ajax call is done, it returns the days to be coloured, the dateplicker flickers and then it displays the month correctly. I would like to display the new month once the ajax call is done and not earlier. Is there any way to avoid the flicker? It seems to work correctly in Internet explorer, but it doesnt work in Firefox.

Image

EDIT

If you click in change month button, the datepicker calls beforeShowDay for each day in the month to render it. If you put a breakpoint in console.log line (the jsfiddle example is below), you will see that the datepicker is closed and that it isn't rendered until every day is drawed. In my case, I want to maintain the old month until the the new month is fully drawed.

In the example that you can se below, the drawing of the calendar is really fast, and the days of the month are rendered so quickly that it seems to be instant, but if you do some ajax calls that retrieve database data to decide the colour that will have each day, the month flickers. Unlike Internet explorer, that problem happens to me in Firefox.

How can I fix it?

Fiddle example:

http://jsfiddle.net/b6V3W/370/

beforeShowDay: tratarDiasEspeciales,

function tratarDiasEspeciales(date){
   ajax call to decide the colour of the cell

   if(condition){
      //colour the day with blue
      return[true,'blue']
   }else{
     //colour the day with red
     return[true,'red']
   }
}

Answer 1

I've created another fiddle by modifying your's. Here I've bring your business logic part(ajax call to retrieve data from database to decide color) into onChangeMonthYear callback function.

$("#dater").datepicker('option', 'onChangeMonthYear', onChangeMonthYearCustom);

Here you can populate an array named renderedDates, which will contain all data for coloring dates and the important thing is that this callback function keep current rendered calendar UI while executing and this callback function is called before "beforeShowDay" callback function. I've set debug point while executing and make sure this is the case. So, now on "beforeShowDay" callback your code doesn't have to wait for ajax call to end, thus fulfill your requirement. Please check this solution and let me know if it's working as you expected.

Answer 2

The solution to the problem was on the library called jquery-ui.custom-1.9.1.custom.js. In that library, there is the following line of code:

inst.dpDiv.empty().append(this._generateHTML(inst));

That line first deletes the datepicker's data (header with month and year data and days) and then appends the new month's html code with generatedHTML function.

To solve the problem I have divided the code in two parts; first I get the new html code, and then I empty the datepicker´s data to append the new html code:

var quitar = this._generateHTML(inst);
inst.dpDiv.empty().append(quitar);

With this solution the ajax calls are made first and the calendar stays inmutable (it doesn´t flicker), then when the new code is ready it is inserted.

I know that it is not the best way to solve the problem (if I change the jquery version I will have to change the code there too) but is the only way I have found.