页面 <div class="un1"> <h2>服务档期</h2> <div class="date-panel" style="height: 525px;"> <div class="bars"> <a href="javascript:void (0);" id="monthStart" class="b-l"></a> <span class="b-c" id="monthInfo"></span> <a href="javascript:void (0);" id="monthNext" class="b-r"></a> </div> <input type="hidden" id="shopId" value="34782e16-53d1-4c1c-b573-e82b0eae5d87" /> <input type="hidden" id="base" value="http://sc.izhaowo.com" /> <input type="hidden" id="schTname" value="ZHUCHIREN001" /> <table id="dateTable" class="picTable"> <tbody> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> <tr> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> </tr> <tr> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> </tr> <tr> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> </tr> <tr> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> </tr> <tr> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> </tr> <tr> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> <td id="home" valign="top"><span></span></td> </tr> </tbody> </table> </div> </div> js代码: /** * Created by dengxu on 14-6-6. */ var today = new Date(); var thisMonth = today.getMonth()+1; var thisYear= today.getFullYear(); //日历 window.onload = function(){ viewSchedule(); } function viewSchedule (){ var table = document.getElementById("dateTable"); var yearS = document.getElementById("monthInfo"); var dayNum = 0; var fullMonth = thisMonth; if(fullMonth<10){ fullMonth = "0"+(fullMonth); } yearS.innerHTML = thisYear+'年'+(fullMonth)+'月'; //初始化日期 var aTD = table.getElementsByTagName("TD"); //获取本月一号 today.setFullYear(thisYear); today.setMonth(thisMonth-1); today.setDate(1); //日期 dayNum = monthDay(thisYear,thisMonth); //获取上一个月有多少天 var exDayNum = monthDay(thisYear,thisMonth-1); if(today.getDay()==0) { var i = 0; for (i; i < dayNum; i++) { aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(i + 1)+'</span>'; } var k = 1; for (i; i < 42; i++) { aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; k++; } }else if(today.getDay()==1) { var n = exDayNum - 0; var i = 0; for (n; n <= exDayNum; n++) { aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; i++; } var j = 0; for (j; j < dayNum; j++) { aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; i++; } var k = 1; for(i;i<42;i++){ aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; k++; } }else if(today.getDay()==2) { var n = exDayNum - 1; var i = 0; for (n; n <= exDayNum; n++) { aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; i++; } var j = 0; for (j; j < dayNum; j++) { aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; i++; } var k = 1; for(i;i<42;i++){ aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; k++; } }else if(today.getDay()==3) { var n = exDayNum - 2; var i = 0; for (n; n <= exDayNum; n++) { aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; i++; } var j = 0; for (j; j < dayNum; j++) { aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; i++; } var k = 1; for(i;i<42;i++){ aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; k++; } }else if(today.getDay()==4) { var n = exDayNum - 3; var i = 0; for (n; n <= exDayNum; n++) { aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; i++; } var j = 0; for (j; j < dayNum; j++) { aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; i++; } var k = 1; for(i;i<42;i++){ aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; k++; } }else if(today.getDay()==5) { var n = exDayNum - 4; var i = 0; for (n; n <= exDayNum; n++) { aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; i++; } var j = 0; for (j; j < dayNum; j++) { aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; i++; } var k = 1; for(i;i<42;i++){ aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; k++; } }else if(today.getDay()==6) { var n = exDayNum-5; var i = 0; for(n;n<=exDayNum;n++){ aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; i++; } var j = 0; for(j;j<dayNum;j++){ aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; i++; } var k = 1; for(i;i<42;i++){ aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; k++; } } //上一个月 function previous (){ var thisM = thisMonth; var thisY= thisYear; if(thisM==1){ thisM = 12; thisY = thisY-1; }else{ thisM = thisM-1; } thisYear = thisY; thisMonth = thisM; viewSchedule(); } //下一个月 function next (){ var thisM = thisMonth; var thisY= thisYear; if(thisM==12){ thisM = 1; thisY = thisY+1; }else{ thisM = thisM+1; } thisYear = thisY; thisMonth = thisM; viewSchedule(); } //是否为闰年 function isLeapYear(year){ if(year%4==0 && year%100!=0){ return true; } else{ if(year%400==0){ return true; } else{ return false; } } } //判断每月有几天 function monthDay(year,month){ if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12 || month==0){ return 31; }else if(month==4 || month==6 || month==9 || month==11){ return 30; }else if(month==2 && isLeapYear(year)){ return 29; }else{ return 28; } } function nowDay(){ var monthStart = document.getElementById("monthStart"); var monthNext = document.getElementById("monthNext"); monthStart.onclick = function(){ previous(); } monthNext.onclick = function(){ next(); } } nowDay(); setSchedule(table); } //格式化日期, function formatDate(date,format){ var paddNum = function(num){ num += ""; return num.replace(/^(d)$/,"0$1"); } //指定格式字符 var cfg = { yyyy : date.getFullYear() //年 : 4位 ,yy : date.getFullYear().toString().substring(2)//年 : 2位 ,M : date.getMonth() + 1 //月 : 如果1位的时候不补0 ,MM : paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0 ,d : date.getDate() //日 : 如果1位的时候不补0 ,dd : paddNum(date.getDate())//日 : 如果1位的时候补0 ,hh : date.getHours() //时 ,HH : paddNum(date.getHours()) //时 ,mm : paddNum(date.getMinutes()) //分 ,ss : date.getSeconds() //秒 } format || (format = "yyyy-MM-dd hh:mm:ss"); return format.replace(/([a-z])(1)*/ig,function(m){return cfg[m];}); } ////替换所有 //String.prototype.replaceAll = function(s1,s2) { // return this.replace(new RegExp(s1, "gm"), s2); //g全局 //} var tdValue = ""; //设置档期 function setSchedule(obj){ var shopId = document.getElementById("shopId").value; var base = document.getElementById("base").value; //档期时间集合 var fullMonth = thisMonth; if(fullMonth<10){ fullMonth = "0"+(fullMonth); } var scheduleList = ""; $.ajax({ url:base+'/schedule/doSchedule', type:'post', dateType:'json', data:'shopId='+shopId+"&date="+thisYear+"-"+fullMonth+"-03", timeout:10000*10, success:function(data){ //档期 var schedule = data.schedules; //当前月份 var fullMonth; var thisTd = obj.getElementsByTagName("TD"); for(var k = 0;k<thisTd.length;k++){ var day = thisTd[k].getElementsByTagName("span")[0].innerHTML; //用于显示到日历上面 var day2 = thisTd[k].getElementsByTagName("span")[0].innerHTML; fullMonth = thisTd[k].getElementsByTagName("span")[0].id; var tdHTML = thisTd[k]; if(day<10){ day = "0"+(day); } if(fullMonth<10){ fullMonth = "0"+(fullMonth); } //今天 var thisDay = thisYear+"-"+fullMonth+"-"+day; for(var i = 0;i<schedule.length;i++){ for(var j = 0;j<schedule[i].scheuleEvts.length;j++){ var thisDate = null; if(schedule[i].workerSchedule.scheduleType==0){ thisDate = formatDate(new Date(schedule[i].scheuleEvts[j].stime),"yyyy-MM-dd"); if(thisDay==thisDate){ tdHTML.innerHTML = ""; var serviceType = '<p>服务类型:'+schedule[i].scheuleEvts[j].serviceName+'</p>'; if($("#schTname").val() == "CEHUASHI001"){ serviceType = ""; } if(schedule[i].scheuleEvts.length==1||(j+1)==schedule[i].scheuleEvts.length){ tdValue += '<p>预订人:'+schedule[i].scheuleEvts[j].contactName.substring(0,1)+'**</p>'+ serviceType+ '<p>服务价格:'+schedule[i].scheuleEvts[j].servicePrice/100+'</p>'+ '<p>服务时间:'+formatDate(new Date(schedule[i].scheuleEvts[j].stime),"yyyy-MM-dd")+" - "+formatDateForHour(new Date(schedule[i].scheuleEvts[j].stime).getHours(),new Date(schedule[i].scheuleEvts[j].etime).getHours())+'</p> '+ '<p style="padding-left: 60px;">'+schedule[i].scheuleEvts[j].address.replace(",","-")+'</p> '; }else{ tdHTML.getElementsByTagName("span")[0].className = "cur"; tdHTML.innerHTML = tdHTML.innerHTML + '<i class="cur2">已预订</i>'; tdValue += '<p>预订人:'+schedule[i].scheuleEvts[j].contactName.substring(0,1)+'**</p>'+ serviceType+ '<p>服务价格:'+schedule[i].scheuleEvts[j].servicePrice/100+'</p>'+ '<p>服务时间:'+formatDate(new Date(schedule[i].scheuleEvts[j].stime),"yyyy-MM-dd")+" - "+formatDateForHour(new Date(schedule[i].scheuleEvts[j].stime).getHours(),new Date(schedule[i].scheuleEvts[j].etime).getHours())+'</p> '+ '<p style="padding-left: 60px;">'+schedule[i].scheuleEvts[j].address.replace(",","-")+'</p> '+ '<p style="border-bottom:1px dashed #ddd; margin:5px 0px; *height:1px;"></p>'; } } } } if(schedule[i].workerSchedule.scheduleType==1){ thisDate = formatDate(new Date(schedule[i].workerSchedule.date),"yyyy-MM-dd"); if(thisDay==thisDate){ //if(tdHTML.childNodes[0].nodeName == "SPAN"){ // day = thisTd[k].getElementsByTagName("span")[0].innerHTML; // tdHTML.innerHTML = '<span class="gray" id="'+fullMonth+'">'+day+'</span>' // //} tdHTML.getElementsByTagName("span")[0].className = "cur"; tdHTML.getElementsByTagName("span")[0].style.background = "#bfbfbf"; tdHTML.innerHTML = tdHTML.innerHTML + '<i class="cur2">今日忙</i>'; } } if(tdHTML.innerHTML==""){ tdHTML.innerHTML ='<span id="'+fullMonth+day+'" class="cur">'+day2+'</span>' + '<i class="cur2">已预订</i>'+ '<div style="display: none;left:65px; top:-50px;" id="info'+fullMonth+day+'" class="buyInfo">'+tdValue+'</div>'; } tdValue = ""; } } }, error:function(){ // alert("对不起,请稍后再试!"); } }); } function formatDateForHour(st,et){ if (st >= 7 && et <= 14) { return "午宴"; }else if(st >= 18 && et <= 20) { return "晚宴"; }else{ return "全天"; } } 另一个js: var today = new Date(); var thisMonth = today.getMonth()+1; var thisYear= today.getFullYear(); //日历 window.onload = function(){ viewSchedule(); } function viewSchedule (){ var table = document.getElementById("dateTable"); var yearS = document.getElementById("monthInfo"); var dayNum = 0; var fullMonth = thisMonth; if(fullMonth<10){ fullMonth = "0"+(fullMonth); } yearS.innerHTML = thisYear+'年'+(fullMonth)+'月'; //初始化日期 var aTD = table.getElementsByTagName("TD"); //获取本月一号 today.setFullYear(thisYear); today.setMonth(thisMonth-1); today.setDate(1); //日期 dayNum = monthDay(thisYear, thisMonth); //获取当前月第一天是礼拜几 var monthfirstday = today.getDay(); for (var j = 0; j < 42; j++) { aTD[j].innerHTML = ''; } for (var i = 0; i < dayNum; i++) { aTD[i + monthfirstday].innerHTML = '<span id="' + (i + 1) + '">' + (i + 1) + '</span>'; } //获取上一个月有多少天 var exDayNum = monthDay(thisYear, thisMonth - 1); //if(today.getDay()==0) { // var i = 0; // for (i; i < dayNum; i++) { // aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(i + 1)+'</span>'; // } // var k = 1; // for (i; i < 42; i++) { // //aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; // k++; // } //}else if(today.getDay()==1) { // var n = exDayNum - 0; // var i = 0; // for (n; n <= exDayNum; n++) { // //aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; // i++; // } // var j = 0; // for (j; j < dayNum; j++) { // aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; // i++; // } // var k = 1; // for(i;i<42;i++){ // //aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; // k++; // } //}else if(today.getDay()==2) { // var n = exDayNum - 1; // var i = 0; // for (n; n <= exDayNum; n++) { // //aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; // i++; // } // var j = 0; // for (j; j < dayNum; j++) { // aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; // i++; // } // var k = 1; // for(i;i<42;i++){ // // aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; // k++; // } //}else if(today.getDay()==3) { // var n = exDayNum - 2; // var i = 0; // for (n; n <= exDayNum; n++) { // // aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; // i++; // } // var j = 0; // for (j; j < dayNum; j++) { // aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; // i++; // } // var k = 1; // for(i;i<42;i++){ // // aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; // k++; // } //}else if(today.getDay()==4) { // var n = exDayNum - 3; // var i = 0; // for (n; n <= exDayNum; n++) { // // aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; // i++; // } // var j = 0; // for (j; j < dayNum; j++) { // aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; // i++; // } // var k = 1; // for(i;i<42;i++){ // //aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; // k++; // } //}else if(today.getDay()==5) { // var n = exDayNum - 4; // var i = 0; // for (n; n <= exDayNum; n++) { // // aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; // i++; // } // var j = 0; // for (j; j < dayNum; j++) { // aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; // i++; // } // var k = 1; // for(i;i<42;i++){ // // aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; // k++; // } //}else if(today.getDay()==6) { // var n = exDayNum-5; // var i = 0; // for(n;n<=exDayNum;n++){ // //aTD[i].innerHTML = '<span id="'+(thisMonth-1)+'">'+(n)+'</span>'; // i++; // } // var j = 0; // for(j;j<dayNum;j++){ // aTD[i].innerHTML = '<span id="'+thisMonth+'">'+(j + 1)+'</span>'; // i++; // } // var k = 1; // for(i;i<42;i++){ // //aTD[i].innerHTML = '<span id="'+(thisMonth+1)+'">'+(k)+'</span>'; // k++; // } //} //上一个月 function previous (){ var thisM = thisMonth; var thisY= thisYear; if(thisM==1){ thisM = 12; thisY = thisY-1; }else{ thisM = thisM-1; } thisYear = thisY; thisMonth = thisM; viewSchedule(); } //下一个月 function next (){ var thisM = thisMonth; var thisY= thisYear; if(thisM==12){ thisM = 1; thisY = thisY+1; }else{ thisM = thisM+1; } thisYear = thisY; thisMonth = thisM; viewSchedule(); } //是否为闰年 function isLeapYear(year){ if(year%4==0 && year%100!=0){ return true; } else{ if(year%400==0){ return true; } else{ return false; } } } //判断每月有几天 function monthDay(year,month){ if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12 || month==0){ return 31; }else if(month==4 || month==6 || month==9 || month==11){ return 30; }else if(month==2 && isLeapYear(year)){ return 29; }else{ return 28; } } function nowDay(){ var monthStart = document.getElementById("monthStart"); var monthNext = document.getElementById("monthNext"); monthStart.onclick = function(){ previous(); } monthNext.onclick = function(){ next(); } } nowDay(); setSchedule(table); //$("#svrcitys").html(table); } //格式化日期, function formatDate(date,format){ var paddNum = function(num){ num += ""; return num.replace(/^(d)$/,"0$1"); } //指定格式字符 var cfg = { yyyy : date.getFullYear() //年 : 4位 ,yy : date.getFullYear().toString().substring(2)//年 : 2位 ,M : date.getMonth() + 1 //月 : 如果1位的时候不补0 ,MM : paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0 ,d : date.getDate() //日 : 如果1位的时候不补0 ,dd : paddNum(date.getDate())//日 : 如果1位的时候补0 ,hh : date.getHours() //时 ,HH : paddNum(date.getHours()) //时 ,mm : paddNum(date.getMinutes()) //分 ,ss : date.getSeconds() //秒 } format || (format = "yyyy-MM-dd hh:mm:ss"); return format.replace(/([a-z])(1)*/ig,function(m){return cfg[m];}); } var tdValue = ""; //设置档期 function setSchedule(obj) { var pUID = $("#pUID").val(); //var shopId = document.getElementById("shopId").value; //var base = document.getElementById("base").value; //档期时间集合 var fullMonth = thisMonth; if (fullMonth < 10) { fullMonth = "0" + (fullMonth); } var scheduleList = ""; var parameter = 'action=usercalendar&uid=' + pUID + '&thisYear=' + thisYear + '&fullMonth=' + fullMonth; $.ajax({ type: "Post", async: true, cache: false, url: "/ashx/web/web.ashx", data: parameter, dataType: "json", success: function (data) { //档期 // var schedule = data.schedules; //当前月份 var fullMonth; var thisTd = obj.getElementsByTagName("TD"); //for (var k = 0; k < thisTd.length; k++) { // var day = thisTd[k].getElementsByTagName("span")[0].innerHTML; // alert(day); // //用于显示到日历上面 // var day2 = thisTd[k].getElementsByTagName("span")[0].innerHTML; // fullMonth = thisTd[k].getElementsByTagName("span")[0].id; // var tdHTML = thisTd[k]; // if (day < 10) { // day = "0" + (day); // } // if (fullMonth < 10) { // fullMonth = "0" + (fullMonth); // } // //今天 //var thisDay = thisYear + "-" + fullMonth + "-" + day; // if (data.ObjDataList.length > 0) { $.each(data.ObjDataList, function (i, item) { var thisDate = item.MTSDate; var d = new Date(thisDate); var MTSState = item.MTSState; var AMIsOrder = item.AMIsOrder; var PMIsOrder = item.PMIsOrder; var tday = d.getDate(); //if (thisDay == thisDate) { //判断状态 //var busy = ""; //if (item.AMISBusy == 1 && item.PMISBusy == 1) { // busy = "今日忙"; //} //else { // if (item.AMISBusy == 1) { // busy = "上午忙"; // $("#" + tday).addClass("cur"); // $("#" + tday).css({ background: "#bfbfbf" }); // $("#" + tday).append('<i class="cur2">' + busy + '</i>'); // } // else if (item.PMISBusy == 1) { // busy = "下午忙"; // $("#" + tday).addClass("cur"); // $("#" + tday).css({ background: "#bfbfbf" }); // $("#" + tday).append('<i class="cur2">' + busy + '</i>'); // } //} //var yuding = ""; //if (AMIsOrder == 1 && PMIsOrder == 1) { // yuding = "已预订"; //} //else { // if (AMIsOrder ==1) // { // yuding = "AM已约"; // } // else if (PMIsOrder ==1) // { // yuding = "PM已约"; // } //} if (AMIsOrder == 1 && item.MTSAM == "" && PMIsOrder == 1 && item.MTSPM == "") { $("#" + tday).addClass("cur"); $("#" + tday).css({ background: "#bfbfbf" }); $("#" + tday).append('<i class="cur2">今日忙</i>'); } else if (AMIsOrder == 1 && item.MTSAM != "" && PMIsOrder == 1 && item.MTSPM != "") { $("#" + tday).addClass("cur"); $("#" + tday).append('<i class="cur2">已预订</i>'); } else if (AMIsOrder == 1 && item.MTSAM == "") { $("#" + tday).addClass("cur"); $("#" + tday).css({ background: "#bfbfbf" }); $("#" + tday).append('<i class="cur2">上午忙</i>'); } else if (PMIsOrder == 1 && item.MTSPM == "") { $("#" + tday).addClass("cur"); $("#" + tday).css({ background: "#bfbfbf" }); $("#" + tday).append('<i class="cur2">下午忙</i>'); } else if (AMIsOrder == 1 && item.MTSAM != "") { $("#" + tday).addClass("cur"); $("#" + tday).append('<i class="cur2">AM已约</i>'); } else if (PMIsOrder == 1 && item.MTSPM != "") { $("#" + tday).addClass("cur"); $("#" + tday).append('<i class="cur2">PM已约</i>'); } //if (MTSState == 1) { // //tdHTML.getElementsByTagName("span")[0].className = "cur"; // //tdHTML.getElementsByTagName("span")[0].style.background = "#bfbfbf"; // //tdHTML.innerHTML = tdHTML.innerHTML + '<i class="cur2">今日忙</i>'; // $("#" + tday).addClass("cur"); // $("#" + tday).css({ background: "#bfbfbf" }); // if (AMIsOrder == 1 && PMIsOrder == 1) { // $("#" + tday).append('<i class="cur2">今日忙</i>'); // } // else { // if (AMIsOrder == 1) // { // $("#" + tday).append('<i class="cur2">上午忙</i>'); // } // else if (PMIsOrder ==1) // { // $("#" + tday).append('<i class="cur2">下午忙</i>'); // } // } //} //else if (MTSState == 2) { // //tdHTML.getElementsByTagName("span")[0].className = "cur"; // //tdHTML.innerHTML = tdHTML.innerHTML + '<i class="cur2">已预订</i>'; // $("#" + tday).addClass("cur"); // if (AMIsOrder == 1 && PMIsOrder == 1) { // $("#" + tday).append('<i class="cur2">已预订</i>'); // } // else { // if (AMIsOrder == 1) { // $("#" + tday).append('<i class="cur2">AM已约</i>'); // } // else if (PMIsOrder == 1) { // $("#" + tday).append('<i class="cur2">PM已约</i>'); // } // } //} //else { // //tdHTML.getElementsByTagName("span")[0].className = "cur"; // //tdHTML.getElementsByTagName("span")[0].style.background = "#bfbfbf"; // //tdHTML.innerHTML = tdHTML.innerHTML + '<i class="cur2">今日忙</i>'; // $("#" + tday).addClass("cur"); // $("#" + tday).css({ background: "#bfbfbf" }); // $("#" + tday).append('<i class="cur2">今日忙</i>'); //} // } }); // } //} } }); }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>blog式日历控件_www.jb51.net_脚本之家</title> </head> <body> <script type="text/javascript"> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function () { return function () { this.initialize.apply(this, arguments); } } } Object.extend = function (destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Calendar = Class.create(); Calendar.prototype = { initialize: function (container, options) { this.Container = $(container);//容器(table结构) this.Days = [];//日期对象列表 this.SetOptions(options); this.Year = this.options.Year; this.Month = this.options.Month; this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; this.onSelectDay = this.options.onSelectDay; this.onToday = this.options.onToday; this.onFinish = this.options.onFinish; this.Draw(); }, //设置默认属性 SetOptions: function (options) { this.options = {//默认值 Year: new Date().getFullYear(),//显示年 Month: new Date().getMonth() + 1,//显示月 SelectDay: null,//选择日期 onSelectDay: function () { },//在选择日期触发 onToday: function () { },//在当天日期触发 onFinish: function () { }//日历画完后触发 }; Object.extend(this.options, options || {}); }, //上一个月 PreMonth: function () { //先取得上一个月的日期对象 var d = new Date(this.Year, this.Month - 2, 1); //再设置属性 this.Year = d.getFullYear(); this.Month = d.getMonth() + 1; //重新画日历 this.Draw(); }, //下一个月 NextMonth: function () { var d = new Date(this.Year, this.Month, 1); this.Year = d.getFullYear(); this.Month = d.getMonth() + 1; this.Draw(); }, //画日历 Draw: function () { //用来保存日期列表 var arr = []; //用当月第一天在一周中的日期值作为当月离第一天的天数 for (var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay() ; i <= firstDay; i++) { arr.push(" "); } //用当月最后一天在一个月中的日期值作为当月的天数 for (var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate() ; i <= monthDay; i++) { arr.push(i); } var frag = document.createDocumentFragment(); this.Days = []; while (arr.length > 0) { //每个星期插入一个tr var row = document.createElement("tr"); //每个星期有7天 for (var i = 1; i <= 7; i++) { var cell = document.createElement("td"); cell.innerHTML = " "; if (arr.length > 0) { var d = arr.shift(); cell.innerHTML = d; if (d > 0) { this.Days[d] = cell; //判断是否今日 if (this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())) { this.onToday(cell); } //判断是否选择日期 if (this.SelectDay && this.IsSame(new Date(this.Year, this.Month - 1, d), this.SelectDay)) { this.onSelectDay(cell); } } } row.appendChild(cell); } frag.appendChild(row); } //先清空内容再插入(ie的table不能用innerHTML) while (this.Container.hasChildNodes()) { this.Container.removeChild(this.Container.firstChild); } this.Container.appendChild(frag); this.onFinish(); }, //判断是否同一日 IsSame: function (d1, d2) { return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); } }; </script> <style type="text/css"> .Calendar { font-family: Verdana; font-size: 12px; background-color: #e0ecf9; text-align: center; 200px; height: 160px; padding: 10px; line-height: 1.5em; } .Calendar a { color: #1e5494; } .Calendar table { 100%; border: 0; } .Calendar table thead { color: #acacac; } .Calendar table td { font-size: 11px; padding: 1px; } #idCalendarPre { cursor: pointer; float: left; padding-right: 5px; } #idCalendarNext { cursor: pointer; float: right; padding-right: 5px; } #idCalendar td.onToday { font-weight: bold; color: #C60; } #idCalendar td.onSelect { font-weight: bold; } </style> <div class="Calendar"> <div id="idCalendarPre"><<</div> <div id="idCalendarNext">>></div> <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月 <table cellspacing="0"> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody id="idCalendar"></tbody> </table> </div> <script language="JavaScript"> var cale = new Calendar("idCalendar", { SelectDay: new Date().setDate(10), onSelectDay: function (o) { o.className = "onSelect"; }, onToday: function (o) { o.className = "onToday"; }, onFinish: function () { $("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month; var flag = [10, 15, 20]; for (var i = 0, len = flag.length; i < len; i++) { this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick="alert('日期是:" + this.Year + "/" + this.Month + "/" + flag[i] + "');return false;">" + flag[i] + "</a>"; } } }); $("idCalendarPre").onclick = function () { cale.PreMonth(); } $("idCalendarNext").onclick = function () { cale.NextMonth(); } </script> </body> </html>