HTML日程控件，可以在此基础上做更多的扩展，如实现行程安排等-php手册-php.cn

HTML日程控件，可以在此基础上做更多的扩展，如实现行程安排等
WBOY
Release： 2016-06-06 19:38:34
Original
1210 people have browsed it
日历控件，可以在此基础上做更多的扩展，如实现行程安排等无 htmlhead title日历控件/title meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0
日历控件，可以在此基础上做更多的扩展，如实现行程安排等
<html>
<head>
    <title>日历控件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <style type="text/css">
        .rili {
            margin: 30px 0px;
            overflow: hidden;
            text-align: center;
            color: #666
        }

        .low_calendar {
            overflow: hidden;
            border: 1px solid #c8d2dc;
        }

        .low_calendar h1 {
            width: 100%;
            background: #ff6f7e;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            font-weight: 100;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
            position: relative
        }

        .calGrid table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
        }

        .calGrid table th {
            background-color: #fff;
            border-left: 1px solid #whiteSmoke;
            font-size: 12px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            vertical-align: middle;
            color: #999;
            color: #505050;
            border-bottom: 1px solid #C8C8C8;
        }

        .calGrid table td {
            width: 12%;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-weight: 700 text-align : center;
            color: #4A5056;
            border-bottom: 1px solid #C8C8C8;
            border-left: 1px solid #ccc;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            text-align: center;
        }

        .calGrid table td img {
            position: absolute;
            left: 0;
            top: 0;
            display: none
        }

        .calGrid table td.curr img {
            display: block
        }

        .calGrid table td.disable {
            color: #ED5565;
        }

        .calGrid table td:first-child {
            border-left: none;
        }

        .calGrid table tr:last-child td {
            border-bottom: none;
        }

        .calGrid table td.holiday {
            font-size: 12px;
        }

        .calGrid table th.week_day, .calGrid table td.week_day {
            color: #ED5565
        }

        .calGrid table td.curr {
            line-height: 25px;
            font-size: 13px;
            color: #fff;
            background: #ff6f7e;
            -moz-box-shadow: 2px #7d92a7 inset;
            -webkit-box-shadow: 2px #7d92a7 inset;
            box-shadow: 2px #7d92a7 dcdeeb;
        }

        .calGrid table td.curr span {
            display: block;
            font-size: 12px;
            line-height: 10px;
        }

        .low_calendar h1 .ldate {
            width: 25px;
            height: 25px;
            background: url(images/ldate.png) no-repeat;
            float: left;
            position: absolute;
            top: 2px;
            left: 10px;
            overflow: hidden;
            text-indent: -99999px
        }

        .low_calendar h1 .rdate {
            width: 25px;
            height: 25px;
            background: url(images/rdate.png) no-repeat;
            float: right;
            position: absolute;
            top: 2px;
            right: 10px;
            overflow: hidden;
            text-indent: -99999px
        }

    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>

                       
                    <?php
/**
 * User: yuluo
 * Date: 2015-05-08
 * Time: 下午3:08
 * Desc:实现生成指定月份的日历信息 在此基础上可以无限遐想和扩展...
 */
date_default_timezone_set("Asia/Shanghai");
$time_now = time(); //strtotime("2015-02-04");

if($_REQUEST["date"]){
    $time_now = strtotime($_REQUEST["date"]);
}


function getCurMonthFirstDay($date)
{
    return date(&#39;Y-m-01&#39;, strtotime($date));
}

function getCurMonthLastDay($date)
{
    return date(&#39;Y-m-d&#39;, strtotime(date(&#39;Y-m-01&#39;, strtotime($date)) . &#39; +1 month -1 day&#39;));
} 

$current_y = date("Y", $time_now); 
$current_m = date("m", $time_now); 

$next_m = date(&#39;Ymd&#39;, strtotime(date(&#39;Y-m-01&#39;, $time_now) . &#39; +1 month&#39;));
$pre_m = date(&#39;Ymd&#39;, strtotime(date(&#39;Y-m-01&#39;, $time_now) . &#39; -1 month&#39;));

?>

<div class="rili">
    <div class="chosedate">
        <div class="low_calendar">
            <h1><a class="ldate" href="date_ctrl.php?date=<?php echo($pre_m); ?>">上一月</a><span><?php echo($current_y); ?>年<?php echo($current_m); ?>月</span><a class="rdate" href="date_ctrl.php?date=<?php echo($next_m); ?>">下一月</a></h1>

            <div class="calGrid">
                <table cellspacing="1" cellpadding="1">
                    <tbody>

 <tr>
                        <th class="week_day">周日</th>
                        <th>周一</th>
                        <th>周二</th>
                        <th>周三</th>
                        <th>周四</th>
                        <th>周五</th>
                        <th class="week_day">周六</th>
                    </tr>
<?php
//$time_now = strtotime("2015-05-11");

$str_time_now = date("Y-m-d", $time_now); ////////字符串格式的当前时间
$current_month_first_day = getCurMonthFirstDay($str_time_now); /////////当前月的第一天

$current_month_first_w_val = intval(date("w", strtotime($current_month_first_day))); //////当前月第一天是一周的第几天 周日(0)是第一天


$current_month_last_day = getCurMonthLastDay($str_time_now); ////////当前月的最后一天


$current_week_val = date("w", $time_now);
$current_day_val = date("j", $time_now);
$last_day_val = date("j", strtotime($current_month_last_day)); ////////当前月最后一天的天索引


$strart_time = false;

$int_day_val = 1;

$ctrl_step = $last_day_val + $current_month_first_w_val; ////////控件结束的位置索引

for ($i = 0; $i < 42; $i++) {

    if($i == 0){ ?>
    <tr>
   <?php }

    if ($i == $current_month_first_w_val) {

        $strart_time = true;
    }

    if ($i >= $ctrl_step) {
        $strart_time = false;
    }

    if ($strart_time) {

        $tem_current_date = date("Y-m-d",strtotime(date("Y-m", $time_now).("-").strval($int_day_val)));

        $str_td_class = "";
        if (($i%7)==0 || (($i + 1) % 7) == 0){
            $str_td_class = "week_day";
        }

        ?>
       
        <td date="<?php echo($tem_current_date); ?>" class="<?php echo($str_td_class); ?>"><?php echo($int_day_val); ?></td>

        <?php

        $int_day_val++;

    } else {
        ?>
        <td class="null"> </td>
    <?php
    }


    if ((($i + 1) % 7) == 0) {
        ?>
        </tr>
    <?php

    }

}
?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        console.log($("td [date=&#39;2015-05-12&#39;]"));
    });
</script>
</body>
</html>
Copy after login