php日历价格,ajax+php 旅游价格展示日历

前台页面

周日

周一

周二

周三

周四

周五

周六

年

月

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

function drawCal(year, month) {

var 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');

});

});

ajaxDate.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

$html .= '

}

for ($d=1;$d<=$date['days'];$d++) {

if (!empty($res_arr[$d])) {

$html .= "

".$d."

￥".$res_arr[$d]['price']."

成人价：".$res_arr[$d]['price']."

";

if ($res_arr[$d]['child_price'] > 0) {

$html .= "

儿童价：".$res_arr[$d]['child_price']."

";

}

$html .= "

";

} else {

$html .= "

".$d."

";

}

}

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

for ($j=$end_date; $j<42; $j++) {

$html .= '

}

$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