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-width: 3px;*/
848 /*border-bottom: 3px double #f0f0f0;*/
849 /*border-right: 3px double #f0f0f0;*/
850 /*box-shadow: 2px 2px 2px #CCC;*/
851 /*width: 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 }
时间： 2024-10-13 10:36:59