主题:想做一个网页calender,请教高人 -- 想念花开
这个calender应该是这样的:当你打开网页显示了这个calender,当天的日期会自动highlight。如果你设定了event,那么有event的日期也会用一个不同的颜色highlight,当你的鼠标指到有event的日期上时候,会自动弹出一个框说明是什么样的event。请问需要用什么来写这个东西?HTML是搞不定的吧?能不能在那里免费download到?
本帖一共被 1 帖 引用 (帖内工具实现)
客户端自然要用到一点JAVASCRIPT。
后台选择就多了,随便一种动态网页设计技术都行,比如JAVA,ASP,PHP,或者PERL,RUBY。。。看你熟悉那一种。当然如果用了AJAX可能更漂亮一些。
具体地说:
总之不建议你重头写一个CALENDAR,网络上很多FREE的JS CODES,随便下载一个按自己的要求改一改就行。
基本全满足你的要求,除了把鼠标放到 event 上,不会直接弹出,需要点一下才会弹出说明是什么样的 event.
能满足你上面的需求,甚至功能还要强很多,而且含源代码。不过不好意思,还是盗版得来的源码。
几年前做过一个在线注册活动的网页,让参与者自己选参加时间,活动不是每天都有,SESSION有一天的也有两天的,所以需要一个CALENDAR,当时自己写了一个,基本框架是这样的:
服备端是JAVA + MS SQL,当然用别的也行
前台用JAVASCRIPT写一个CALENDAR OBJECT,放在一个DIV中,可定制一些东西比如DATE FROM & TO, 字体,颜色,周日和周未宽度,SUNDAY在左边还是右边等等。
METHODS:
drawMe,画基本框架,包括日期,月份和年份的SELECTOR
drawMore,画定制内容,比如活动项目什么的,默认是NULL,让DEVELOPER自己填空
onYearChanged,EVENT HANDLER,换年时的触发器
onMonthChanged,EVENT HANDLER,换月时的触发器
大概就是这样。如果需要我可以提供源码。
The DHTML / JavaScript Calendar
http://www.dynarch.com/projects/calendar/
Gurt JavaScript Calendar
http://calendar.gurtom.com/free
我以前从别的地方偷来的,放在自己的硬盘里,打算有时间再拿出来琢磨。正好看到你们想做,就拿来分享。
以下内容保存为html文件,它要调用一个js文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0033)http://www.csuchen.org/cn/wnl.htm -->
<HTML><HEAD><TITLE>万年历</TITLE><!-- saved from url=(0053)http://www.linkchinese.net/uk/calendar/wnl.gb2312.htm -->
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>.todyaColor {
BACKGROUND-COLOR: aqua
}
</STYLE>
<META content="MSHTML 6.00.2800.1276" name=GENERATOR></HEAD>
<BODY oncontextmenu=self.event.returnValue=false onload=initialize()
onunload=terminate()>
<SCRIPT language=JavaScript><!--
if(navigator.appName == "Netscape" || parseInt(navigator.appVersion) < 4)
document.write("<h1>你的浏览器无法执行此程式。</h1>此程式需在 IE4 以后的版本才能执行!!")
//--></SCRIPT>
<SCRIPT language=javascript src="wannianli_files/rili.js"
tppabs="http://www.huashangbao.de/wnlfiles/rili.js"></SCRIPT>
<DIV id=detail
style="Z-INDEX: 3; FILTER: shadow(color=#333333,direction=135); WIDTH: 140px; POSITION: absolute; HEIGHT: 120px"></DIV>
<CENTER>
<TABLE border=0>
<TBODY>
<TR><!------------------------------ 世界时间 ----------------------------------->
<FORM name=WorldClock>
<TD vAlign=top align=middle width=240 height=340><FONT
style="FONT-SIZE: 9pt" size=2><B>本地时间</B></FONT><BR><SPAN id=LocalTime
style="FONT-SIZE: 9pt; COLOR: #a4221a; FONT-FAMILY: Arial">0000年0月0日 ( )
午 00:00:00</SPAN>
<P><SPAN id=City style="FONT-SIZE: 9pt; WIDTH: 150px">中国</SPAN> <BR><SPAN
id=GlobeTime
style="FONT-SIZE: 9pt; COLOR: #a4221a; FONT-FAMILY: Arial">0000年0月0日 ( )
午 00:00:00</SPAN><BR>
<TABLE style="FONT-SIZE: 10pt; FONT-FAMILY: Wingdings">
<TBODY>
<TR>
<TD align=middle>Ú
<DIV id=map
style="FILTER: Light; OVERFLOW: hidden; WIDTH: 240px; HEIGHT: 120px; BACKGROUND-COLOR: mediumblue"><FONT
id=world
style="FONT-SIZE: 185px; LEFT: 0px; COLOR: green; FONT-FAMILY: Webdings; POSITION: relative; TOP: -26px">ûû</FONT>
</DIV>Ù </TD></TR></TBODY></TABLE><BR><SELECT
style="FONT-WEIGHT: normal; FONT-SIZE: 9pt; WIDTH: 240px; LINE-HEIGHT: normal; FONT-STYLE: normal; BACKGROUND-COLOR: #bcc496; FONT-VARIANT: normal"
onchange=chContinent() name=continentMenu></SELECT><BR><SELECT
style="FONT-WEIGHT: normal; FONT-SIZE: 9pt; WIDTH: 240px; LINE-HEIGHT: normal; FONT-STYLE: normal; BACKGROUND-COLOR: #bcc496; FONT-VARIANT: normal"
onchange=chCountry() name=countryMenu></SELECT></P></TD></FORM><!------------------------------ 万年历 ----------------------------------->
<FORM name=CLD>
<TD align=middle height=340>
<DIV style="Z-INDEX: -1; POSITION: absolute; TOP: 30px"><FONT id=YMBG
style="FONT-SIZE: 100pt; COLOR: #f0f0f0; FONT-FAMILY: 'Arial Black'"> 0000<BR> JUN</FONT>
</DIV>
<TABLE border=0>
<TBODY>
<TR>
<TD bgColor=#a4221a colSpan=7>
<P style="MARGIN-LEFT: 10px"><FONT style="FONT-SIZE: 9pt"
color=#ffffff size=2>西历<SELECT style="FONT-SIZE: 9pt"
onchange=changeCld() name=SY>
<SCRIPT language=JavaScript><!--
for(i=1900;i<2051;i++) document.write('<option>'+i)
//--></SCRIPT>
</SELECT>年<SELECT style="FONT-SIZE: 9pt" onchange=changeCld()
name=SM>
<SCRIPT language=JavaScript><!--
for(i=1;i<13;i++) document.write('<option>'+i)
//--></SCRIPT>
</SELECT>月</FONT> <FONT id=GZ color=#ffff00
size=4></FONT><BR></P></TD></TR>
<TR align=middle bgColor=#ccccff>
<TD width=54>日</TD>
<TD width=54>一</TD>
<TD width=54>二</TD>
<TD width=50>三</TD>
<TD width=54>四</TD>
<TD width=54>五</TD>
<TD width=54>六</TD></TR>
<SCRIPT language=JavaScript><!--
var gNum, color1, color2;
// 星期六颜色
switch (conWeekend) {
case 1:
color1 = 'black';
color2 = color1;
break;
case 2:
color1 = 'green';
color2 = color1;
break;
case 3:
color1 = 'red';
color2 = color1;
break;
default :
color1 = 'green';
color2 = 'red';
}
for(i=0;i<6;i++) {
document.write('<tr align=center>')
for(j=0;j<7;j++) {
gNum = i*7+j
document.write('<td id="GD' + gNum +'" onMouseOver="mOvr(' + gNum +')" onMouseOut="mOut()"><font id="SD' + gNum +'" size=5 face="Arial Black"')
if(j == 0) document.write(' color=red')
if(j == 6) {
if(i%2==1) document.write(' color='+color2)
else document.write(' color='+color1)
}
document.write(' TITLE=""> </font><br><font id="LD' + gNum + '" size=2 style="font-size:9pt"> </font></td>')
}
document.write('</tr>')
}
//--></SCRIPT>
</TBODY></TABLE></TD>
<TD vAlign=top align=middle width=40 height=340><BR><BR><BR>年<BR><BUTTON
style="FONT-SIZE: 9pt" onclick="pushBtm('YD')">▲</BUTTON><BR><BUTTON
style="FONT-SIZE: 9pt" onclick="pushBtm('YU')">◆</BUTTON>
<P>月<BR><BUTTON style="FONT-SIZE: 9pt"
onclick="pushBtm('MD')">▲</BUTTON><BR><BUTTON style="FONT-SIZE: 9pt"
onclick="pushBtm('MU')">◆</BUTTON>
<P><BUTTON style="FONT-SIZE: 9pt" onclick="pushBtm('')">当<BR>月</BUTTON>
<P></P></TD></FORM></TR></TBODY></TABLE></CENTER>
<P class=MsoNormal
style="TEXT-JUSTIFY: inter-ideograph; VERTICAL-ALIGN: bottom; mso-pagination: widow-orphan"
align=center><SPAN
style="FONT-SIZE: 9pt; CURSOR: hand; LETTER-SPACING: 2pt"><FONT face=宋体
color=#800000>日上时起法:甲己还加甲;乙庚丙作初;丙辛从戊起;丁壬庚子居;戊癸壬子行。</FONT></SPAN>
<DIV></DIV></BODY></HTML>
js文件太大,我只好当作mp3上传了,地址在:
http://upload.ccthere.com/audio/0812/11086_05015647.mp3
把它下载后改名为rili.js就可以了,可能要放在一个目录中,这个目录的名字是html的主名加上_files