DatePicker show speed very slow

Question

I am using the jquery datepicker in my project. I am accessing the database using ajax to retrieve dates that need to be highlighted for every change of month. This is done using the onChangeMonthYear: function(year, month, inst) and the beforeShowDay: function(dateToShow) events. The dates are being highlighted appropriately but the problem I am having is that it really takes a long time to highlight the dates in the beforeshowday event. I would like to point out here that the access time on my local machine is really rapid and have eliminated the fact that the response time from the server is causing the delay in highlighting.

I have also tried to use duration: 'fast', but that has not helped either.

1.How can I increase the display time of the dates? or

2.how can I unable the calendar, such that till the dates are being displayed, the user can`t navigate through other month.

Answer 1

You should be able to disable/enable the datepicker by using its disable option:

$('.selector').datepicker({
    onChangeMonthYear: function(year, month, inst) {
        $(this).datepicker( "option", "disabled", true);
    },

    beforeShowDay: function(date) {
        $(this).datepicker( "option", "disabled", false);
    }
});

Answer 2

Im would like to questioning your approach on this but I might be wrong since we dont have all the facts. But from what we do got:

Approach 1. Load all the dates server side without any ajax since its better to load a little more data only once then less many times.

Approach 2. If 1 is not possible load all the dates with ajax and then activate the datepicker in the ajax callback.

Approach 3. If there is a huge amount of dates you could batch it and at least make sure that you have a couple of months ahead.

Answer 3

Bit difficult without code, but give the following a try:

In CSS file : #calendarContainer {display:none;}

$(function(){$('#calendarContainer').show();}); 
//Will only show when document is ready.

OR if the date delay happens even though page is already loaded:

In CSS file : #calendarContainer {display:none;}

$(function(){

var sI = setInterval(function() {
    if ($('.dateHighlightContainer .dates').hasClass('highlight'))
    { 
        $('#calendarContainer').show();
        clearInterval(sI);
    }
}, 1000); 
    }); 
//Check each second - Will stop and display calendar once it finds the class highlight

Check my full example for more detail: http://jsfiddle.net/Jeu5q/

Answer 4

Your delay problem must be related with your ajax method. Here is the working example. I havent notice any delay problem with predefined dates.

// Highlighted Days
var dayList = [1, 3, 5, 7, 9, 11 , 13 , 15 , 17 , 19 , 21 , 23 , 25 , 27 ];
var monthList = ["Jan", "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov","Dec"  ];

function createDays(dayList, month, year) {

    var dateArray = new Array();
    $.each(dayList, function(i, value) {
        dateArray.push(new Date(month.concat(' ', value, ', ', year)));
    });
    return dateArray;
}

$(document).ready(function() {

    $dateArray = createDays(dayList, "Jul", "2011");

    $('#datepicker').datepicker({
        beforeShowDay: function(_date) {

            $highLightDay = false;            
            $.each($dateArray , function(i, date) {
                if (date.valueOf() == _date.valueOf()) {                   
                  $highLightDay = true;
                }                 
            });

            if($highLightDay)
                return [true, "ui-state-active" ,"Event-".concat(_date)];

            return [true, "", ""];
        },
        onChangeMonthYear: function(year, month, inst) {
           $dateArray = createDays(dayList, monthList[month-1], year);     

        }

    });

});

Answer 5

If your calendar/classes/tc_calendar.php line 9 shows...

$WEB_SUPPORT = "http://www.triconsole.com/php/calendar_datepicker.php";

The delay is a timeout, so you need to change line 18 to...

public $check_new_version = false;

And datepicker goes back to normal.