JQuery DatePicker カレンダーのCSSを変更

1.CSSを変える方法
1.1 firefox等のdeveloper tool等で該当箇所のcssを確認
1.2 変えたいCSSの個所をjQueryで書き換える

2.例
(1) 全体のフォントサイズを15pxに
$(“.ui-datepicker”).css(‘font-size’, 15);

(2) Titleの高さを1.2emに
$(“.ui-datepicker-title”).css(“line-height”, “1.2em”);

(3) 曜日の太文字を普通の文字に
$(“.ui-datepicker th”).css(“font-weight”, “normal”);

(4) Titleの太文字を普通の文字に
$(“.ui-widget-header”).css(“font-weight”, “normal”);

(5) 日曜日の曜日を赤色に
$(“.ui-datepicker-calendar th:nth-child(1) span”).css(“color”, “red”);

(6) 土曜日の曜日を青色に
$(“.ui-datepicker-calendar th:nth-child(7) span”).css(“color”, “blue”);

3.code

$( "#datepicker1" ).datepicker({
   beforeShow: function(input, inst){
     setTimeout(function(){
        $(”.ui-datepicker").css("font-size", 15);
        $(".ui-datepicker-title").css("line-height", "1.2em");
        $(".ui-datepicker th").css("font-weight", "normal");
        $(".ui-widget-header").css("font-weight", "normal");
        $(”.ui-datepicker-calendar th:nth-child(1) span”).css(”color”, "red");
        $(”.ui-datepicker-calendar th:nth-child(7) span”).css(”color”, "blue");
     },10);
  }
})