ajax+php 旅游价格展示日历

前台页面

<div class="cal" data-url="<!--{$url_index}-->ajaxDate.php">
    <input type="hidden" name="cyear" value="<!--{$now_date.year}-->"/>
    <input type="hidden" name="cmonth" value="<!--{$now_date.month}-->"/>
    <div class="cal-head">
        <span class="head"></span>
        <span>周日</span>
        <span>周一</span>
        <span>周二</span>
        <span>周三</span>
        <span>周四</span>
        <span>周五</span>
        <span>周六</span>
     </div>
     <div class="cal-btn">
         <div class="cal-btn-prev"></div>
         <div class="cal-btn-date">
             <p class="y"><span><!--{$now_date.year}--></span>年</p>
             <p class="m"><span><!--{$now_date.month}--></span>月</p>
         </div>
         <div class="cal-btn-next"></div>
      </div>
      <div class="cal-content">
      </div>
</div>

css

/* 日历框样式 */
.cal{
    width: 650px;
    height: 350px;
    margin-top: 10px;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-wrap: wrap;
}
.cal-head {
    width: 650px;
    height: 38px;
    background: #0081cc;
    font-size: 17px;
    color: #ffffff;
    line-height: 36px;
    display: flex;
    display: -webkit-flex; /* Safari */
}
.cal-head span{
    width: 81px;
    height: 38px;
    text-align: center;
    display: block;
}
.cal-head span.head{
    width: 82px;
}
.cal-btn{
    width: 80px;
    height: 311px;
    background: #ffffff;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.cal-btn-prev{
    width: 80px;
    height: 51px;
    background: url('../images/cal-btn.png') no-repeat 0 0;
    cursor: pointer;
}
.cal-btn-date{
    width: 80px;
    height: 127px;
    text-align: center;
    font-size: 16px;
    padding-top: 82px;
}
.cal-btn-date p{
    color: #0080cc;;
}
.cal-btn-next{
    width: 80px;
    height: 51px;
    background: url('../images/cal-btn.png') no-repeat 0 -51px;
    cursor: pointer;
}
.cal-content{
    width: 568px;
    height: 312px;
    background: #ffffff;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-wrap: wrap;
}
.cal-detail-box{
    width: 68px;
    height: 45px;
    padding: 3px 6px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #a0a0a0;
    position: relative;
}
.cal-detail-box.active{
    color: #0080cc;
}
.cal-detail-box.active p{
    color: #ed6c00;
    font-size: 13px;
}
.cal-detail-box.active p span{
    font-size: 14px;
}
.cal-detail-box .price-detail{
    position: absolute;
    top: -1px;
    left: 73px;
    width: 200px;
    background: #fff;
    min-height: 45px;
    padding: 3px 6px;
    border: 1px solid #ccc;
    display: none;
    z-index: 10010;
}

js

<script>
function drawCal(year, month) {
    var id = '<!--{$product.id}-->';
    var mod = 'departure_time';
    var cyear = year;
    var cmonth = month;
    var post_url = $(".cal").data('url');
    $.ajax({
        url: post_url,
        type: 'POST',
        data: {
            id: id,
            cmonth: cmonth,
            cyear: cyear,
            action: mod
        },
        dataType: 'json',
        success: function (result) {
            if (result.status == 1) {
                $('input[name="cyear"]').val(result.data.year);
                $('input[name="cmonth"]').val(result.data.month);
                $('.cal-btn-date .y span').html(result.data.year);
                $('.cal-btn-date .m span').html(result.data.month);
                $('.cal-detail-box').remove();
                $('.cal-content').html(result.data.html);
            }
        }
    });
}
$(document).ready(function () {
   
    //日历框
    var cyear = $('input[name="cyear"]').val();
    var cmonth = $('input[name="cmonth"]').val();
    drawCal(cyear, cmonth);

    $('.cal-btn-prev').click(function () {
        var cyear = $('input[name="cyear"]').val();
        var cmonth = $('input[name="cmonth"]').val();
        if (cmonth == 1) {
            var nyear = parseInt(cyear) - 1;
            var nmonth = 12;
            drawCal(nyear, nmonth);
        } else {
            var nyear = parseInt(cyear);
            var nmonth = parseInt(cmonth) - 1;
            drawCal(nyear, nmonth);
        }
    });
    $('.cal-btn-next').click(function () {
        var cyear = $('input[name="cyear"]').val();
        var cmonth = $('input[name="cmonth"]').val();
        if (cmonth == 12) {
            var nyear = parseInt(cyear) + 1;
            var nmonth = 1;
            drawCal(nyear, nmonth);
        } else {
            var nyear = parseInt(cyear);
            var nmonth = parseInt(cmonth) + 1;
            drawCal(nyear, nmonth);
        }
    });

    // 详细价格
    $('.cal-content').on('mouseover', '.cal-detail-box.active', function () {
        $(this).find('.price-detail').show();
    });
    $('.cal-content').on('mouseout', '.cal-detail-box.active', function () {
        $(this).find('.price-detail').hide();
    });

    // 滑动栏
    $('.detial-box-nav a').click(function () {
        $(this).parent().find('a').removeClass('active');
        $(this).addClass('active');
    });
});
</script>

ajaxDate.php

<?php 
if ($action == "departure_time") {

    $year = $_POST["cyear"]; //当前年份
    $month = $_POST["cmonth"]; //当前月份
    $id =  $_POST["id"]; //当前项目id

    //获得该月的第一天所在星期中的第几天，数字表示0（表示星期天）到6（表示星期六）。
    $date['start_week'] = date('w', mktime(0,0,0,$month,1,$year));
        //获得该月的总天数。
    $date['days']= date("t",mktime(0,0,0,$month,1,$year));
    $now_date = date('d');
    $html = '';

    $sql = "SELECT * FROM schedule WHERE pid = {$id} AND flag = 1 AND year = '{$year}' AND month = '{$month}'";
    $res = $db->getall($sql);

    $res_arr = array();
    if (!empty($res)) {
        foreach ($res as $key=>$value) {
            $res_arr[$value['day']] = $value;
        }
    }
    
    for ($i=0;$i<$date['start_week'];$i++) {
        $html .= '<div class="cal-detail-box"></div>';
    }
    for ($d=1;$d<=$date['days'];$d++) {
        if (!empty($res_arr[$d])) {
            $html .= "<div class='cal-detail-box active'>".$d."<p>￥<span>".$res_arr[$d]['price']."</span></p><div class='price-detail'><p>成人价：".$res_arr[$d]['price']."</p>";
            if ($res_arr[$d]['child_price'] > 0) {
                $html .= "<p>儿童价：".$res_arr[$d]['child_price']."</p>";
            } 
            $html .= "</div></div>";
        } else {
            $html .= "<div class='cal-detail-box'>".$d."</div>";
        }
    }

    $end_date = $date['days']+$date['start_week'];

    for ($j=$end_date; $j<42; $j++) {
        $html .= '<div class="cal-detail-box"></div>';
    }

    $array['data'] = array();
    $array['info'] =  0;
    $array['status'] = 1;
    $array['data']['year'] = $year;
    $array['data']['month'] = $month;
    $array['data']['html'] = $html;
    
    echo json_encode($array);die;
}

最终效果:

image.png