演示效果圖:

?

插件源代碼:

function PL_rili(_id,Option,memo,_edit){//_edit:日曆內的價格可否被編輯
//如果頁面中不包含該對象則退出該擴展方法
if(!_id){return false;}

if(_edit==undefined){_edit=false}
var Today=new Date();
var tY=Today.getFullYear();
var tM=Today.getMonth();
var tD=Today.getDate();
//農曆資料
var lunarInfo=new Array(0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0);
var solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var Gan=new Array("甲","乙","丙","丁","戊","己","庚","辛","壬","癸");
var Zhi=new Array("子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥");
var solarTerm=new Array("小寒","大寒","立春","雨水","驚蟄","春分","清明","穀雨","立夏","小滿","芒種","夏至","小暑","大暑","立秋","處暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");
var sTermInfo=new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);
var nStr1=new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
var cn_mth=new Array("","一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
var cn_day=new Array("","初一","初二","初三","初四","初五","初六","初七","初八","初九","初十","十一","十二","十三","十四","十五","十六","十七","十八","十九","二十","廿一","廿二","廿三","廿四","廿五","廿六","廿七","廿八","廿九","三十","卅一");
var wFtv=new Array("0520 母親節","1144 感恩節");//某月的第幾個星期幾
//國曆節日 *表示放假日
var sFtv=new Array(
"0101*元旦","0111 司法節","0115 藥師節","0214 情人節","0215 戲劇節","0228*和平紀念日","0301 兵役節","0308 婦女節","0312 植樹節","0317 國醫節","0320 郵政節",
"0321 氣象節","0325 美術節","0326 廣播節","0329 青年節","0330 出版節","0401 愚人節","0404*兒童節","0405*清明節","0408 衛生節","0501 勞動節","0504 文藝節",
"0505 舞蹈節","0512 護士節","0603 禁煙節","0606 水利節","0609 鐵路節","0615 警察節","0701 漁民節","0711 航海節","0808 父親節","0814 空軍節","0901 記者節",
"0903 軍人節","0909 律師節","0913 法律日","0928 教師節","1006 老人節","1010*國慶日","1021 華僑節","1024 聯合國日","1025 光復節","1031 榮民節","1101 商人節",
"1111 工業節","1112 國父誕辰","1121 防空節","1205 海員節","1210 人權節","1212 憲兵節","1225*行憲紀念日","1227 建築師節","1228 電信節","1231 受信節"
);
//農曆節日 *表示放假日
var lFtv=new Array(
"0100*除夕","0101*春節","0102*回娘家","0103*祭祖","0104 迎神","0105 開市","0109 天公生","0115 元宵節","0202 土地公生","0219 觀世音誕辰","0323 媽祖生日",
"0408 浴彿節","0505*端午節","0701 開鬼門","0707 七夕","0715 中元節","0800 關鬼門","0815*中秋節","0909 重陽節","1208 臘八節","1216 尾牙","1224 送神"
);
//畫月曆
Show(tY,tM,tD);
function Show(_y,_m,_d){
var i,sD;
var cld=new core(_y,_m);
Ganzhi((_y-1900)*12 + _m +14);
css='<style type="text/css">';
css+='#PL_rili_tit{width:100%;font-family:Verdana,arial;font-size:15px;font-weight:bold;color:#444;position:relative;letter-spacing:2px;}';
css+='#PL_rili_tit div{margin-bottom:4px;color:#486297;}';
css+='#PL_rili_tit .btn{width:auto;background:none repeat scroll 0 0 #637BAD;border-color:#637BAD #28447E #637BAD #FFF;border-style:solid;border-width:0 0 0 1px;color:#FFF;font-size:13px;font-weight:bold;height:23px;padding:3px 10px;cursor:pointer;}';
css+='#PL_rili_box{width:100%;font-family:Verdana,arial,Pmingliu;font-size:12px;color:#444;position:relative;border:1px solid #486297;}';
css+='#PL_rili_box td{text-align:center;}#PL_rili_box input{border-width:1px;width:98%;}';
css+='#PL_rili_box #r1 td{border-right:1px solid #D6D6D6;background-color:#637BAD;color:#EEE;font-weight:bold;padding:4px 0;text-align:center;vertical-align:top;}';
css+='#PL_rili_box #r2{border-width:0 1px 1px 1px;border-color:#EEE #AAA #EEE #AAA;border-style:solid;height:55px;vertical-align:top;color:#444;}';
css+='#PL_rili_box #r2 td{border-right:1px solid #FFF;border-bottom:1px solid #FFF;}';
css+='#PL_rili_box #r2 div{background-color:#EEE;overflow:hidden;position:relative;width:100%;padding:2px 0;}';
css+='#PL_rili_box #r2 .a{float:right;padding-right:3px;font-size:12px;font-weight:normal;}';
css+='#PL_rili_box #r2 .b{float:left;}#PL_rili_box #r2 .b b{font-size:13px;}#PL_rili_box #r2 .b em{color:#888;font-style:normal;font-size:12px;}';
css+='#PL_rili_box #r2 .c{color:#333;float:left;text-align:left;text-indent:4px;width:100%;font-size:12px;font-weight:normal;}';
css+='</style>';
css+='<div id="PL_rili_tit">';
css+='<div style="float:right;"><button class="btn" id="del">?</button><button class="btn" id="today">本月</button><button class="btn" id="add">?</button></div>';
css+='<div>'+_y+'年'+(_m+1)+'月'+_d+'日 ';
if(_y>1911){css+='民國'+(((_y-1911)==1)?'元':_y-1911)+'年'+(_m+1)+'月 ';}
css+=Ganzhi(_y-1900+36)+'年 '+Ganzhi((_y-1900)*12+_m+14)+'月';
css+='</div><input type="hidden" id="y_" value="'+_y+'"><input type="hidden" id="m_" value="'+(_m+1)+'"></div>';
css+='<table id="PL_rili_box" border="0" cellspacing="0" cellpadding="0">';//星期
css+='<tr id="r1">';
for(i=0;i<7;i++){css+='<td style="width:14.2857%;">'+nStr1[i]+'</td>';}
css+='</tr>';
//42天
css+='<tr id="r2">';
for(i=0;i<42;i++){
sD=i-cld.firstWeek;
if(sD>=0 && sD < cld.length){
css+='<td';
//顯示今天的顏色
css+=(cld[sD].bColor)?' style="background-color:'+cld[sD].bColor+';">':'>';
css+='<div';
if(cld[sD].bColor || cld[sD].cColor){
//顯示節假日紅色或今天的顏色
css+=(cld[sD].cColor)?' style="background-color:'+cld[sD].cColor+';"':' style="background-color:'+cld[sD].bColor+';"';
}
css+='>';
//農曆
css+='<span class="a">';
css+=(Option[0])?cld[sD].JieRi+' ':''; //節日
css+=(Option[1])?' '+cld[sD].Ganzhi:''; //干支
css+='</span>';
//公曆
css+='<span class="b"';
css+=(Option[3])?' style="color:'+cld[sD].aColor+'"':'';
css+='><b>'+(sD+1)+'日</b><em>';
if(Option[2]){ //農曆
if(cld[sD].lDay==1){
if(cld[sD].RnYue){css+='閏';}
css+=cn_mth[cld[sD].lMonth]; //顯示農曆月份
}else{
if(cld[sD].JieQi){
css+=cld[sD].JieQi; //顯示農曆節氣
}else{
css+=cn_day[cld[sD].lDay]; //顯示農曆日期
}
}
}
css+='</em></span></div>';
//房價
css+='<span id="'+_y+'-'+(_m+1)+'-'+(sD+1)+'" class="c"></span>';
css+='</td>';
}else{
css+='<td>&nbsp;</td>';
}
if((i%7==6) && i<41){
if((sD+2)>cld.length){break;}//css+='</tr><tr id="r2">';
}
if((i+1)%7==0 && i<41){css+='</tr><tr id="r2" name="'+i+'">';}
}
css+='</tr></table>';
$(_id).set('html',css);
//調整佈局
$("PL_rili_box").getElementById("r1").getLast("td").setStyle("border-right","none");
//手工修改月份
$("PL_rili_tit").getElementById("del").addEvent('click',function(){Press("-");});
$("PL_rili_tit").getElementById("add").addEvent('click',function(){Press("+");});
$("PL_rili_tit").getElementById("today").addEvent('click',function(){Press("=");});

}
//手工修改月份
function Press(_t){
try{
hiddenY=parseInt($("PL_rili_tit").getElementById("y_").getProperty("value"));
hiddenM=parseInt($("PL_rili_tit").getElementById("m_").getProperty("value"));
}catch(e){
hiddenY=tY;hiddenM=tM;
}
hiddenM--;
switch(_t.toLowerCase()){
case "-":
if(hiddenM>0){hiddenM--;}else{hiddenM=11;if(hiddenY>0){hiddenY--;}}
break;
case "+":
if(hiddenM<11){hiddenM++;}else{hiddenM=0;hiddenY++;}
break;
case "=":
hiddenY=tY;hiddenM=tM;
break;
}
$(_id).set('html','');
Show(hiddenY,hiddenM,tD);
}
//傳回月曆物件 (y年,m+1月)
function core(y,m){
var sDObj,lDObj,lY,lM,lD=1,lL,lX=0,tmp1,tmp2;
var lDPOS=new Array(3);
var n=0;
var firstLM=0;
sDObj=new Date(y,m,1); //當月一日日期
this.length=solarDays(y,m); //國曆當月天數
this.firstWeek=sDObj.getDay(); //國曆當月1日星期幾
for(var i=0;i<this.length;i++){
if(lD>lX){
sDObj=new Date(y,m,i+1); //當月一日日期
lDObj=new Lunar(sDObj); //農曆
lY=lDObj.year; //農曆年
lM=lDObj.month; //農曆月
lD=lDObj.day; //農曆日
lL=lDObj.RnYue; //農曆是否閏月
lX=lL?leapDays(lY):monthDays(lY,lM); //農曆當月最後一天
if(n==0){firstLM=lM;}
lDPOS[n++]=i-lD+1;
}
this[i]=new calElement(lY,lM,lD++,lL,'#444','','','','&nbsp;',''); //年,月,日,閏月,公曆顏色,背景色,節氣
this[i].Ganzhi=Ganzhi(lDObj.dayCyl++); //天干地支
if((i+this.firstWeek)%7==0){this[i].aColor='red';} //週日顏色
if((i+this.firstWeek)%7==6){this[i].aColor='red';} //週六顏色
//if((i+this.firstWeek)%14==13){this[i].aColor='red';} //週休二日顏色
}
// 節氣
this[sTerm(y,m*2)-1].JieQi+=solarTerm[m*2]+' ';
this[sTerm(y,m*2+1)-1].JieQi+=solarTerm[m*2+1]+' ';
// 顯示國曆節日
for(i in sFtv){
if(typeOf(sFtv[i])=='string'){
if(sFtv[i].match(/^(\d{2})(\d{2})([\s\*])(.+)$/)){
if(Number(RegExp.$1)==(m+1)){
this[Number(RegExp.$2)-1].JieRi+=RegExp.$4;
if(RegExp.$3=='*'){this[Number(RegExp.$2)-1].cColor='#ED9495';}
}
}
}
}
//顯示月週節日
for(i in wFtv){
if(typeOf(wFtv[i])=='string'){
if(wFtv[i].match(/^(\d{2})(\d)(\d)([\s\*])(.+)$/)){
if(Number(RegExp.$1)==(m+1)){
tmp1=Number(RegExp.$2);tmp2=Number(RegExp.$3);
this[((this.firstWeek>tmp2)?7:0) + 7*(tmp1-1) + tmp2 - this.firstWeek].JieRi+=RegExp.$5;
}
}
}
}
//顯示農曆節日
for(i in lFtv){
if(typeOf(lFtv[i])=='string'){
if(lFtv[i].match(/^(\d{2})(.{2})([\s\*])(.+)$/)){
tmp1=Number(RegExp.$1)-firstLM;
if(tmp1==-11){tmp1=1;}
if(tmp1 >=0 && tmp1<n){
tmp2=lDPOS[tmp1] + Number(RegExp.$2)-1;
if(tmp2 >=0 && tmp2<this.length){this[tmp2].JieRi+=RegExp.$4;if(RegExp.$3=='*'){this[tmp2].cColor='#ED9495';}}
}
}
}
}
//黑色星期五
if((this.firstWeek+12)%7==5){this[12].JieRi+='黑色星期五';}
//今日顏色
if(y==tY && m==tM){this[tD-1].bColor='#93C162';}
}
//傳回農曆 y年的總天數
function lYearDays(y){
var i,sum=348;
for(i=0x8000;i>0x8;i>>=1){sum+=(lunarInfo[y-1900] & i)?1:0;}
return(sum+leapDays(y));
}
//傳回農曆 y年閏月的天數
function leapDays(y){
if(leapMonth(y)){return((lunarInfo[y-1900] & 0x10000)?30:29);}
else{return(0);}
}
//傳回農曆 y年閏哪個月 1-12 ,沒閏傳回 0
function leapMonth(y){
return(lunarInfo[y-1900] & 0xf);
}
//傳回農曆 y年m月的總天數
function monthDays(y,m){
return((lunarInfo[y-1900] & (0x10000>>m))? 30: 29);
}
//得知某天星期幾 getWeek("2011/4/14");
function getWeek(_day){
var day = new Date(Date.parse(_day));
return(day.getDay());
}
//算出農曆,傳入日期物件,傳回農曆日期物件
//該物件屬性有 .year .month .day .RnYue .dayCyl .monCyl
function Lunar(objDate){
var i,leap=0,temp=0;
var baseDate=new Date(1900,0,31);
var offset=(objDate - baseDate)/86400000;
this.dayCyl=offset + 40;
this.monCyl=14;
for(i=1900;i<2050 && offset>0;i++){
temp=lYearDays(i);
offset-=temp;
this.monCyl+=12;
}
if(offset<0){offset+=temp;i--;this.monCyl-=12;}
this.year=i;
leap=leapMonth(i); //閏哪個月
this.RnYue=false;
for(i=1;i<13 && offset>0;i++){
if(leap>0 && i==(leap+1) && this.RnYue==false){//閏月
--i;this.RnYue=true;temp=leapDays(this.year);
}else{
temp=monthDays(this.year,i);
}
//解除閏月
if(this.RnYue==true && i==(leap+1)){this.RnYue=false;}
offset-=temp;
if(this.RnYue==false){this.monCyl++;}
}
if(offset==0 && leap>0 && i==leap+1){
if(this.RnYue){
this.RnYue=false;
}else{
this.RnYue=true;--i;--this.monCyl;
}
}
if(offset<0){offset+=temp;--i;--this.monCyl;}
this.month=i;
this.day=offset+1;
}
//傳回國曆 y年某m+1月的天數
function solarDays(y,m){
if(m==1){
return(((y%4==0) && (y%100 !=0) || (y%400==0))?29:28);
}else{
return(solarMonth[m]);
}
}
// 傳入 offset 傳回干支,0=甲子
function Ganzhi(num){
return(Gan[num%10]+Zhi[num%12]);
}
// 月曆屬性
function calElement(lYear,lMonth,lDay,RnYue,aColor,bColor,cColor,JieQi,JieRi,Ganzhi){
this.lYear=lYear;
this.lMonth=lMonth;
this.lDay=lDay; //日,農曆
this.RnYue=RnYue; //是否閏月
this.aColor=aColor; //週六周日紅字顏色
this.bColor=bColor; //今天的背景色
this.cColor=cColor; //公曆農曆節假日放假時的顏色
this.JieQi=JieQi; //節氣
this.JieRi=JieRi; //節日
this.Ganzhi=Ganzhi; //日期的天干地支搭配
}
// 某年的第n個節氣為幾日(從0小寒起算)
function sTerm(y,n){
var offDate=new Date((31556925974.7*(y-1900) + sTermInfo[n]*60000) + Date.UTC(1900,0,6,2,5));
//var offDate=new Date((31556925187.47072*(y-1900) + sTermInfo[n]*60000) + Date.UTC(1900,0,6,2,5));
if(y==2006){//針對 2006 年調整
if(n==8 || n==14){offDate=new Date(offDate -86400 * 1000);}
}
return(offDate.getUTCDate());
}
}

調用方法:

//用法:
option=new Array(true,false,true,false);//[0]:是否顯示節日;[1]:是否顯示天干地支;[2]:是否顯示農歷;[3]:是否顯示法定節日;
memo=new Array(518,158);//旅館id,房型id
PL_rili('rili',option,memo,true);

總結

以上是生活随笔為你收集整理的我写的万年历插件(含天干地支,农历,阳历,节气,各种节假日等)，基于MooTools 1.4的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。