日历效果

一、HTML
    <a href="#" id="calendar_btn" title="日历">日历</a>
    <div class="calendar">
        <div class="title">
            <h1 class="green" id="calendar_title">MONTH</h1>
            <h2 class="green" id="calendar_year">year</h2>
            <a href="" id="prev">Prev Month</a>
            <a href="" id="next">Next Month</a>
        </div>
        <div class="body">
            <div class="green body_list">
                <ul>
                    <li>日</li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                </ul>
            </div>
            <div class="drakgrey body_list">
                <ul id="days"></ul>
            </div>
        </div>
    </div>

二、CSS

/*显示日历按钮*/
#calendar_btn{
   font-size:0 ;
   background: url("../images/calendar1.png");
   background-size: cover;
   width: 50px;
   height: 50px;
   display: inline-block;
   position: relative;
   left: -19%;
}

/*日历窗口*/

.calendar{
   width: 450px;
   height: 350px;
   background: rgba(255,255,255,.8);
   box-shadow: 0 1px 1px rgba(0,0,0,.1);
   position: absolute;
   right: 0;
   display: none;
   z-index:100;
}
.calendar .title{
   height: 70px;
   border-bottom:1px solid rgba(0,0,0,0.1);
   text-align:center;
   position:relative;
}
.calendar #calendar_title{
   font-size: 25px;
   padding:14px 0 0 0;
   line-height: 1;
}
.calendar #calendar_year{
   font-size: 15px;
   font-weight:normal ;
   line-height: 1;
}
.calendar .title a{
   text-indent: -99999px;
   position: absolute;
   width: 60px;
   height: 70px;
   background: no-repeat 50% 50%;
   top: 0;
}
.calendar .title #prev{
   background-image:  url(../images/prev.png);
   left: 0;
}.calendar .title #next{
    background-image:  url(../images/next.png);
    right: 0;
 }
.calendar .body_list ul{
   width: 100%;
   font-weight:bold ;
   font-size: 14px;
}
div.calendar .body_list ul li{
   width: 14.28%;
   height: 36px;
   line-height: 36px;
   display: block;
   float: left;
   margin-right: 0;
}
.calendar .green{
   color:#6ac13c;
}

/*日期被选中字体显示红色*/
.calendar .green_box{
   background-color: #e9f8df;
   border: 1px solid #6ac13c;
}
.calendar .lingthgrey{
   color:#a8a8a8;
}
.calendar .drakgrey{
   color:#565656;
}
/*双休日日期字体显示红色*/
.calendar .lingthred{
   color:#DE8C9E;
}
.calendar .drakred{
   color:#F40C33;
}
.calendar .white{
   color:#fff;
}
.calendar .white_box{
   border:1px solid #fff;
   background:rgba(0,0,0,.5);;
}

JavaScript

//闰年每月几天

var sp_month=[31,29,31,30,31,30,31,31,30,31,30,31];

//非闰年每月几天
var normal_month=[31,28,31,30,31,30,31,31,30,31,30,31];
var month_name=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];

//获取当天
var now=new Date();

//获取今年
var now_year=now.getFullYear();

//获取今月
var now_month=now.getMonth();

//获取今日
var now_day=now.getDate();

//判断是否为闰年，返回当月天数
function isSp_month(year,month){
   if((year%4==0)||(year%400==0)&&(year%100!=0)){
      return sp_month[month];
   }else{
      return normal_month[month];
   }
}

//获取当月第一天是星期几
function get_firstDay(month,year){
   var first=new Date(year,month,1);
   return (first.getDay());
}

function refreshDate(){
   var str="";

//获取当月天数
   var currMonth_days=isSp_month(now_year,now_month);

//获取当月第一天
   var firstDay=get_firstDay(now_month,now_year);
   var li_class="";
   for (var i= 0;i<firstDay;i++){
      str+="<li></li>";
   }
   for (var j=1;j<=currMonth_days;j++){

//判断当月日期是否是今天之前

      if(now_year==now.getFullYear()&&now_month==now.getMonth()&&j<now_day

         ||now_year==now.getFullYear()&&now_month<now.getMonth()

         ||now_year<now.getFullYear()){
            li_class=" class='lingthgrey'";
      }

//判断当月日期是否是今天

      else if(now_year==now.getFullYear()

            &&now_month==now.getMonth()&&j==now_day){
            li_class=" class='white white_box'"
      }

//其余是今天之后

      else{
         li_class=" class='drakgrey'"
      }

//创建日期
      str+="<li"+li_class+">"+j+"</li>";

   }

//放入当月日期
   $("#days").html(str);

//放入当月月份
   $("#calendar_title").html(month_name[now_month]);

//放入今年
   $("#calendar_year").html(now_year);
   //当天之前双休日淡红
   $("#days li").each(function(index){
      if($(this).attr("class")=="lingthgrey"){
         if(index%7==0) {
            $(this).attr("class", "lingthred");
            $($("#days li")[index-1]).attr("class", "lingthred");
         }
      }
      //当天是双休日深红
      else if($(this).attr("class")=="white white_box"){
         if((index)%7==0||(index+1)%7==0) {
            $(this).attr("class", "drakred white_box");
         }
      }
      //当天之后的双休日深红
      else{
         if((index)%7==0||(index+1)%7==0) {
            $(this).attr("class", "drakred");
         }
      }
   })
}

function day_click(){
   $("#calendar_li .calendar .body #days li").click(function(){
      $("#calendar_li .calendar .body #days li").removeClass("green_box");
      $(this).addClass("green_box");
   });
}

//显示当前日期日历页方法
refreshDate();
//当前日期日历点击几号显示绿边框
day_click();
//按左箭头显示上一个月

$("#prev").click(function(e){
   e.preventDefault();
   now_month--;
   //防止点击过快导致now_month<0
   if(now_month<=0){
      now_month=11;
      now_year--;
   }
   //显示上一个月日期日历
   refreshDate();
   //上一个月日期日历点击几号显示绿边框
   day_click()
});

//按右箭头显示下一个月
$("#next").click(function(e){
   e.preventDefault();
   now_month++;
   if(now_month>11){
      now_month=0;
      now_year++;
   }
   //显示下一个月日期日历
   refreshDate();
   //下一个月日期日历点击几号显示绿边框
   day_click()
});
$("#calendar_btn").click(function(e){
   e.preventDefault();
});
$("#calendar_li").mouseover(function(){
   $(".calendar").css("display","block");
});
$("#calendar_li").mouseout(function(){
   $(".calendar").css("display","none");
});