在jQuery datepicker中的beforedayshow

Question

how can i use beforeShowDay in jQuery datepicker to retrieve information from database by date order?

please, with a small code

Answer 1

Best to order the events when selecting them from the database so they are already sorted. See if this helps...

<style type="text/css">

td.highlight, table.ui-datepicker-calendar tbody td.highlight a { 
    background: none !important;
    background-color: #fffac2 !important; 
    color: #FF0000;
}

</style>

<script>
$(document).ready(function(){

    // get the current date
    var today = new Date();
    var m = today.getMonth(), d = today.getDate(), y = today.getFullYear();

    var eventDates = [];
    fetchEventDays(y, m+1);     // Get User events for the current year and month.

    // ------------------------------------------------------------------
    // fetchEventDays - The ajax call below is synchronous (NOT asynchronous).
    // eventDates array must be populated prior to adding the beforeShowDay option
    // to the datepicker, otherwise, highlightDays() will have an empty eventDates array.
    // ------------------------------------------------------------------
    function fetchEventDays(year, month, inst) {
        var url ='<%config.db_cgi_url%>/eventmgr-ajax.cgi?do=get_event_dates&yr=' + year + '&mo=' + month;
        eventDates = [];    // reset to empty array

        $.ajax({
            url: url,
            async: false,
            success: function(result){
                var event_dates = result.split(',');
                for(var i = 0; i < event_dates.length; i++) {
                    var date_parts = event_dates[i].split('-');
                    eventDates.push(new Date(date_parts[0], date_parts[1]-1, date_parts[2]));
                }                       
            }
        });
    }

    // ------------------------------------------------------------------
    // highlightDays - Add a custom css class to dates that exist in the
    // eventDates array. Must also add the css for td.highlight (above).
    // ------------------------------------------------------------------
    function highlightDays(date) {
        for (var i = 0; i < eventDates.length; i++) {
            if ((eventDates[i].getTime() == date.getTime())) {
                var count = 0;
                for(var ii = 0; ii < eventDates.length; ++ii){
                    if(date.getTime() == eventDates[ii].getTime())
                        count++;
                }
                var event_text = (count > 1) ? 'Events' : 'Event';
                return [true, 'highlight', count + ' ' + event_text];
            }
        }

        // Return true to allow dates with or without an event to be selectable.
        // Return false to allow only dates WITH an event to be selectable.
        return [true, ''];
    }
});

</script>