<%@ Page Title="" Language="C#" MasterPageFile="~/m/m.Master" AutoEventWireup="true" CodeBehind="monthview.aspx.cs" Inherits="Book.m.cal_month" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    
     
<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">日历</h1>
     <a class="mui-icon mui-icon-bars mui-pull-right" href="default.aspx"></a>
		</header>
	
    
    <div class="mui-content">
        <div class="mui-page">


            	<div class="mui-card">


    <link href="js_cal/css/reset.css" rel="stylesheet" />

    <link href="js_cal/css/simple-calendar.css" rel="stylesheet" />

    <link href="js_cal/css/calendar.css" rel="stylesheet" />


    <script src="js_cal/js/nongli.js"></script>

     <script src="js_cal/js/host.js"></script>
    <script>

        var jsonData = [];
    </script>
    <style>
                       span.label-red{ color:red !important }
                    </style>
                

<div style="margin:10px"> 
<asp:DropDownList runat="server" ID="ddl_room" onchange="_goto();" ClientIDMode="Static" > 
</asp:DropDownList>
</div>
<script>
    function _goto() {
        window.location = "cal_month.aspx?roomid=" + $("#ddl_room").val();;

    }

</script>




      <div class="inner">
        <div id='calendar' class="sc-calendar">
            <div class="sc-header">


                <div class="sc-title">
                    <div class="year"><span class="sc-select-year" name=""></span>年</div>

                    <div class="cal-title">
                        <asp:Label runat="server" ClientIDMode="Static" ID="lbl_name"></asp:Label>
                        <script>
                            $("#lbl_name").html($("#ddl_room option:selected").text());
                        </script>
                    </div>

                    <div class="month">
                        <div class="arrow sc-mleft"></div>
                        <div class="monthdiv">
                            <span class="sc-select-month" name=""></span>
                        </div>
                        <div class="arrow sc-mright"></div>
                    </div>
                </div>

                <div style="clear:both"></div>
                <div class="sc-week"></div>
            </div>


            <div class="sc-body">
                <div class="sc-days"></div>
            </div>


        </div>





    </div>

                
    <script src="js_cal/js/simple-calendar.js?v=2"></script>
    <script src="js_cal/js/hammer-2.0.8-min.js"></script>
  
   
  
  


    <script type="text/javascript">
        var myCalendar = new SimpleCalendar('#calendar');

        $(function () {

            $(".sc-mleft").click(function () {
                myCalendar.subMonth();
                updateEvent();
            })

            $(".sc-mright").click(function () {
                myCalendar.addMonth();
                updateEvent();
            })
        });


        //滑动切换
        var myElement = document.getElementById('calendar');
        var hammer = new Hammer(myElement);

        hammer.on("swipeleft", function (ev) {
            myCalendar.addMonth();
            updateEvent();
        });

        hammer.on("swiperight", function (ev) {
            myCalendar.subMonth();
            updateEvent();
        });



        function updateEvent() {
            var _year = $(".sc-select-year").html();
            var _month = $(".sc-select-month").html().replace("月", "");
            var roomid = $("#ddl_room").val();
            myCalendar.updateRemark(_year, _month, roomid);
        }





        updateEvent();





        var touchtime = 0;
        $('#calendar').on("click", '.sc-selected', function () {
            if (touchtime == 0) {
                touchtime = new Date().getTime();
            } else {

                if (((new Date().getTime()) - touchtime) < 300) {

                    var _d = $(this).find(".day").data("fullday");
                    var url = "addcal.aspx?roomid=" + $("#ddl_room").val() + "&date=" + _d;
                    layer.open({
                        type: 2,
                        title: "查看状态",
                        shadeClose: true,
                        fixed: true,
                        shade: 0.8,
                        area: ['300px', '500px'],
                        content: url,

                        cancel: function (index, layero) {
                            updateEvent();
                        }
                    });

                    touchtime = 0;
                } else {
                    touchtime = new Date().getTime();
                }
            }

















        });


    </script>













    <script>















        function shouwData(year, month, day) {

            $("#results").val('');

            _r = year + "-" + month + "-" + day;

            var r = "";
            var c = _r.length;
            for (var i = 0; i < c; i++) {
                var _id = _r[i].id;
                var _name = _r[i].name;
                var _dttime = _r[i].dttime;

                r += _id + _name + _dttime + "<br>";

            }
            $("#results").html(r);


        }




        function Remark(id, name, inttime) {
            remark = new Object();
            remark.id = id;
            remark.name = name;

            var t = new Date();
            t.setTime(inttime);
            remark.dttime = t.toLocaleDateString();

            return remark;
        }




































    </script>








<div style="margin:20px; font-size:11px; color:gray">
    <b>提示</b><br />
（1）在日历数字上双击，可以查看具体内容。<br />
（2）点击右上角“三”符号，可以进行会议室预订。<br /> 
  
</div>


</div>
            </div>
        </div>
    





</asp:Content>
