Question

I am using jquery datepicker for my application.

I want to highlight the dates selected by the user.
User will select a date and that date is added to the database as holiday and the the date should become highlighted. I am already having some dates in database which will be highlighted before using beforeShowDay event and also i have disabled the weekends.

everything is working fine except that i am unable to highlight that date after adding it to database. it is getting highlighted only when i am reloading the calendar.

I searched on internet but didn’t got any clear idea, so many places it is suggested to use multidatepicker but the point is at a time I am selecting only one date adding it to database then selecting other.

please suggest me where i am going wrong.
My code is–

var dates = [ <? php echo $holidays; ?> ];

$(document).ready(function () {
    $("#calendardisplay").datepicker({
        dateFormat: 'yy-mm-dd',
        beforeShowDay: highlightDays,
        onSelect: dateSelected
    });

    function dateSelected(dateText, inst) {
        $.post('/postChannelHoliday.php', {
            'date': dateText
        }, function (data) {
            alert('Successfully Added');
        });
    }
}

function holiday(date) {
    for (var i = 0; i < dates.length; i++) {
        if (new Date(dates[i]).toString().substr(0, 16) == date.toString().substr(0, 16)) {
            return [true, 'ui-state-highlight'];
        }
    }
    return [true, ''];
}

function highlightDays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return holiday(date);
    } else {
        return noWeekend;
    }
}
});

i am including a php file to get the dates stored in the database to highlight them in calendar

Answer 1

Instead of alert you need to update list of your holidays (look like dates global object) and than force update of the datepicker by calling refresh on it.