Can you bold jquery ui datepicker fields?

I am wondering is it possible to bold certain date cells in jquery ui datepicker. I would like a user to know that their are events on certain dates so that they click on it and it would show them开发者_如何学Python all listed events.

Thanks

You can use the beforeShowDay function to return a class name that will be attached to the day.

beforeShowDay: function(date) { 
  // Check logic
  return [true, "boldedClass"];
}

Needed to do this my self today!, Thanks to Brandon for the heads up on the function. To extend it a bit i wrote this. It will bold multiple dates but i'm not amazing on JavaScript so it is pretty 'quick and dirty'. You'd need to change the array / if logic if you have different dates. No doubt there is a MUCH better way to compare dates that this horrible string comparison.

// Datepicker
$('#datepicker').datepicker({
    inline: true,
    dateFormat: 'dd-mm-yy',
    beforeShowDay: bolddates                
});

function bolddates(date){

    var xboldthese=new Array("1-1-2012","2-1-2012","10-1-2012");
    var xday = date.getDate();
    var xmonth = date.getMonth()+1; //jan is 0
    var xyear = date.getFullYear();
    var xfulldate = xday + "-" + xmonth + "-" + xyear;
    var xcssflg = "";
        for (var i=0; i<xboldthese.length; i++){
            if(xfulldate == xboldthese[i]){
                xcssflg = "bolddate";
            }else{
                //maybe some other css class
            }
        }
        return [true, xcssflg]; 
}

To answer your other question just add the a after it in the CSS selector since its inside the td e.g.

.bolddate a{
    font-weight:bold !important;
    color:#FF0000 !important;
}

I'm still working on the code when they click on one of them.

Ok here is my other answer modified a bit to also do a click event when you select the date. The event is marked by //Trigger code. My one passes the date to a php file which outputs html that updates a div, yours could be anything.

Again excuse the poor programming, I just needed this to work. It could be made a lot more efficient / done better i'm sure.

$(function(){

            $('#datepicker').datepicker({
                inline: true,
                dateFormat: 'd-m-yy',
                beforeShowDay: bolddates,   
                onSelect: processdate           
            });

            function getdates(){
                return Array("1-1-2012","2-1-2012","10-1-2012","12-2-2012"); //build this however, could be a remote call
            }

            function parsedate(date){
                return date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();           
            }

            function bolddates(date){
                var xboldthese=getdates();
                var xfulldate=parsedate(date);
                var xcssflg = "";

                    for (var i=0; i<xboldthese.length; i++){
                        if(xfulldate == xboldthese[i]){
                            xcssflg = "bolddate";
                        }else{
                            //maybe some other css class
                        }
                    }
                    return [true, xcssflg]; 
            }   

            function processdate(date){
                var xprocessthese=getdates(); 
                //note, date passed to this function is in dateFormat: option format

                    for (var i=0; i<xprocessthese.length; i++){
                        if(date == xprocessthese[i]){
                            //Trigger code
                            $.get('/functions/homedata.php?mode=4&date=' + date, function(data) {
                                $("#ev-eventsholder").fadeOut(1000, function(){
                                    $('#ev-eventsholder').html(data);   
                                }).fadeIn(1000); });                        
                            }
                            //------------
                    }               
            }

        });

And the simple css:

            .bolddate a{
            font-weight:bold !important;
            color:#FF0000 !important;
        }