1 <div class="mCal"> 2 <div class="dj-calendar-panel green" style="position: relative;"> 3 <div class="calendar-header"> 4 <div class="calendar-header-inner"> 5 <ul> 6 <li class="active price-date" data-month="9" data-year=""><a><span></span><em>¥7699/人</em></a></li> 7 <li class=" price-date" data-month="10" data-year="2015"><a><span></span><em>¥7399/人</em></a></li> 8 <li class=" price-date" data-month="11" data-year="2015"><a><span></span><em>¥8299/人</em></a></li> 9 <li class=" " data-month="12" data-year="2015"><a><span></span>无团期</a></li> 10 <li class=" " data-month="1" data-year="2016"><a><span></span>无团期</a></li> 11 <li class=" " data-month="2" data-year="2016"><a><span></span>无团期</a></li> 12 <li class=" " data-month="3" data-year="2016"><a><span></span>无团期</a></li> 13 <li class=" " data-month="4" data-year="2016"><a><span></span>无团期</a></li> 14 <li class=" " data-month="5" data-year="2016"><a><span></span>无团期</a></li> 15 <li class=" " data-month="6" data-year="2016"><a><span></span>无团期</a></li> 16 <li class=" " data-month="7" data-year="2016"><a><span></span>无团期</a></li> 17 <li class=" " data-month="8" data-year="2016"><a><span></span>无团期</a></li> 18 </ul> 19 </div> 20 <a style="-moz-user-select: none;" class="prev disable" onclick="prev_month(this);"><span></span></a> 21 <a class="next" style="-moz-user-select: none;" onclick="next_month(this);"><span></span></a> 22 </div> 23 <div class="calendar-wrapper"> 24 <div class="calendar-container"> 25 <i class="calendar-month-bg">9</i> 26 <table> 27 <tbody> 28 <tr class="header"> 29 <th class="sunday">日</th> 30 <th>一</th> 31 <th>二</th> 32 <th>三</th> 33 <th>四</th> 34 <th>五</th> 35 <th class="saturday">六</th> 36 </tr> 37 <tr> 38 <td class="sunday invalid-day not-this-day"><span class="date">30</span></td> 39 <td class="invalid-day not-this-day"><span class="date">31</span></td> 40 <td class="this-month-day invalid-day" data-date="1"><span class="date">1</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 41 </td> 42 <td class="this-month-day invalid-day" data-date="2"><span class="date">2</span><div><span class="dataprace">已满</span><span class="dataprice">¥7899</span></div> 43 </td> 44 <td class="this-month-day invalid-day" data-date="3"><span class="date">3</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 45 </td> 46 <td class="this-month-day invalid-day" data-date="4"><span class="date">4</span><div><span class="dataprace">已满</span><span class="dataprice">¥7699</span></div> 47 </td> 48 <td class="saturday this-month-day invalid-day" data-date="5"><span class="date">5</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 49 </td> 50 </tr> 51 <tr> 52 <td class="sunday this-month-day invalid-day" data-date="6"><span class="date">6</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 53 </td> 54 <td class="this-month-day invalid-day" data-date="7"><span class="date">7</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 55 </td> 56 <td class="this-month-day invalid-day" data-date="8"><span class="date">8</span><div><span class="dataprace">已满</span><span class="dataprice">¥7599</span></div> 57 </td> 58 <td class="this-month-day invalid-day" data-date="9"><span class="date">9</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 59 </td> 60 <td class="this-month-day invalid-day" data-date="10"><span class="date">10</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 61 </td> 62 <td class="this-month-day over" data-date="11"><span class="date">11</span><div><span class="dataprace">余位3</span><span class="dataprice">¥7899</span></div> 63 </td> 64 <td class="saturday this-month-day invalid-day" data-date="12"><span class="date">12</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 65 </td> 66 </tr> 67 <tr> 68 <td class="sunday this-month-day invalid-day" data-date="13"><span class="date">13</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 69 </td> 70 <td class="this-month-day invalid-day" data-date="14"><span class="date">14</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 71 </td> 72 <td class="this-month-day invalid-day" data-date="15"><span class="date">15</span><div><span class="dataprace">已满</span><span class="dataprice">¥7599</span></div> 73 </td> 74 <td class="this-month-day invalid-day" data-date="16"><span class="date">16</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 75 </td> 76 <td class="this-month-day invalid-day" data-date="17"><span class="date">17</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 77 </td> 78 <td class="this-month-day over" data-date="18"><span class="date">18</span><div><span class="dataprace">余位6</span><span class="dataprice">¥7899</span></div> 79 </td> 80 <td class="saturday this-month-day invalid-day" data-date="19"><span class="date">19</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 81 </td> 82 </tr> 83 <tr> 84 <td class="sunday this-month-day invalid-day" data-date="20"><span class="date">20</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 85 </td> 86 <td class="this-month-day invalid-day" data-date="21"><span class="date">21</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 87 </td> 88 <td class="this-month-day over" data-date="22"><span class="date">22</span><div><span class="dataprace">余位4</span><span class="dataprice">¥7699</span></div> 89 </td> 90 <td class="this-month-day invalid-day" data-date="23"><span class="date">23</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 91 </td> 92 <td class="this-month-day invalid-day" data-date="24"><span class="date">24</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 93 </td> 94 <td class="this-month-day invalid-day" data-date="25"><span class="date">25</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 95 </td> 96 <td class="saturday this-month-day invalid-day" data-date="26"><span class="date">26</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 97 </td> 98 </tr> 99 <tr> 100 <td class="sunday this-month-day over festival" data-date="27"><span class="date">中秋</span><div><span class="dataprace">余位4</span><span class="dataprice">¥10499</span></div> 101 </td> 102 <td class="this-month-day invalid-day" data-date="28"><span class="date">28</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 103 </td> 104 <td class="this-month-day over" data-date="29"><span class="date">29</span><div><span class="dataprace">余位8</span><span class="dataprice">¥9099</span></div> 105 </td> 106 <td class="this-month-day invalid-day" data-date="30"><span class="date">30</span><div><span class="dataprace"></span><span class="dataprice"></span></div> 107 </td> 108 <td class="invalid-day not-this-day"><span class="date">1</span></td> 109 <td class="invalid-day not-this-day"><span class="date">2</span></td> 110 <td class="saturday invalid-day not-this-day"><span class="date">3</span></td> 111 </tr> 112 <tr class="last-row"> 113 <td class="sunday invalid-day not-this-day"><span class="date">4</span></td> 114 <td class="invalid-day not-this-day"><span class="date">5</span></td> 115 <td class="invalid-day not-this-day"><span class="date">6</span></td> 116 <td class="invalid-day not-this-day"><span class="date">7</span></td> 117 <td class="invalid-day not-this-day"><span class="date">8</span></td> 118 <td class="invalid-day not-this-day"><span class="date">9</span></td> 119 <td class="saturday invalid-day not-this-day"><span class="date">10</span></td> 120 </tr> 121 </tbody> 122 </table> 123 </div> 124 </div> 125 </div> 126 </div> 127 <script type="text/javascript"> 128 $(function () { 129 //绑定点击事件 130 $(".calendar-header-inner ul li").each(function () { 131 $(this).click(function () { 132 $(this).parent().find(".active").eq(0).removeClass("active"); 133 $(this).addClass("active"); 134 //重新排版日历 135 get_curr_calendar(); 136 }); 137 }); 138 //月份数组 139 var month_ch = Array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"); 140 141 var curr_date = new Date(); 142 var curr_month = curr_date.getMonth(); 143 var curr_year = curr_date.getFullYear(); 144 var len = 12 - curr_month;//5 145 for (var i = 0; i < len; i++) { 146 $(".calendar-header-inner ul li").eq(i).attr("data-month", curr_month + 1 + i); 147 $(".calendar-header-inner ul li").eq(i).attr("data-year", curr_year); 148 $(".calendar-header-inner ul li").eq(i).find("span").eq(0).text(month_ch[curr_month + i]); 149 } 150 for (var i = 0; i < curr_month; i++) { 151 $(".calendar-header-inner ul li").eq(len + i).attr("data-month", i + 1); 152 $(".calendar-header-inner ul li").eq(len + i).attr("data-year", curr_year + 1); 153 $(".calendar-header-inner ul li").eq(len + i).find("span").eq(0).text(month_ch[i]); 154 } 155 }); 156 function prev_month(obj) { 157 //上一个月，如果到第一个月就disable 158 //如果按钮被禁用，则事件无效 159 if ($(obj).hasClass("disable")) { 160 return false; 161 } 162 var ul = $(obj).parent("div").find("ul").eq(0); 163 var left = parseFloat($(ul).css("left")); 164 //如果left=-80 则表示已经到头了，隐藏上一月按钮 165 if (left == -80) { 166 $(obj).addClass("disable"); 167 } 168 $(ul).css("left", left + 80 + "px"); 169 //显示上一个按钮 170 $(obj).next("a").removeClass("disable"); 171 //追加选中样式 172 var li = $(ul).find(".active").eq(0); 173 $(li).removeClass("active"); 174 $(li).prev("li").addClass("active"); 175 //重新排版日历 176 get_curr_calendar(); 177 } 178 function next_month(obj) { 179 //如果按钮被禁用，则事件无效 180 if ($(obj).hasClass("disable")) { 181 return false; 182 } 183 var ul = $(obj).parent("div").find("ul").eq(0); 184 var left = parseFloat($(ul).css("left")); 185 //如果left=-80*5 则表示已经到头了，隐藏下一月按钮 186 if (left == -400) { 187 $(obj).addClass("disable"); 188 } 189 $(ul).css("left", left - 80 + "px"); 190 //显示上一个按钮 191 $(obj).prev("a").removeClass("disable"); 192 //追加选中样式 193 var li = $(ul).find(".active").eq(0); 194 $(li).removeClass("active"); 195 $(li).next("li").addClass("active"); 196 //重新排版日历 197 get_curr_calendar(); 198 } 199 function get_curr_calendar() { 200 var li = $(".calendar-header-inner ul").find(".active"); 201 var month = $(li).attr("data-month"); 202 var year = $(li).attr("data-year"); 203 var d = new Date(); 204 d.setMonth(month - 1); 205 d.setYear(year); 206 d.setDate(1); 207 var week = d.getDay();//3 208 var m1 = Array(1, 3, 5, 7, 8, 10, 12);//31天月份 209 var m2 = Array(4, 6, 9, 11);//30天月份 210 var prev_days; 211 var curr_days; 212 //计算上个月 213 var prev_month = month - 1; 214 if (month == 1) { 215 prev_month = 12; 216 } 217 if (month == 12) { 218 prev_month = 1; 219 } 220 //计算上个月总共多少天 221 if (prev_month == 2) { 222 if (year % 4 == 0 || year % 400 == 0) { 223 prev_days = 29; 224 } else { 225 prev_days = 28; 226 } 227 } else { 228 if (Array.contains(m1, prev_month)) { 229 prev_days = 31; 230 } else { 231 prev_days = 30; 232 } 233 } 234 //计算这个月有多少天 235 if (month == 2) { 236 if (year % 4 == 0 || year % 400 == 0) { 237 curr_days = 29; 238 } else { 239 curr_days = 28; 240 } 241 } else { 242 if (Array.contains(m1, month)) { 243 curr_days = 31; 244 } else { 245 curr_days = 30; 246 } 247 } 248 //初始化上月的日期 249 while (week > 0) { 250 $(".calendar-container table tbody").find("tr").eq(1).find("td").eq(--week).find(".date").eq(0).text(prev_days--); 251 } 252 //初始化本月日期 253 var td = d.getDay(); 254 var row = 1; 255 for (var i = 1; i <= curr_days; i++) { 256 $(".calendar-container table tbody").find("tr").eq(row).find("td").eq(td).find(".date").eq(0).text(i); 257 td++; 258 if (td % 7 == 0) { 259 row++; 260 td = 0; 261 //换行 262 } 263 } 264 var surplus = 7 - td + (6 - row) * 7; 265 var k = 1; 266 for (var i = 1; i <= surplus; i++) { 267 if (td % 7 == 0) { 268 if (row < 6) { 269 row++; 270 } 271 td = 0; 272 //换行 273 } 274 $(".calendar-container table tbody").find("tr").eq(row).find("td").eq(td).find(".date").eq(0).text(i); 275 td++; 276 } 277 } 278 </script>
引入jquery就可以使用了，很简单的一个例子。
1 /*日历插件*/ 2 .dj-calendar-panel 3 { 4 background: #f6f6f6; 5 font: 12px/20px Arial,'Microsoft YaHei',sans-serif,SimSun; 6 color: #666; 7 padding-top: 10px; 8 width: 570px; 9 height: 385px; 10 } 11 12 .dj-calendar-panel:after 13 { 14 content: "."; 15 height: 0; 16 overflow: hidden; 17 clear: both; 18 display: block; 19 } 20 21 .dj-calendar-panel .previous-month, .dj-calendar-panel .next-month 22 { 23 width: 17px; 24 height: 17px; 25 position: absolute; 26 top: 8px; 27 cursor: pointer; 28 background: url(http://js.40017.cn/cn/public/module/Calendar/0.1/calendar_arrow.png) scroll no-repeat 0 0 transparent; 29 overflow: hidden; 30 outline: none; 31 } 32 33 .dj-calendar-panel .previous-month 34 { 35 left: 10px; 36 } 37 38 .dj-calendar-panel .next-month 39 { 40 right: 10px; 41 background-position: -17px 0; 42 } 43 44 .dj-calendar-panel .previous-month:hover 45 { 46 background-position: 0 -17px; 47 } 48 49 .dj-calendar-panel .next-month:hover 50 { 51 background-position: -17px -17px; 52 } 53 54 .dj-calendar-panel .previous-month-disabled, .dj-calendar-panel .previous-month-disabled:hover 55 { 56 cursor: default; 57 background-position: 0 -34px; 58 } 59 60 .dj-calendar-panel .next-month-disabled, .dj-calendar-panel .next-month-disabled:hover 61 { 62 cursor: default; 63 background-position: -17px -34px; 64 } 65 66 .dj-calendar-panel .loading 67 { 68 position: absolute; 69 width: 100%; 70 height: 100%; 71 left: 0; 72 right: 0; 73 background: url(http://img1.40017.cn/cn/comm/images/cn/public/transparent_loading_v2.gif) scroll no-repeat center center transparent; 74 } 75 76 .dj-calendar-panel .calendar-wrapper 77 { 78 border-top: 0 none; 79 } 80 81 .dj-calendar-panel .calendar-wrapper h6 82 { 83 margin: 0; 84 padding: 0; 85 height: 34px; 86 background: #2fa1e7; 87 text-align: center; 88 color: #fff; 89 } 90 91 .dj-calendar-panel h6 span 92 { 93 margin-top: 8px; 94 display: inline-block; 95 font-size: 16px; 96 line-height: 18px; 97 height: 18px; 98 } 99 100 .dj-calendar-panel h6 .year-wrapper, .dj-calendar-panel h6 .month-wrapper 101 { 102 height: 18px; 103 float: left; 104 padding-right: 10px; 105 background: #F8F8F8; 106 position: relative; 107 } 108 109 .dj-calendar-panel h6 .year-str, .dj-calendar-panel h6 .month-str 110 { 111 float: left; 112 font-style: normal; 113 font-weight: bold; 114 margin-left: 3px; 115 _padding-top: 1px; 116 _height: 17px; 117 } 118 119 .dj-calendar-panel h6 .year-str 120 { 121 margin-right: 3px; 122 } 123 124 .dj-calendar-panel h6 .year-wrapper i, .dj-calendar-panel h6 .month-wrapper i 125 { 126 position: absolute; 127 height: 0; 128 line-height: 0; 129 overflow: hidden; 130 border-color: #333 #F8F8F8; 131 border-style: solid; 132 border-width: 4px 4px 0; 133 top: 7px; 134 right: 2px; 135 } 136 137 .dj-calendar-panel h6 .year-wrapper input, .dj-calendar-panel h6 .month-wrapper input 138 { 139 float: left; 140 border: none; 141 text-align: center; 142 height: 18px; 143 line-height: 18px; 144 padding: 0; 145 background: #F8F8F8; 146 color: #333; 147 font-size: 14px; 148 outline: none; 149 position: relative; 150 } 151 152 .dj-calendar-panel h6 .year-wrapper input 153 { 154 width: 42px; 155 } 156 157 .dj-calendar-panel h6 .month-wrapper input 158 { 159 width: 24px; 160 } 161 162 .dj-calendar-panel h6 .year-wrapper input:focus, .dj-calendar-panel h6 .month-wrapper input:focus 163 { 164 border: 0; 165 } 166 167 .dj-calendar-panel .calendar-wrapper .calendar-container 168 { 169 position: relative; 170 width: 100%; 171 background: white; 172 } 173 174 .dj-calendar-panel .calendar-wrapper .behind-month 175 { 176 position: absolute; 177 width: 196px; 178 font-size: 124px; 179 line-height: 124px; 180 color: #EEE; 181 text-align: center; 182 padding-top: 30px; 183 font-family: 'Helvetica Neue',Helvetica,Arial,Sans-serif; 184 } 185 186 .dj-calendar-panel .calendar-wrapper table 187 { 188 margin: 0; 189 padding: 0; 190 border-spacing: 0; 191 border-collapse: collapse; 192 width: 100%; 193 position: relative; 194 height: 300px; 195 } 196 197 .dj-calendar-panel .calendar-wrapper .header 198 { 199 height: 14px; 200 } 201 202 .dj-calendar-panel .calendar-wrapper th 203 { 204 width: 80px; 205 padding: 0; 206 border: none; 207 border-top: none; 208 vertical-align: middle; 209 text-align: center; 210 font-weight: normal; 211 line-height: 30px; 212 background: #71808c; 213 color: white; 214 } 215 216 .dj-calendar-panel .calendar-wrapper tr 217 { 218 /* height: 29px; */ 219 } 220 221 .dj-calendar-panel .calendar-wrapper td 222 { 223 padding: 0; 224 border: 1px solid #dcdcdc; 225 border-top: none; 226 text-align: left; 227 vertical-align: top; 228 cursor: pointer; 229 line-height: 18px; 230 height: 48px; 231 position: relative; 232 } 233 234 .dj-calendar-panel .calendar-wrapper .dataprice 235 { 236 vertical-align: bottom; 237 color: #f60; 238 } 239 240 .dj-calendar-panel .calendar-wrapper .dataprice span 241 { 242 vertical-align: bottom; 243 } 244 245 .dj-calendar-panel .calendar-wrapper .dataprace 246 { 247 display: inline; 248 } 249 250 .dj-calendar-panel .calendar-wrapper .date 251 { 252 vertical-align: top; 253 padding-left: 3px; 254 } 255 256 .dj-calendar-panel .calendar-wrapper td .d 257 { 258 height: 20px; 259 display: block; 260 margin: 5px 1px 0; 261 } 262 263 .dj-calendar-panel .calendar-wrapper td div 264 { 265 line-height: 16px; 266 /* height: 16px; */ 267 padding: 5px 3px; 268 text-align: center; 269 } 270 271 .dj-calendar-panel .calendar-wrapper td.saturday, 272 .dj-calendar-panel .calendar-wrapper td.sunday 273 { 274 /*font-weight: bold;*/ 275 } 276 277 278 .dj-calendar-panel .calendar-wrapper .festival, 279 .dj-calendar-panel .calendar-wrapper .festival .date 280 { 281 color: #b54800; 282 } 283 284 .dj-calendar-panel .calendar-wrapper .today 285 { 286 color: #ffa63c; 287 } 288 289 .dj-calendar-panel .calendar-wrapper td .date 290 { 291 color: #333; 292 position: absolute; 293 left: 0; 294 top: 0; 295 } 296 297 .not-this-day 298 { 299 background: #f5f5f5; 300 } 301 302 .dj-calendar-panel .calendar-wrapper .today, 303 .dj-calendar-panel .calendar-wrapper .to-day, 304 .dj-calendar-panel .calendar-wrapper .selected-day, 305 .dj-calendar-panel .calendar-wrapper .hover-from-day, 306 .dj-calendar-panel .calendar-wrapper .hover-to-day 307 { 308 background: #fff3ea; 309 } 310 311 312 313 .dj-calendar-panel .calendar-wrapper .from-day .d, 314 .dj-calendar-panel .calendar-wrapper .to-day .d, 315 .dj-calendar-panel .calendar-wrapper .selected-day .d, 316 .dj-calendar-panel .calendar-wrapper .hover-from-day .d, 317 .dj-calendar-panel .calendar-wrapper .hover-to-day .d 318 { 319 border-bottom: 3px solid #f60; 320 color: #333; 321 } 322 323 324 .dj-calendar-panel .calendar-wrapper .hover-day .d, 325 .dj-calendar-panel .calendar-wrapper .range-day .d 326 { 327 border-bottom: 3px solid #ddd; 328 } 329 330 331 .dj-calendar-panel .calendar-wrapper .previous-month-day 332 { 333 color: #005BB5; 334 } 335 336 .dj-calendar-panel .calendar-wrapper .next-month-day 337 { 338 color: #005BB5; 339 } 340 341 342 .dj-calendar-panel .calendar-wrapper .invalid-day, 343 .dj-calendar-panel .calendar-wrapper .invalid-day .d 344 { 345 color: #999999; 346 cursor: default; 347 /* background-color: #f5f5f5; */ 348 } 349 350 .dj-calendar-panel .calendar-wrapper .invalid-day .dataprice 351 { 352 color: #ccc; 353 } 354 355 .dj-calendar-panel .calendar-wrapper .over .dataprace, 356 .dj-calendar-panel .calendar-wrapper .over .dataprice 357 { 358 color: #ff6600; 359 display: block; 360 height: 18px; 361 } 362 363 .dj-calendar-panel .calendar-wrapper .enough .dataprace, 364 .dj-calendar-panel .calendar-wrapper .enough .dataprice, 365 .dj-calendar-panel .calendar-wrapper .invalid-day .dataprace, 366 .dj-calendar-panel .calendar-wrapper .invalid-day .dataprice 367 { 368 display: block; 369 } 370 371 .dj-calendar-panel .calendar-wrapper .enough .dataprace 372 { 373 color: #7faf47; 374 } 375 376 .dj-calendar-panel .calendar-wrapper .enough .dataprice 377 { 378 color: #ff6600; 379 } 380 381 .dj-calendar-panel .calendar-wrapper .invalid-day .date 382 { 383 color: #ccc; 384 } 385 386 387 .dj-calendar-panel .month-panel, .dj-calendar-panel .year-panel 388 { 389 position: absolute; 390 display: none; 391 width: 40px; 392 border: 1px solid #ddd; 393 background: #fff; 394 } 395 396 .dj-calendar-panel .year-panel 397 { 398 width: 50px; 399 } 400 401 .dj-calendar-panel .month-panel a, .dj-calendar-panel .year-panel a 402 { 403 display: block; 404 margin: 0; 405 padding: 0 0 0 10px; 406 line-height: 16px; 407 cursor: pointer; 408 background: #fff; 409 _width: 30px; 410 color: #333; 411 text-decoration: none; 412 } 413 414 .dj-calendar-panel .year-panel a 415 { 416 _width: 40px; 417 } 418 419 .dj-calendar-panel .month-panel a:hover, .dj-calendar-panel .year-panel a:hover 420 { 421 text-decoration: none; 422 background: #f0f0f0; 423 } 424 425 .dj-calendar-panel .year-panel .invalid-year, .dj-calendar-panel .month-panel .invalid-month 426 { 427 color: #999; 428 cursor: default; 429 } 430 431 .dj-calendar-panel .year-panel .invalid-year:hover, .dj-calendar-panel .month-panel .invalid-month:hover 432 { 433 background: #fff; 434 } 435 436 .dj-calendar-panel .year-nav 437 { 438 height: 16px; 439 border-top: 1px solid #ddd; 440 position: relative; 441 } 442 443 .dj-calendar-panel .year-nav .previous, .dj-calendar-panel .year-nav .next 444 { 445 position: absolute; 446 top: 2px; 447 line-height: 0; 448 cursor: pointer; 449 height: 12px; 450 overflow: hidden; 451 } 452 453 .dj-calendar-panel .year-nav .previous 454 { 455 left: 6px; 456 } 457 458 .dj-calendar-panel .year-nav .next 459 { 460 right: 6px; 461 } 462 463 .dj-calendar-panel .year-nav .previous i, .dj-calendar-panel .year-nav .next i 464 { 465 border-style: solid; 466 border-color: #fff #ccc #fff #ccc; 467 border-width: 6px 6px 6px 0; 468 display: inline-block; 469 height: 0; 470 line-height: 0; 471 overflow: hidden; 472 } 473 474 .dj-calendar-panel .year-nav .next i 475 { 476 border-width: 6px 0 6px 6px; 477 } 478 479 .dj-calendar-panel .year-nav .previous:hover i, .dj-calendar-panel .year-nav .next:hover i 480 { 481 border-color: #fff #f60 #fff #f60; 482 } 483 484 .dj-calendar-panel .year-nav .previous em, .dj-calendar-panel .year-nav .next em 485 { 486 border-style: solid; 487 border-color: #ccc #fff #ccc #fff; 488 border-width: 3px 3px 3px 0; 489 position: absolute; 490 height: 0; 491 line-height: 0; 492 overflow: hidden; 493 top: 3px; 494 right: 0; 495 width: 0; 496 } 497 498 .dj-calendar-panel .year-nav .next em 499 { 500 border-width: 3px 0 3px 3px; 501 left: 0; 502 } 503 504 .dj-calendar-panel .year-nav .previous:hover em, .dj-calendar-panel .year-nav .next:hover em 505 { 506 border-color: #f60 #fff #f60 #fff; 507 } 508 509 .dj-calendar-panel .year-nav .invalid-nav 510 { 511 visibility: hidden; 512 cursor: default; 513 } 514 515 .dj-calendar-panel.green .calendar-wrapper h6 516 { 517 background: #8ab923; 518 } 519 520 .dj-calendar-panel.green .previous-month, .dj-calendar-panel.green .next-month 521 { 522 background-image: url(http://js.40017.cn/cn/public/module/Calendar/0.2/calendar_arrow_green.png); 523 } 524 525 .calendar-header 526 { 527 height: 60px; 528 background: #eceff2; 529 position: relative; 530 } 531 532 .calendar-header-inner 533 { 534 position: relative; 535 margin: 0 35px; 536 height: 60px; 537 overflow: hidden; 538 } 539 540 .calendar-header-inner ul 541 { 542 position: absolute; 543 width: 200%; 544 left: 0; 545 } 546 547 .calendar-header .prev, 548 .calendar-header .next 549 { 550 position: absolute; 551 background: black; 552 top: 8px; 553 cursor: pointer; 554 padding: 15px 3px; 555 } 556 557 .calendar-header .prev, 558 .calendar-header .next, 559 .calendar-header .prev:visited, 560 .calendar-header .next:visited 561 { 562 background: #8AB923; 563 } 564 565 .calendar-header .prev 566 { 567 left: 10px; 568 } 569 570 .calendar-header .next 571 { 572 right: 13px; 573 } 574 575 .calendar-header .prev span, 576 .calendar-header .next span 577 { 578 height: 13px; 579 width: 8px; 580 display: block; 581 } 582 583 .calendar-header a:hover 584 { 585 background-color: #8c96a2; 586 color: white; 587 } 588 589 .calendar-header .disable 590 { 591 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 592 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 593 opacity: 0; 594 cursor: default; 595 } 596 597 .calendar-header .disable:hover 598 { 599 background-color: #8ab923; 600 } 601 602 .calendar-header .prev span 603 { 604 /*background-image: url("http://img1.40017.cn/cn/v/2015/modules/calchart/0.1.0/prev.png");*/ 605 background-image: url("http://img1.40017.cn/cn/v/2015/newdetails/cal-left-arrow.png"); 606 display: inline-block; 607 width: 18px; 608 height: 18px; 609 } 610 611 .calendar-header .next span 612 { 613 background-image: url("http://img1.40017.cn/cn/v/2015/modules/calchart/0.1.0/next.png"); 614 } 615 616 .calendar-header ul 617 { 618 margin:0px; 619 padding:0px; 620 } 621 622 .calendar-header li 623 { 624 list-style: none; 625 display: inline-block; 626 width: 8%; 627 line-height: 30px; 628 text-align: center; 629 } 630 631 .calendar-header li span 632 { 633 display: block; 634 color: #666; 635 font-weight: bold; 636 font-size: 14px; 637 } 638 639 .calendar-header li a 640 { 641 color: #999; 642 display: block; 643 height: 100%; 644 cursor: pointer; 645 } 646 647 .calendar-header li a.J_NoPrice 648 { 649 cursor: default; 650 } 651 652 .calendar-header li.active a 653 { 654 background: #4c5a65; 655 color: white; 656 } 657 658 .calendar-header li em 659 { 660 font-style: normal; 661 } 662 663 .calendar-header li.price-date a 664 { 665 color: #ff6600; 666 } 667 668 .calendar-header li.price-date a:hover 669 { 670 color: #fff; 671 } 672 673 .calendar-header li.active a span, 674 .calendar-header li a:hover span 675 { 676 color: white; 677 } 678 679 .calendar-header li.active a em 680 { 681 color: white; 682 } 683 684 .calendar-title 685 { 686 height: 30px; 687 line-height: 30px; 688 background: #fff7e4; 689 font-size: 12px; 690 } 691 692 .calendar-title h4 693 { 694 color: #666; 695 display: inline-block; 696 margin-left: 10px; 697 float: left; 698 line-height: 30px; 699 } 700 701 .calendar-title h4 span 702 { 703 color: #333; 704 } 705 706 .calendar-title ul 707 { 708 float: right; 709 display: inline-block; 710 } 711 712 .calendar-title li 713 { 714 display: inline-block; 715 margin-right: 20px; 716 color: #999; 717 } 718 719 720 .calendar-outer 721 { 722 background: #f6f6f6; 723 position: relative; 724 } 725 726 .calendar-body 727 { 728 padding-bottom: 10px; 729 } 730 731 .dj-calendar-panel, .calendar-header 732 { /* background-color: transparent */ 733 } 734 735 .dj-calendar-panel 736 { 737 padding-top: 0; 738 z-index: 9999; 739 } 740 741 .mCal .calendar-wrapper td 742 { 743 position: relative; 744 } 745 746 .mCal .calendar-wrapper td .icon-discount 747 { 748 position: absolute; 749 right: 0; 750 background: #ff7d27; 751 color: white; 752 padding: 2px; 753 font-size: 12px; 754 line-height: 12px; 755 } 756 757 .discount-tip 758 { 759 position: absolute; 760 background: white; 761 width: 270px; 762 z-index: 10000; 763 text-align: left; 764 padding: 10px; 765 top: 325px; 766 left: 200px; 767 box-shadow: 0 0 16px 2px rgba(0,0,0,.3); 768 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')"; 769 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000'); 770 } 771 772 .discount-tip:after 773 { 774 content: ' '; 775 position: absolute; 776 display: block; 777 height: 0; 778 width: 0; 779 font-size: 0; 780 line-height: 0; 781 overflow: hidden; 782 border-color: transparent transparent #fff; 783 border-style: dashed dashed solid; 784 border-width: 8px; 785 z-index: 9999; 786 top: -16px; 787 left: 15px; 788 } 789 790 .discount-tip span 791 { 792 font-size: 12px; 793 color: #666; 794 font-family: "microsoft yahei"; 795 } 796 797 .discount-tip span b 798 { 799 color: #ff9255; 800 } 801 802 .invalid-day .icon-discount, 803 .need-check-login 804 { 805 display: none; 806 } 807 808 .is-login .need-check-login 809 { 810 display: block; 811 } 812 813 .is-login .invalid-day .need-check-login 814 { 815 display: none; 816 } 817 818 .calendar-month-bg 819 { 820 position: absolute; 821 width: 100%; 822 height: 100%; 823 color: #f9f9f9; 824 left: 0; 825 top: 0; 826 font-size: 180px; 827 display: inline-block; 828 vertical-align: middle; 829 text-align: center; 830 line-height: 277px; 831 font-family: "Microsoft Yahei"; 832 font-weight: bold; 833 *display: none; 834 display: none 9; 835 } 836 837 .dj-calendar-panel .calendar-wrapper .previous-month-day, 838 .dj-calendar-panel .calendar-wrapper .next-month-day 839 { 840 background: #f5f5f5; 841 } 842 /*.pop-cal {*/ 843 /*display: none;*/ 844 /*position: absolute;*/ 845 /*background: white;*/ 846 /*border: 1px solid #f0f0f0;*/ 847 /*border- 3px;*/ 848 /*border-bottom: 3px double #f0f0f0;*/ 849 /*border-right: 3px double #f0f0f0;*/ 850 /*box-shadow: 2px 2px 2px #CCC;*/ 851 /* 364px;*/ 852 /*font-family: "微软雅黑";*/ 853 /*z-index: 100*/ 854 /*}*/ 855 .ui-dialog-content .cal-content-inner 856 { 857 width: 411px; 858 } 859 860 .listSty 861 { 862 padding-top: 14px; 863 line-height: 20px; 864 height: 20px; 865 font-family: "微软雅黑"; 866 clear: both; 867 } 868 869 .listSty1 870 { 871 margin-bottom: 10px; 872 line-height: 20px; 873 height: 30px; 874 background: #f0f0f0; 875 padding-top: 10px; 876 font-family: "微软雅黑"; 877 } 878 879 .linename 880 { 881 width: 182px; 882 float: left; 883 padding-left: 9px; 884 font-family: "微软雅黑"; 885 } 886 887 .lineprice 888 { 889 line-height: 21px; 890 float: left; 891 width: 76px; 892 font-family: "微软雅黑"; 893 } 894 895 .lineprice em 896 { 897 color: #f60; 898 font-family: "微软雅黑"; 899 } 900 901 .num_box 902 { 903 width: 68px; 904 height: 20px; 905 border: 1px solid #ddd; 906 overflow: hidden; 907 float: right; 908 clear: none; 909 font-family: "微软雅黑"; 910 } 911 912 .num_box a.sub_btn 913 { 914 border-right: 1px solid #ddd; 915 background-position: 6px -28px; 916 font-family: "微软雅黑"; 917 } 918 919 .num_box input 920 { 921 width: 24px; 922 height: 20px; 923 font: 14px/20px "simsun"; 924 float: left; 925 overflow: hidden; 926 border: 0; 927 color: #333; 928 text-align: center; 929 background-color: #fff; 930 font-family: "微软雅黑"; 931 } 932 933 .num_box label 934 { 935 font: 14px/20px "simsun"; 936 } 937 938 .num_box a.add_btn 939 { 940 border-left: 1px solid #ddd; 941 background-position: -14px -28px; 942 } 943 944 .num_box a 945 { 946 display: block; 947 width: 20px; 948 height: 20px; 949 overflow: hidden; 950 float: left; 951 background: url(http://img1.40017.cn/cn/v/book/2014/cjSpirit.png) no-repeat 0 0; 952 } 953 954 .num_box a.add_btn 955 { 956 border-left: 1px solid #ddd; 957 background-position: -14px -28px; 958 } 959 960 .pop-cal .btn-order 961 { 962 width: 116px; 963 background: url(http://img1.40017.cn/cn/v/details/2014/total.png) no-repeat -80px -437px; 964 position: relative; 965 padding-bottom: 10px; 966 margin-left: 142px; 967 font-size: 16px; 968 color: white; 969 padding-top: 19px; 970 display: block; 971 text-align: center; 972 } 973 974 .num_box a.sub_btn_false 975 { 976 background: url(http://img1.40017.cn/cn/v/book/2014/cjSpirit.png) no-repeat 6px -44px; 977 cursor: default; 978 } 979 980 .num_box a.add_btn_false 981 { 982 background-position: -14px -43px; 983 cursor: default; 984 } 985 986 .dj-calendar-panel .calendar-header .next, 987 .dj-calendar-panel .calendar-header .prev 988 { 989 background: #eceff2; 990 } 991 992 .dj-calendar-panel .calendar-header .next span 993 { 994 width: 18px; 995 height: 18px; 996 display: inline-block; 997 background-image: url(http://img1.40017.cn/cn/v/2015/newdetails/cal-right-arrow.png); 998 } 999 1000 .dj-calendar-panel .calendar-wrapper td .icon-discount 1001 { 1002 position: absolute; 1003 right: 0; 1004 background: #ff7d27; 1005 color: white; 1006 padding: 2px; 1007 font-size: 12px; 1008 line-height: 12px; 1009 } 1010 1011 .dj-calendar-panel .calendar-wrapper .header 1012 { 1013 border-left: 1px solid #dcdcdc; 1014 border-right: 1px solid #dcdcdc; 1015 } 1016 1017 .pick-calendar-panel .calendar-header 1018 { 1019 border: 1px solid #dcdcdc; 1020 border-bottom: 0 none; 1021 }