console
$(function(){
$('.btn').on('click',function(){
$('.dialog-calendar').fadeIn();
show()
return false;
})
$('body').on('click','.dialog-calendar #calendar-oto td',function(){
$('.dialog-calendar #calendar-oto td span').removeClass('sp-order')
$(this).children('span').addClass('sp-order')
return false;
})
})
function GetMDay(y, m) {
var mday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if ((y % 40 == 0 && y % 100 != 0) || y % 400 == 0)
mday[1] = 29;
return mday[m - 1];
}
function WeekNumber(y, m, d) {
var wk;
if (m <= 12 && m >= 1) {
for (var i = 1; i < m; ++i) {
d += GetMDay(y, i);
}
}
wk = (y - 1 + (y - 1) / 4 - (y - 1) / 100 + (y - 1) / 400 + d) % 7;
return parseInt(wk);
}
function autoSize(e) {
var func = function(){
var obj={
fontSize:312.5,
screenW:1000,
}
var nowObj=$.extend({},obj,e);
var w = $(window).width();
var fontSize = nowObj.fontSize * w / nowObj.screenW;
var fontSizeNow = fontSize > nowObj.fontSize ? nowObj.fontSize : fontSize;
$('html').css({
'font-size': fontSizeNow
});
}
func();
$(window).resize(function() {
func();
});
}
function SetCalendar(year, month) {
var daynumber = GetMDay(year, month);
var firstnumber = WeekNumber(year, month, 1);
var lastnumber = WeekNumber(year, month, daynumber);
var weeknumber = (daynumber - (7 - firstnumber) - (lastnumber + 1)) / 7;
var day = 1;
var name;
var calendar = "";
var preYear=(month-1)<1?(year-1):year;
var preMonth=(month-1)<1?12:(month-1);
var nextYear=(month+1)>12?(year+1):year;
var nextMonth=(month+1)>12?1:(month+1);
calendar += "<p class='p-title'>请选择预约日期</p><a class='pre-month' href='javascript:gotoMonth(["+preYear+','+preMonth+"])'></a><p class='p-month'>"+month+"月 "+year+"</p><a class='next-month' href='javascript:gotoMonth(["+nextYear+','+nextMonth+"])'></a><table>"
calendar += "<thead><tr class='tr-th'>";
calendar += "<th id='week-7'>日</th>";
calendar += "<th id='week-1'>一</th>";
calendar += "<th id='week-2'>二</th>";
calendar += "<th id='week-3'>三</th>";
calendar += "<th id='week-4'>四</th>";
calendar += "<th id='week-5'>五</th>";
calendar += "<th id='week-6'>六</th>";
calendar += "</tr></thead>";
calendar += "<tr>";
var i = 0;
for (i = 0; i < firstnumber; i++)
{
calendar += "<td></td>";
}
for (i = firstnumber; i < 7; i++) {
name = year + "-" + month + "-" + day;
calendar += "<td id=\"" + name + "\"><span>" + day + "</span></td>";
day++;
}
calendar += "</tr>";
var number = 0;
for (i = 0; i < weeknumber; i++)
{
calendar += "<tr>";
for (var k = daynumber - (7 - firstnumber) - (weeknumber - 1) * 7; k < daynumber - (7 - firstnumber) - (weeknumber - 1) * 7 + 7; k++) {
name = year + "-" + month + "-" + day;
calendar += "<td id=\"" + name + "\"><span>" + day + "</span></td>";
day++;
}
calendar += "</tr>";
number++;
}
calendar += "<tr>";
for (i = 0; i < lastnumber + 1; i++)
{
name = year + "-" + month + "-" + day;
calendar += "<td id=\"" + name + "\"><span>" + day + "</span></td>";
day++;
}
for (i = lastnumber + 1; i < 7; i++) {
calendar += "<td>";
calendar += "</td>";
}
calendar += "</tr>";
if (number == 3) {
calendar += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
}
calendar += "</table>";
return calendar;
}
function show(){
$('#2018-1-27').html("<span class='sp-order'>27</span>")
$('#2018-1-11').html("<span style='color:#ffb52f;'>11</span>")
$('#2018-1-18').html("<span style='color:#ffb52f;'>18</span>")
$('#2018-1-25').html("<span style='color:#ffb52f;'>25</span>")
$('#week-7').html("<span style='color:#4cb0f4;'>日</span>")
}
function gotoMonth(arry){
$('#calendar-oto').html(SetCalendar(arry[0],arry[1]))
show()
}
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
$('#calendar-oto').html(SetCalendar(year,month))
<button class="btn">展示日历</button>
<div class="dialog-calendar">
<div id="calendar-oto"></div>
</div>
.dialog-date{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);display: none;z-index: 99;}
.dialog-date .ul-box{float: left;width: 70%;margin-left: 10%;margin-top: 40px;background-color: white;border-radius: 10px;padding: 5%;}
.dialog-date .ul-box .p-title{float: left;width: 100%;text-align: center;font-size: 18px;color: #323232;}
.dialog-date .ul-box .ul-dates{float: left;width: 100%;margin-top: 16px;}
.dialog-date .ul-box .ul-dates li{float: left;width: 100%;line-height: 30px;}
.dialog-date .ul-box .ul-dates li .p-ok-box{float: left;width: 34px;text-align: center;}
.dialog-date .ul-box .ul-dates li .p-ok-box .sp-ok{float: left;width: 11px;height: 11px;background-color: #999999;border-radius: 50%;margin-top: 9px;margin-left: 6px;position: relative;border: 1px solid #999999;}
.dialog-date .ul-box .ul-dates li.active .p-ok-box .sp-ok{background-color: #4cb0f4;border-color: #4cb0f4;}
.dialog-date .ul-box .ul-dates li.active .p-ok-box .sp-ok:before{position: absolute;left: 10%;top: 0px;content: '';width: 80%;height: 100%;background-size: contain;z-index: 1;}
.dialog-date .ul-box .ul-dates li .p-date{float: left;font-size: 12px;color: #323232;}
.dialog-date .ul-box .ul-dates li.ot .p-date{color: #c1c1c1;}
.dialog-date .ul-box .ul-dates li .p-nums{float: left;font-size: 10px;color: #c1c1c1;margin-left: 18px;}
.dialog-calendar{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);z-index: 99;display: none;}
.dialog-calendar #calendar-oto{float: left;width: 90%;margin-top: 10%;margin-left: 5%;background-color: white;border-radius: 10px;text-align: center;overflow: hidden;}
.dialog-calendar .p-title{font-size: 18px;color: #323232;line-height: 20px;margin-top: 16px;}
.dialog-calendar .pre-month{width: 0px;height: 0px;border: 1px solid red;border-color: transparent #323232 transparent transparent;border-width: 5px;display: inline-block;}
.dialog-calendar .next-month{width: 0px;height: 0px;border: 1px solid red;border-color: transparent transparent transparent #323232;border-width: 5px;display: inline-block;}
.dialog-calendar .p-month{display: inline-block;font-size: 14px;color: #323232;line-height: 44px;margin: 0px 10px;position: relative;top: 0px;}
.dialog-calendar #calendar-oto table{width: 100%;}
.dialog-calendar #calendar-oto .th{border-top: 1px solid #d6d7dc;border-bottom: 1px solid #d6d7dc;}
.dialog-calendar .tr-th{border-top: 1px solid #d6d7dc;border-bottom: 1px solid #d6d7dc;}
.dialog-calendar #calendar-oto th, .dialog-calendar #calendar-oto td{text-align: center;font-size: 10px;color: #323232;height: 36px;width: 10%;}
.dialog-calendar .mt20{margin: 20px;}
.dialog-calendar .sp-order{width: 30px;height: 30px;line-height: 30px;border-radius: 50%;text-align: center;background-color: #4cb0f4;font-size: 10px;color: white;display: inline-block;}