想拥有像我的blog一样的日历吗？不但有日历的功能，更可链接到当日你所写的所有日志。
首先在 选项->配置->定制CSS选择器 中的加入如下样式代码：
/*calendar css*/
@charset "utf-8";
/* w 165px h 120px*/
.calendar {width:165px;height:120px;border:1px solid #000000;background-color:#0000CC;table-layout:fixed;
}
.calendar .cal{text-align:center;font-family:tahoma;font-size:10px;
}
.calendar .focus{color:#ff0000;font-weight:bolder;
}
#csdnCal table{table-layout:fixed;
}
#csdnCal td{background-color:#ffffff;
}
#csdnCal td,th{text-align:center;font-family:tahoma;font-size:10px;
}
#csdnCal th{height:17px;color:#ffffff;border-bottom:1px solid #000000;
}
#csdnCal a{color:#000000;text-decoration:underline
}
#csdnCal button{border-width:1px;height:14px;width:15px;padding-top:-5px;background:#eeeeee;position:relative;
}
#csdnCal span{font-family:webdings;font-size:9px;top:-3px;left:1px;position:absolute;cursor:hand;
}
/*end of calendar css*/
然后在 静态声明/新闻 中加入javascript：
<script lnguage="Javascript">
function calendar(objName,name,date,width,height){
this.objName=objName;
this.calendarName=name!=null?name.toString():'calendar';
this.width=width!=null?width:'100%';
this.height=height!=null?height:'100%';
this.dayName=['日','一','二','三','四','五','六'];
this.nowDate=new Date();
this.dateTime=date!=null?date:new Date();
this.str='';
this.dateTable='';
this.days=31;
this.pastDays=0;
this.generated=false;
this.generate=generate;
this.getTable=getTable;
this.focusDate=focusDate;
this.attachLink=attachLink;
this.refresh=refresh;
this.previousMonth=previousMonth;
this.nextMonth=nextMonth;
this.setDate=setDate;
this.afterRefresh=function(){};
function generate(date){
this.str='<table id="'+this.calendarName+'" class="cal" cellspacing="0" cellpadding="2" border="0" width="'
+this.width+'" height="'
+this.width+'"><tr><th onselectstart="return(false)"><font style="font-size:9pt">'
+this.dayName.join('</th><th onselectstart="return(false)"><font style="font-size:9pt">')+'</font></th></tr>';
this.dateTime=date!=null?new Date(date):this.dateTime;
this.days=new Date(this.dateTime.getYear(),this.dateTime.getMonth()+1,0).getDate();
this.pastDays=new Date(this.dateTime.getFullYear()+'/'+(this.dateTime.getMonth()+1)+'/1').getDay();
this.str+='<tr><td colspan="7" id="'+this.calendarName+'Td" style="filter:blendtrans(duration=0.3)">';//滤镜，转换月份时的效果。
this.getTable();
this.str+=this.dateTable+'</td></tr></table>';
this.generated=true;
return this.str;
}
function getTable(){
this.dateTable='<table width="100%" height="100%" cellspacing="2" cellpadding="1" class="caltb"><tr>'
+new Array(this.pastDays+1).join('<td></td>');
for(var i=1;i<=this.days;i++){
var monthValue = (this.dateTime.getMonth()+1);
if(monthValue <10) monthValue="0"+monthValue;
var dayValue = i;
if(i<10) dayValue ="0"+dayValue;
var openurl = '<td id="'+this.calendarName+i+'">'+'<a href="http://blog.csdn.net/'+this.channel+'/archive/'+this.dateTime.getFullYear()+'/'+monthValue+'/'+dayValue+'.aspx">'+i+'</a></td>';
var ropenurl = '<td id="'+this.calendarName+i+'">'+'<a href="http://blog.csdn.net/'+this.channel+'/archive/'+this.dateTime.getFullYear()+'/'+monthValue+'/'+dayValue+'.aspx"><font color="red">'+i+'</font></a></td>';
var closeurl='<td id="'+this.calendarName+i+'">'+i+'</td>';
if(this.dateTime.getFullYear() > this.nowDate.getFullYear())
{
this.dateTable+=closeurl;
}
else
if(this.dateTime.getFullYear()== this.nowDate.getFullYear())
{
if(this.dateTime.getMonth() > this.nowDate.getMonth())
{
this.dateTable+=closeurl;
}
else
if(this.dateTime.getMonth() == this.nowDate.getMonth())
{
if(i<=this.nowDate.getDate())
{
if(i == this.nowDate.getDate())
{
this.dateTable+=ropenurl;
}
else
this.dateTable+=openurl;
}
else
{
this.dateTable+=closeurl;
}
}
else
{
this.dateTable+=openurl;
}
}
else
this.dateTable+=openurl;
if((i+this.pastDays)%7==0)this.dateTable+='</tr><tr>';
}
for(var i=1;i<=37-this.days-this.pastDays;i++){
this.dateTable+='<td></td>';
if((i+this.pastDays+this.days)%7==0)this.dateTable+='</tr><tr>';
}
//控制条件，可以不显示某年某月前的日历（去掉注释即可）
// if((this.dateTime.getFullYear()<=2004) && (this.dateTime.getMonth()<9))
// {
// this.dateTable+='<td><button hidefocus="true"><span>3</span></button></td>'
// +'<td colspan="2">'+this.dateTime.getFullYear().toString().bold()+'</td>'
// +'<td>'+(this.dateTime.getMonth()+1).toString().bold()+'</td>'
// +'<td><button onmouseup="void('+this.objName+'.nextMonth())" hidefocus="true"><span>4</span></button></td>'
// +'</tr></table>';
// }
// else
// {
this.dateTable+='<td><button onmouseup="void('+this.objName+'.previousMonth())" hidefocus="true"><span>3</span></button></td>'
+'<td colspan="2">'+this.dateTime.getFullYear().toString().bold()+'</td>'
+'<td>'+(this.dateTime.getMonth()+1).toString().bold()+'</td>'
+'<td><button onmouseup="void('+this.objName+'.nextMonth())" hidefocus="true"><span>4</span></button></td>'
+'</tr></table>';
// }
return this.dateTable;
}
function focusDate(date){
try{
eval(this.calendarName+(date!=null?date|0:new Date().getDate())+'.className="focus"');
return(true);
} catch(e) { return(false); }
}
function attachLink(date,link,target,title){
try{
eval(this.calendarName+(date!=null?date|0:new Date().getDate())
+'.innerHTML="<a href=\\"'+link+'\\"'
+' target=\\"'+(target!=null?target:'_self')+'\\"'
+' title=\\"'+(title!=null?title:'')+'\\">'+date.toString()+'</a>"');
return(true);
} catch(e) { alert(e.message);return(false); }
}
function refresh(){
try{
eval(this.calendarName+'Td.filters[0].apply()');
eval(this.calendarName+'Td.innerHTML=\''+this.getTable()+'\'');
eval(this.calendarName+'Td.filters[0].play()');
this.afterRefresh();
return(true);
} catch(e) { return(false); }
}
function previousMonth(){
try{
this.dateTime.setMonth(this.dateTime.getMonth()-1)
this.generate();
this.refresh();
return(true);
} catch(e) { return(false); }
}
function nextMonth(){
try{
this.dateTime.setMonth(this.dateTime.getMonth()+1)
this.generate();
this.refresh();
return(true);
} catch(e) { return(false); }
}
function setDate(dateStr){
try{
this.dateTime=new Date(dateStr);
return(true);
} catch(e) { return(false); }
}
}
</script>
//创建日历
<div id="csdnCal" class="calendar">
<script lnguage="Javascript">
var csdnBlogCalendar=new calendar("csdnBlogCalendar","csdnBlogCal");
csdnBlogCalendar.channel='passants';//这里注意，请改成你的csdn blog的用户名！
document.write(csdnBlogCalendar.generate(null));
csdnBlogCalendar.focusDate();
</script>
</div>
OK，就是这么简单，你马上就能拥有一个非常酷且功能不错的日历了。 
|
本类阅读TOP10