OrderCalendar.js 用途
OrderCalendar.js 用于旅游平台在线下单预定使用
OrderCalendar.js 如何使用
Paste_Image.png
引入js
// 引入jquery
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
// 引入 OrderCalendar.js
<script src="OrderCalendar.js"></script>
实例化OrderCalendar
var orderCalendar = new OrderCalendar(resData, {
element: '#orderCalendar', // String 选择器 ID
monthNum: 4, // Number 月份显示个数
isMinPrice: true, // Boolean 是否显示最低价格
isBadge: true, // Boolean 是否显示标记
badgeText: '惠', // String 标记文字，1~2个中文字
isTips: false, // Boolean 是否显示提示层
isNumber: true, // Boolean 是否显示余位
maxNumber: 20, // Number 最大人数，大于等于最大人数自动显示为“充足”
selected: function(index, dataIndex) {
$('#planDate').val(resData.rows[dataIndex].planDate);
$('#adultPrice').val(resData.rows[dataIndex].adultPrice);
$('#childPrice').val(resData.rows[dataIndex].childPrice);
$('#endNum').val(resData.rows[dataIndex].endNumber);
}
});
html 结构
<!-- calendar mudule 开始 -->
<div class="m-calendar" id="orderCalendar">
<ul class="calendar-month">
</ul>
<ul class="calendar-week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="calendar-date">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="hide"></li>
<li class="hide"></li>
<li class="hide"></li>
<li class="hide"></li>
<li class="hide"></li>
<li class="hide"></li>
<li class="hide"></li>
</ul>
</div>
<!-- calendar mudule 结束 -->
style 样式
<style>
*{ margin:0; padding:0; }
li{ list-style-type: none; }
body{ font-family: Arial, "Helvetica Neue", Helvetica, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif; }
.hide{ display: none; }
.m-calendar{ width: 490px; border:1px solid #ddd; margin: 0 auto; background-color: #eee; }
.m-calendar .calendar-month{ height: 45px; background-color: #fff; font-size: 0; text-align: center; }
.m-calendar .calendar-month li{ display: inline-block; width: 90px; height: 40px; padding-top: 3px; padding-bottom: 2px; }
.m-calendar .calendar-month li.active{ background-color: #535D63; color: #fff; }
.m-calendar .calendar-month li .month{ color: #333; font-size: 14px; }
.m-calendar .calendar-month li.active .month{ color: #fff; }
.m-calendar .calendar-month li .price{color: #f60; font-size: 13px; }
.m-calendar .calendar-month li .none{color: #999; font-size: 12px; }
.m-calendar .calendar-week{ height: 30px; line-height: 30px; background-color: #535D63; color: #fff; font-size: 14px; text-align: center; }
.m-calendar .calendar-week li{ float: left; width: 70px; }
/* calendar body */
.m-calendar .calendar-date::after{ content: ""; display: block; clear: both; }
.m-calendar .calendar-date li{ position: relative; float: left; width: 70px; height: 60px; padding: 5px; outline:1px solid #ddd; background-color: #fff; color: #333; text-align: center; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.m-calendar .calendar-date li.valid{ background-color: #FEFEE6; cursor: pointer; }
.m-calendar .calendar-date li.invalid .tips{ display: block; }
.m-calendar .calendar-date li.invalid{ background-color: #f8f8f8; color: #999; }
.m-calendar .calendar-date li.selected{ background-color: #FFA833; outline: 1px solid #FFA833; }
.m-calendar .calendar-date li.selected > *{ color: #fff !important; }
.m-calendar .calendar-date li.today{ }
.m-calendar .calendar-date li.today .date{ font-size: 12px; color: #096; }
.m-calendar .calendar-date li .date{ font-size: 14px; text-align: left; }
.m-calendar .calendar-date li .number{ position: absolute; left: 0; bottom: 21px; width: 100%; height: 16px; color: #999; font-size: 12px; text-align: center;}
.m-calendar .calendar-date li .price{ position: absolute; left: 0; bottom: 5px; width: 100%; height: 16px; color: #f60; font-size: 12px; text-align: center;}
.m-calendar .calendar-date li .badge{ position: absolute; right: 0; top: 0; max-width: 28px; height: 16px; line-height: 16px; padding:0 2px; background-color: #f60; color: #fff; font-size: 12px; text-align: center; font-style: normal; overflow: hidden; }
.m-calendar .calendar-date li .tips{ display: none; position: absolute; left: -1px; top: 59px; z-index: 1; width: 360px; height: 100px; padding: 5px 10px 10px 10px; border:1px solid #FFDCAF; background-color: #fff; text-align: left; }
.m-calendar .calendar-date li .tips::before{ content: ""; position: absolute; top: -12px; left: 29px; width: 0; height: 0; border-width: 6px; border-style: dashed dashed solid dashed; border-color: transparent transparent #FFDCAF transparent; }
.m-calendar .calendar-date li .tips::after{ content: ""; position: absolute; top: -10px; left: 30px; width: 0; height: 0; border-width: 5px; border-style: dashed dashed solid dashed; border-color: transparent transparent #fff transparent; }
.m-calendar .calendar-date li .tips .hd{ height: 32px; line-height: 32px; border-bottom: 1px dotted #FFDCAF; color: #444; }
.m-calendar .calendar-date li .tips .hd span{ float: left; width: 120px; font-size: 12px; }
.m-calendar .calendar-date li .tips .hd span em{ font-style: normal; color: #f60; }
</style>
