<%@ Page Title="" Language="C#" MasterPageFile="~/Book/Book.master" AutoEventWireup="true" CodeBehind="MonthView.aspx.cs" Inherits="Book.Book.MonthView" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cont_form" runat="server">


    
   <script>
       //判断闰年
       function runNian(_year) {
           if (_year % 400 === 0 || (_year % 4 === 0 && _year % 100 !== 0)) {
               return true;
           }
           else { return false; }
       }


       //判断某年某月的1号是星期几
       function getFirstDay(_year, _month) {
           var allDay = 0, y = _year - 1, i = 1;
           allDay = y + Math.floor(y / 4) - Math.floor(y / 100) + Math.floor(y / 400) + 1;
           for (; i < _month; i++) {
               switch (i) {
                   case 1: allDay += 31; break;
                   case 2:
                       if (runNian(_year)) { allDay += 29; }
                       else { allDay += 28; }
                       break;
                   case 3: allDay += 31; break;
                   case 4: allDay += 30; break;
                   case 5: allDay += 31; break;
                   case 6: allDay += 30; break;
                   case 7: allDay += 31; break;
                   case 8: allDay += 31; break;
                   case 9: allDay += 30; break;
                   case 10: allDay += 31; break;
                   case 11: allDay += 30; break;
                   case 12: allDay += 31; break;
               }
           }
           return allDay % 7;
       }




   </script>


    
    <style>

     


      td.cld-cur,  td.cld-old, td.cld-day {
         font-family:Verdana; font-weight:normal; height:85px; 
            border:solid 1px #f0f0f0;
            
           
        
        }

        .thecell {
         height:50px;
         width:130px;
      
        
        }
            .thecell a {
             color:#aa0000; 
               font-family:微软雅黑;
             font-size:12px;
            }

        .csnm {
         width:130px;
          font-size:11px;
         white-space: nowrap;
      
          height:20px;
         color:red;
        }

    </style>
      
     
  <div style="text-align:center">


    <asp:Button runat="server" ID="btn_prev" Text="上一月"  CommandArgument="" CssClass=" flat btn btn-success" OnClick="btn_prev_Click"  />

    <asp:DropDownList ClientIDMode="Static"   AutoPostBack="true"
         OnSelectedIndexChanged="ddl_room_SelectedIndexChanged"
        style="display:inline-block;width:200px;" runat="server" CssClass="form-control flat" ID="ddl_room"></asp:DropDownList> 
    
    
    <asp:Button runat="server" CssClass=" btn btn-success flat"  CommandArgument=""  ID="btn_next" Text="下一月" OnClick="btn_next_Click" />
     
      </div>


    <style>
        .cld-w td:hover {
         background-color:#f2f2f2 
        }
    </style>
   
        
        <div id="cal" >


        </div>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        <script>


            //显示日历
            function showCalendar(_year, _month, _day, firstDay) {
                var _mid = $("#ddl_room").val();
                var i = 0,
                    monthDay = 0,
                    showStr = "",
                    _classname = "",
                    today = new Date();
                //月份的天数
                switch (_month) {
                    case 1: monthDay = 31; break;
                    case 2:
                        if (runNian(_year)) { monthDay = 29; }
                        else { monthDay = 28; }
                        break;
                    case 3: monthDay = 31; break;
                    case 4: monthDay = 30; break;
                    case 5: monthDay = 31; break;
                    case 6: monthDay = 30; break;
                    case 7: monthDay = 31; break;
                    case 8: monthDay = 31; break;
                    case 9: monthDay = 30; break;
                    case 10: monthDay = 31; break;
                    case 11: monthDay = 30; break;
                    case 12: monthDay = 31; break;
                }

                //输出日历表格，这部分因结构而异
                var showStr = "<table class='table   cld-w'><thead>";
                //日历头部
                showStr += "<tr><th colspan='7' style='text-align:center'><div class='cld-hd'>   <h4   value='" + _year + "-" + _month + "-" + _day + "'>" + " " + _year + "年" + _month + "月 " + $("#ddl_room  option:selected").text() + " 教学日历" + "</h4>  </div></th></tr>";
                //日历星期
                showStr += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
                showStr += "</thead><tbody><tr>";
                //当月第一天前的空格
                for (i = 1; i <= firstDay; i++) {
                    showStr += "<td></td>";
                }
                //显示当前月的天数
                for (i = 1; i <= monthDay; i++) {
                    //当日的日期
                    if (_year === today.getFullYear() && _month === today.getMonth() + 1 && i === today.getDate()) {
                        _classname = "cld-cur";
                    }
                    //当日之前的日期（这个判断是因为我有工作需求，就是要求之前的日期不能点击）
                    else if (_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth() + 1 && i < today.getDate())) {
                        _classname = "cld-old";
                    }
                    //其他普通的日期
                    else { _classname = "cld-day"; }
                    //其他大于当月的月份的相同日期（为了让点击下一月的时候，相同的日期增加cld-cur类）
                    if (_day === i && (_year > today.getFullYear() || _month > today.getMonth() + 1)) { _classname = "cld-cur"; }
                    //把日期存在对应的value       
                    showStr += "<td  title='双击查看详细' ondblclick=Pop('../m/addcal.aspx?roomid=" + _mid + "&date=" + _year + "-" + _month + "-" + i + "',400,600,'查看日历') class=" + _classname + " value='" + _year + " - " + _month + " - " + i + "'>" + getdetail(_year, _month, i) + "</td>";

                    firstDay = (firstDay + 1) % 7;
                    if (firstDay === 0 && i !== monthDay) {
                        showStr += "</tr><tr>";
                    }
                }

                //剩余的空格
                if (firstDay !== 0) {
                    for (i = firstDay; i < 7; i++) {
                        showStr += "<td></td>";
                    }
                }

                showStr += "</tr></tbody></table>";
                //插入calendar的页面结构里



                return showStr;
            }










            function getdetail(y, m, d) {
                if (m < 10) {
                    m = "0" + m;
                }

                if (d < 10) {
                    d = "0" + d;
                }

                return "<div class=thecell id=day_" + y + "" + m + "" + d + ">" + d + "</div>";
            }












            //显示年月日
            function showDate(_year, _month, _day) {
                var date = "",
                    firstDay = getFirstDay(_year, _month, _day);

                if (_day !== 0) {
                    date = _year + "年" + _month + "月" + _day + "日";
                }
                else {
                    date = "No Choose.";
                }

            }





            //上一月
            function preMonth(_year, _month, _day) {
                if (_month == 1) {
                    showDate(_year - 1, 12, _day);
                }
                else { showDate(_year, _month - 1, _day); }
            }


            //下一月
            function nextMonth(_year, _month, _day) {
                if (_month == 12) { showDate(_year + 1, 1, _day); }
                else { showDate(_year, _month + 1, _day); }
            }



            //初始化
            var calendar = document.createElement('div');
            calendar.setAttribute('id', 'showCld');
            document.getElementById("cal").appendChild(calendar); //增加到你的cal1里

            //获取当天的年月日  



            var today = new Date();
            var _year = <%=year%>,
                _month = <%=month%>,
                _day = 1;




            var firstDay = getFirstDay(_year, _month);




            //显示日历
            var cal1 = "";
             cal1=showCalendar(_year, _month, _day, firstDay);
             document.getElementById("showCld").innerHTML = cal1 ;

            



 

        </script>

    <script src="../javascript/datepick/moment.min.js"></script>
    
    <script>

        //{"cid":"1","column1":"20150617","coursename":"《沟通技巧》(1F)","index": "1"}
        function display() {
            console.log(records);
            for (i = 0; i < records.length; i++) {

                var record = records[i];// jQuery.parseJSON("'"+records[i]+"'");// JSON.stringify(records[i]);


                var _cid = record.id;
                var _time = record.begintime.replace(/\/,""/g);

                var _dt = moment(_time).format("YYYYMMDD");



                var _coursename = record.title;
                var old = $("#day_" + _dt).html();

                _coursename = "<div class=csnm>" + _coursename + "</div>"
                $("#day_" + _dt).html(old + _coursename);

            }




        }


        display();


    </script>

     







 
    













</asp:Content>
