js實現的日曆

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!--css-->

<style type="text/css">

.payment{width:532px;float:left;border:solid 1px #bfbfbf;color:#0d0d0d}
.payment .left{float:left;padding:0 15px;width:150px}
.payment .left h2{font-size:16px;line-height:40px}
.payment .left>p{margin-top:20px;line-height:25px}
.payment .left .years{width:63px}
.payment .left .months{width:44px}
.payment .left select{height:25px;border:solid 1px #bfbfbf}
.payment .left>p a{font-size:12px;color:#727272}
.payment .left>p a:hover{color:#f7513f}
.payment .left>p .syy{float:left}
.payment .left>p .syy i{margin-right:3px}
.payment .left>p .xyy{float:right}
.payment .left>p .xyy i{margin-left:3px}
.payment .left .cont{width:130px;padding:0 10px;margin-top:40px;background:#eee;border-radius:6px;padding-bottom:20px}
.payment .left h5{line-height:40px;font-size:14px}
.payment .left .cont p{line-height:20px}
.payment .left .cont a{color:#f7513f;font-size:12px;float:right}
.calendar{float:right;width:350px;height:auto}
.xd-theme-color{color:#01C097}
.xd-font-color2{color:#A0A0A0}
.calendar_on{background-color:#febab8}
.calendar .month{width:100%;font-size:20px;border-radius:8px;margin:0}
.calendar .month .title{height:25px;width:100%;padding:0 10px;display:none}
.calendar .month .week-list{list-style:none;height:40px;width:100%;line-height:40px;float:none;margin:0;background:#bfbfbf}
.calendar .week-list .week{width:14.2857%;text-align:center;float:left;border:none;color:#fff}
.payment .helper{clear:both;width:0;height:0;float:none;border:none}
.calendar .month .month-list{width:100%;list-style:none;float:none;height:218px;border:none;margin:0;background:#eee;border:none;padding:10px 0;overflow:visible;position:relative}
.calendar .month-list .item{width:14.2857%;height:38px;line-height:38px;text-align:center;float:left;border:none;font-size:16px;overflow:visible}
.calendar .item .day{height:28px;width:28px;line-height:28px;display:inline-block;text-align:center;margin:0 auto;border-radius:50%;font-size:16px;color:#3a3a3a;border:none;cursor:default;position:relative}
.calendar .item .calendar_on:hover{background:#fe504d;color:#fff;transition:all .2s ease-out}
.calendar .item .calendar_on:hover .layer{display:block}
.calendar .item .day .layer .arrowup{position:absolute;height:4px;width:8px;left:50%;top:-4px;margin-left:-4px;background:transparent url(../img/icon/arrowup_03.png) left center no-repeat}
.calendar .item .day .layer{display:none;width:290px;padding:10px 15px;position:absolute;left:50%;top:28px;border-radius:6px;margin-left:-160px;background:#fff;box-shadow:0 0 10px #A0A0A0;z-index:99}
.day .layer table{width:100%}
.day .layer thead th,.day .layer thead tr{color:#727272;font-size:12px;font-weight:400;height:auto;padding:5px 0}
.day .layer tbody td,.day .layer tbody tr{font-size:12px;color:#0d0d0d;height:auto;padding:0}
.day .layer tbody td.red{color:#f7533d}
.day .layer table .left{text-align:left;float:none;width:auto}
.day .layer table .right{text-align:right;float:none}

</style>

 

<!--dom-->
                    <div class="payment">
                        <div class="left">
                            <h2>回款日曆</h2>
                            <p>
                                <select class="years">
                                    <c:forEach var="year"  begin="${minPaymentYear}" end="${maxPaymentYear}">
                                        <option value="${year}">${year}</option>
                                    </c:forEach>
                                </select>
                                <span>年</span>
                                <select class="months">
                                    <c:forEach var="month"  begin="1" end="12">
                                        <option value="${month}">${month}</option>
                                    </c:forEach>
                                </select>
                                <span>月</span>
                            </p>
                            <p>
                                <a class="syy" href="javaScript://">
                                    <i class="fa fa-caret-left" aria-hidden="true"></i>
                                    上一月
                                </a>
                                <a class="xyy" href="javaScript://">
                                    下一月
                                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                                </a>
                            </p>
                            <div class="helper"></div>
                            <p></p>
                            <div class="cont">
                                <h5>下期回款日</h5>
                                <p>
                                    <c:choose>
                                        <c:when test="${not empty nextPaymentTime}"><span><fmt:formatDate value="${nextPaymentTime}" type="both" pattern='yyyy-MM-dd'/></span><a href="${ctx}/repayementdetail/repaydetail.htm">詳情</a></c:when>
                                        <c:otherwise><span>無</span></c:otherwise>
                                    </c:choose>
                                </p>
                            </div>
                        </div>
                        <div class="calendar"></div>
                    </div>

 

<!--template -->

<div class="template" style="display: none;">
        <!--月 id格式：「2015-03」 -->
        <div id="" class="month">
            <div class="title xd-theme-color">
                <span class="year-num"></span>年
                <span class="month-num"></span>月
            </div>
            <ul class="week-list">
                <li class="week xd-font-color2">日</li>
                <li class="week">一</li>
                <li class="week">二</li>
                <li class="week">三</li>
                <li class="week">四</li>
                <li class="week">五</li>
                <li class="week xd-font-color2">六</li>
                <li class="helper"></li>
            </ul>
            <ul class="month-list">
    
            </ul>
        </div>        
        <!--空框-->
        <li class="item empty"></li>
        <!--日-->
        <li class="item day-cont">
            <div status="false" class="day">1</div>
        </li>
        <!--輔助元素-->
        <li class="helper"></li>
        <!--彈窗-->
        <div class="layer">
            <div class="arrowup"></div>
            <table border="0" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th width="35%" class="left">回款金額</th>
                        <th width="35%" class="center">所屬項目</th>
                        <th width="30%" class="right">狀態</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
        <table>
            <tr class="data">
                <td class="left"></td>
                <td class="center"></td>
                <td class="right"></td>
            </tr>
        </table>
    </div>

 

<!--js-->

<script type="text/javascript">
    $(function(){
        
        calendarInit(function(year,month){
            //addPayment(6); 
        });
    });
    
    calendarInit = function(func){
        var myDate = new Date();
        var year = myDate.getFullYear();
        var month = myDate.getMonth() + 1;
        var day = myDate.getDay();
        var theLastMonth = month - 1;
        var nextMonth = month + 1;
        addMonth(year,month);
        document.querySelector(".years").value = year;
        document.querySelector(".months").value = month;
        if(func){func(year,month);}
        
        //選年
        $(".years").change(function(){
            month = $(".months").val();
            year = $(".years").val();
            addMonth(year,month);
            if(func){func(year,month);}
        })
        
        //選月
        $(".months").change(function(){
            month = $(".months").val();
            year = $(".years").val();
            addMonth(year,month);
            if(func){func(year,month);}
        })
        
        //下個月
        $(".syy").bind("click",function(){
            month--;
            if(month == 0){
                year--;
                month = 12;
            }
            document.querySelector(".years").value = year;
            document.querySelector(".months").value = month;
            addMonth(year,month);
            if(func){func(year,month);}
        });
        
        //上個月
        $(".xyy").bind("click",function(){
            month++;
            if(month == 13){
                year++;
                month = 1;
            }
            document.querySelector(".years").value = year;
            document.querySelector(".months").value = month;
            addMonth(year,month);
            if(func){func(year,month);}
        });
        
        //手機端配置    
        if($("body").width() < 749){
            $(".calendar .item .day").bind("click",function(e){
                $(".calendar .item .day .layer").hide();
                $(this).find(".layer").show();
                e.stopPropagation();
            })
            $(".calendar").bind("click",function(){
                $(this).find(".layer").hide();
            })
        }
        
        //添加月份
        function addMonth(year,month){
            var firstDay = year+"-"+month+"-"+"1";
            var monthNode = document.querySelector(".template .month");
            var dayNode = document.querySelector(".template .day-cont");
            var emptyNode = document.querySelector(".template .empty");
            var helperNode = document.querySelector(".template .helper");
            var newMonthNode = monthNode.cloneNode(true);
            var newHelperNode = helperNode.cloneNode(true);
            var monthId = year + "-" + ((month<10)?("0"+month):month);
            newMonthNode.setAttribute("id",monthId);
            newMonthNode.querySelector(".month-num").textContent = month;
            newMonthNode.querySelector(".year-num").textContent = year;
            for( var i = 1 ; i <= getWeekDay(firstDay) ; i++ ){
                var newEmptyNode = emptyNode.cloneNode(true);
                newMonthNode.querySelector(".month-list").appendChild(newEmptyNode);
            }
            for( var i = 1 ; i <= monthDays(year,month) ; i++ ){
                var newDayNode = dayNode.cloneNode(true);
                newDayNode.querySelector(".day").textContent = i;
                newMonthNode.querySelector(".month-list").appendChild(newDayNode);
            }
            newMonthNode.querySelector(".month-list").appendChild(newHelperNode);
            document.querySelector(".calendar").innerHTML = "";
            document.querySelector(".calendar").appendChild(newMonthNode);

            $.ajax({
                 type:'get',
                 cache: false,
                 url:'${ctx}/borrowInvest/queryPaymentTime.htm',
                 data:{"monthId" : monthId},
                 dataType : "json",
                 success:function(data){
                     addPayment(data);
                 }
            });
        }
        
        function addPayment(datas){
             if(datas.tag=='0'){
                 window.location.href="${ctx}/login/login.htm?view=true";
             }else{
                 for(var i = 0; i<datas.result.length; i++){
                     if(typeof(datas.result[i].productName) == "undefined"){
                         datas.result[i].productName = datas.result[i].productId;
                     }
                     var num = datas.result[i].sortOrder;
                     var money = datas.result[i].capital;
                     var productName = datas.result[i].productName;
                     var status = datas.result[i].status;
                     if($(".month-list .day").eq(num-1).find('.layer').length == 0){
                          var layerClone = $(".template .layer").clone(true);
                     }
                      var dataDom = $(".template .data");
                      var contDom = layerClone.find("tbody");
                      $(".day").eq(num-1).addClass("calendar_on");
                      var cloneDataDom = dataDom.clone(true);
                      cloneDataDom.find('.left').text("¥"+money);
                      cloneDataDom.find('.center').text(productName);
                      cloneDataDom.find('.right').text("已回款");
                      if(status == 1){
                          cloneDataDom.find('.right').addClass("red");
                          cloneDataDom.find('.right').text("待回款");
                      }
                      contDom.append(cloneDataDom);
                     
                     //配置彈窗位置
                      if($("body").width() < 749){
                         if(parseInt($(".day").eq(num-1)[0].offsetLeft) < 160){
                             layerClone.css({left:"-"+parseInt($(".day").eq(num-1)[0].offsetLeft-4)+"px",marginLeft:"0"});
                             layerClone.find(".arrowup").css({left:parseInt($(".day").eq(num-1)[0].offsetLeft+4)+"px",marginLeft:"0"});
                         }
                      }
                      if(parseInt($(".month-list").width()-$(".day").eq(num-1)[0].offsetLeft-14) < 160){
                         layerClone.css({left:"auto",right:'-'+parseInt($(".month-list").width()-$(".day").eq(num-1)[0].offsetLeft-30)+"px",marginLeft:"0"});
                         layerClone.find(".arrowup").css({left:"auto",right:parseInt($(".month-list").width()-$(".day").eq(num-1)[0].offsetLeft-20)+"px",marginLeft:"0"});
                      }
                      
                      if($(".month-list .day").eq(num-1).find('.layer').length == 0){
                         $(".day").eq(num-1).append(layerClone);
                      }
                 }
             }
        }
        
        function getWeekDay(fullDay){
            var argc= new Array();      
            argc=fullDay.split('-'); 
            var ssdate=new Date(argc[0],parseInt(argc[1]-1),argc[2]);
            return ssdate.getDay();
        }
    
        function monthDays(Year,Month){
            Month--;
            var d = new Date(Year,Month,1);
            d.setDate(d.getDate()+32-d.getDate());
            return (32-d.getDate());
        }
        
    }    
</script>