jquery-ui datepicker日历的灵活运用日期背景色定义，选择日期显示数据

<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="../calendar/ui-lightness/jquery-ui-1.7.2.custom.css">

  <script type="text/javascript" src="../js/jquery-ui.js"></script>

html:

<div class="col-sm-10 col-sm-offset-1 col-lg-12 col-lg-offset-0" style="margin-top: 40px;">

              <!-- 日历-->

              <div class="zzsc-container col-sm-5">

                <div class="container ">

                    <div class="row">

                        <div class="col-sm-5" style="padding:0">

                            <h3></h3>

                            <div id="datepicker" style="height:305px"></div>

                        </div>

                    </div>

                </div>

              </div>

              <!-- 滚动框显示每日课程信息  -->

              <div class="col-sm-7 clearfix" style="padding-right: 0px;">

                <p class="col-sm-12 titier">

                    <em class="emstyle"></em>今日课程 <em class="emstyles"></em>公开课

                </p>

                <ul class="lis col-sm-12 col-xs-12" style="border-left: 1px solid #dadada">

                </ul>

              </div>

        </div>

js:

var speciald=[]; //定义日期数组有课程就显示背景色

      $.ajax({//默认加载,加载本月日历安排,加载当日的课程安排

                url:"../course/duration",

                data:{},

                type:'post',

                success:function(data){

                  if(data.result.status=='SUCCESS'){

                      var list=data.result.data.courseList; //今日课程

                        if(list.length==0){

                          var html="<li style='text-align:center'>今日暂无课程！敬请期待。。。。。</li>";

                          $('.lis').append(html);

                        }else{

                          for(var i=0;i<list.length;i++){

                              var html='<li>'+

                              '<span class="col-sm-8 col-xs-8 text-center spanleft">'+list[i].course_name+'</span>'+

                              '<a href="course_detail.html?course_id='+list[i].course_id+'" class="col-sm-4 col-xs-4 text-center aright">查看详情</a>'+

                              '</li>';

                            $('.lis').append(html);

                          }

                        }

                      for(var i=0;i<data.result.data.dateList.length;i++){

                        speciald.push(data.result.data.dateList[i].school_date);

                      }

                      $( "#datepicker" ).datepicker({

                            dayNamesMin: ['日','一','二','三','四','五','六'],

                            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],

                            dateFormat: 'yy-mm-dd',

                            beforeShowDay: function( date ){ //显示日历中的每个日期背景色

                                  var m=date.getMonth()+1;

                                  if(m>=10){

                                    m=m;

                                  }else{

                                    m="0"+m;

                                  }

                                  var d=date.getDate();

                                  if(d>=10){

                                    d=d;

                                  }else{

                                    d="0"+d;

                                  }

                                  var y=date.getFullYear();

                                  var formatDate=y+"-"+m+"-"+d;//此处日期的格式化和speciald中的格式一样

                                  //inArray实现数组的匹配

                                  if($.inArray(formatDate,speciald)!=-1){

                                      //此处要返回一个数组，specialdays是添加样式的类

//[0]该日期是否可以被选择 （数组的第一项， 为true或false）

//[1]该日期单元格上使用的 CSS 类

//[2]该日期单元格上显示的字符串提示信息。

                                      return [true,"specialdays",formatDate];

                                        

                                  }

                                  else{

                                      return [true,'',''];

                                  } 

                            },

                            onChangeMonthYear:function(year,month,inst){// 月份或年份改变时会被调用

                              $.ajax({//切换年月操作,加载某年某月的日历安排,加载和当日同一天的有课的课程安排

                                  url:"../course/duration/day",

                                  data:{"year":year,"month":month},

                                  type:'post',

                                  success:function(data){

                                    if(data.result.status=='SUCCESS'){

                                        var courseList=data.result.data.courseList;

                                        var dateList=data.result.data.dateList;

                                        for(var i=0;i<data.result.data.dateList.length;i++){

                                            speciald.push(data.result.data.dateList[i].school_date);   

                                        }

                                       $('#datepicker').datepicker('refresh'); //刷新日历

                                    }

                                  }

                              });

                            },

                            onSelect: function (dateText,inst) {// 选择日历的日期时被调用

                              var datas=dateText;

                              datas=datas.split('-');

                              $('.lis').html('');

                              $.ajax({//切换日期操作,加载某年某月某日的课程安排

                                  url:"../course/duration/date",

                                  data:{"year":datas[0],"month":datas[1],"day":datas[2]},

                                  type:'post',

                                  success:function(data){

                                    if(data.result.status=='SUCCESS'){

                                        var list=data.result.data.courseList;

                                        if(list.length==0){

                                          var html="<li>暂无课程！敬请期待。。。。。</li>";

                                          $('.lis').append(html);

                                        }else{

                                          for(var i=0;i<list.length;i++){

                                             var html='<li>'+

                                              '<span class="col-sm-8 col-xs-8 text-center spanleft">'+list[i].course_name+'</span>'+

                                              '<a href="course_detail.html?course_id='+list[i].course_id+'" class="col-sm-4 col-xs-4 text-center aright">查看详情</a>'+

                                             '</li>';

                                            $('.lis').append(html);

                                          }

                                        }

                                    }

                                  }

                              });

                            }

                      }); 

                  }

                }

          });