前台页面
<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
