我修改后的JavaScript日历！

最新推荐文章于 2025-08-11 19:52:03 发布

weixin_30608503

最新推荐文章于 2025-08-11 19:52:03 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/coolar/archive/2006/07/29/462772.html

本文介绍了一款使用JavaScript和CSS实现的日历插件，该插件可通过简单的代码嵌入到网页中，并支持链接到特定文档的功能。文章分享了完整的源代码及如何在网页中调用该日历的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多人在做博客的时候都会在自己的页面里加入一个日历，最近我也给做的网站里加入了一个。先前在网上收索了一翻关于此的源代码，看了下效果，感觉大多不尽如人意。偶然在一国外的网站上看见了一个不错的日历，主要是通过JavaScript中嵌入CSS来实现的，其中插入相应的代码还可以链接到自己的文档，相对来说还不错了。源码经过我修改了一番，现在此贴出，与大家共享。

核心脚本文件代码如下：

// 头部区域class设置

document.write("<style type=text/css>\

<!--\

.cld_head_month {font-size: 11px;color: #5B557C; font-family: Verdana, Arial, Helvetica, sans-serif;}\

.cld_title {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;}\

.cld_head_1 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CE5131;text-align: center; Height: 18px;Width: 20px;}\

.cld_head_2 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center;Width: 20px; }\

.cld_head_3 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center; Width: 20px;}\

.cld_head_4 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center; Width: 20px;}\

.cld_head_5 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center; Width: 20px;}\

.cld_head_6 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center; Width: 20px;}\

.cld_head_7 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #0088C1;text-align: center;Width: 20px; }\

.day_2 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center; Height: 18px;}\

.day_3 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\

.day_4 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\

.day_5 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\

.day_6 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\

