OrderCalendar.js

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.js下载

实例化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>