.day_1 {color: #CE5131; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px; TEXT-DECORATION: none; text-align: center;Height: 18px;}\

.day_7 {font-size: 11px; color: #0088C1; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\

.today{background-Color: #D0E6EF}\

-->\

</style>\

");

var c_y,c_m,c_d;

var page_span_id;

function calendar_url(year,month,day,link_name,css_class)

{

month++;

if (month <10)

{

month="0"+month;

};

return link_name ;

}

function getCalendar(year,month,day)//month:0-11

{

//头部区域class配置

headClassPrefix = "cld_head_";//css类名前缀,则须存在cld_head_1,cld_head_2

.,cld_head_7这七个class

headData = Array("S","M","T","W","T","F","S");

//日期区域class配置

dayClassPrefix = "day_";//css类名前缀,须存在day_1

..day_7这些class

//链接格式化的回调函数名称

linkFormatFunction = "calendar_url";//函数参数为(年,月,日,链接名称)

//头部的显示

true_month = parseInt(month,10) + 1;

if( true_month >=10 )

print_month=true_month;

else

print_month="0"+true_month;

result = "<TABLE border=0 align=center cellpadding=0 cellspacing=1>";

result += "<TR><TD colspan=7 align=center class=cld_head_month><a href=\"javascript:cldSetYear(-1);\" class=cld_title><font style=\"font-family:Webdings;cursor:hand\">3</font></a>年<a href=\"javascript:cldSetYear(1);\" class=cld_title><font style=\"font-family:Webdings;cursor:hand\">4</font></a>  " + year + "." + print_month + "   <a href=\"javascript:cldSetMonth(-1);\" class=cld_title><font style=\"font-family:Webdings;cursor:hand\">3</font></a>月<a href=\"javascript:cldSetMonth(1);\" class=cld_title><font style=\"font-family:Webdings;cursor:hand\">4</font></a></TD></TR>";

result += "<TR>";

for( i = 1 ; i <= 7 ; i ++ )

{

result +="<TD class=" + headClassPrefix + "" + i + ">" + headData[ i-1 ] +"</a>";

}

result += "</TR><TR>";

var current_date = new Date(year,month,1);

firstweekday = current_date.getDay();//得到本月第一天的星期数,0表示星期天

var now = new Date();

if(current_date.getYear() == now.getYear() && current_date.getMonth()==now.getMonth())

now_in_month=true;

else

now_in_month=false;

for( i = 1 ; i <= firstweekday ; i ++ )

{

result += "<TD class="+ dayClassPrefix + "" + i +"></TD>";

}

for( i = 1;i<= 7 - firstweekday;i ++ )

{

weekday = i + firstweekday;

css_class = dayClassPrefix + "" + weekday ;

link_exec = "link=" + calendar_url + "(" + year + "," + month + "," + i + "," + i + ",'" +css_class+"')" ;

eval(link_exec);

if(now_in_month && i == now.getDate())

today="today";

else

today="";

result += "<TD class='" + css_class + " " + today + "'>" + link + "</TD>";

}

result += "</TR><TR>";

var last_day = new Date(year,month+1,0);//下个月的0日即为本月的最后一日

day_num = last_day.getDate();

weekday = 1;

for( ; i<= day_num; i ++ )

{

if( weekday == 8 )

{

result += "</TR><TR>";

weekday = 1;

}

css_class = dayClassPrefix + "" + weekday ;

link_exec = "link=" + calendar_url + "(" + year + "," + month + "," + i + "," + i + ",'" +css_class+"')" ;

eval(link_exec);

if(now_in_month && i == now.getDate())

today="today";

else

today="";

result += "<TD class='" + css_class + " " + today +"'>" + link + "</TD>";

weekday ++ ;

}

result += "</TR>";

result += "</TABLE>";

return result;

}

function setSpanHtml(span_id,html)

{

span=document.getElementById(span_id);

span.innerHTML=html;

}

function showCalendar(span_id)

{

init_calendar();

year = c_y;

month = c_m;

day = c_d;

html = getCalendar(year,month,day);

setSpanHtml(span_id,html);

page_span_id = span_id;

c_y = year;

c_m = month;

c_d = day;

}

function cldSetMonth( factor)//往前/后调动月份

{

c_m += factor;

if( c_m >= 12)

{

c_m %= 12;

c_y ++;

}

if(c_m < 0 )

{

c_m = -c_m ;

c_m %= 12;

c_m = 12 - c_m;

c_y --;

}

year = c_y ;

month = c_m ;

day = c_d ;

setCldPara();

span_id = page_span_id;

html = getCalendar(year,month,day);

setSpanHtml(span_id,html);

}

function cldSetYear( factor )//往前/后调动年

{

c_y += factor;

year = c_y ;

month = c_m ;

day = c_d ;

setCldPara();

span_id = page_span_id;

html = getCalendar(year,month,day);

setSpanHtml(span_id,html);

}

function init_calendar()

{

if( getCookie("cld_c_y")=="" )

{

var today = new Date();

c_y = today.getYear();

c_m = today.getMonth();

c_d = today.getDate();

setCldPara();

}

else

{

getCldPara();

}

function getCldPara()

{

c_y = parseInt( getCookie("cld_c_y") , 10);

c_m = parseInt( getCookie("cld_c_m") , 10 );

c_d = parseInt( getCookie("cld_c_d") , 10);

}

function setCldPara()

{

setCookie("cld_c_y",c_y,60*60*24*365);

setCookie("cld_c_m",c_m,60*60*24*365);

setCookie("cld_c_d",c_d,60*60*24*365);

}

//=============Cookie 操作

//*

function setCookie (name, value, expires)

{

var expdate=new Date();

expdate.setTime(expdate.getTime()+(expires*1000));

document.cookie = name + "=" + escape(value) + "; expires=" + expdate.toGMTString() + ";";

}

function getCookie(name)

{

var search;

search = name + "="

offset = document.cookie.indexOf(search)

if (offset != -1)

{

offset += search.length ;

end = document.cookie.indexOf(";", offset) ;

if (end == -1)

end = document.cookie.length;

return unescape(document.cookie.substring(offset, end));

}

else

return "";

}

function deleteCookie(name)

{

setCookie(name, "",-86400*1000*1);

}

//==============================================Cookie 结束

页面调用：
在页面插入下列代码：

<!--

showCalendar("calendar");

-->

</script>

然后在需要调用日历的地方用下列代码调用。

转载于:https://www.cnblogs.com/coolar/archive/2006/07/29/462772.html