西西河

主题:想做一个网页calender,请教高人 -- 想念花开

共:💬12 🌺9
全看树展主题 · 分页首页 上页
/ 1
下页 末页
家园 想做一个网页calender,请教高人

这个calender应该是这样的:当你打开网页显示了这个calender,当天的日期会自动highlight。如果你设定了event,那么有event的日期也会用一个不同的颜色highlight,当你的鼠标指到有event的日期上时候,会自动弹出一个框说明是什么样的event。请问需要用什么来写这个东西?HTML是搞不定的吧?能不能在那里免费download到?


本帖一共被 1 帖 引用 (帖内工具实现)
家园 JS + *

客户端自然要用到一点JAVASCRIPT。

后台选择就多了,随便一种动态网页设计技术都行,比如JAVA,ASP,PHP,或者PERL,RUBY。。。看你熟悉那一种。当然如果用了AJAX可能更漂亮一些。

具体地说:

当你打开网页显示了这个calender,当天的日期会自动highlight
JS就可以实现,不过你要以服务器的时间为准就要从后台传个时间过来了。

event
这个EVENT通常存在后台数据库中,需要从SESSION或者别的什么东西引用再显示。

总之不建议你重头写一个CALENDAR,网络上很多FREE的JS CODES,随便下载一个按自己的要求改一改就行。

家园 就用 Google Calendar 就行吧

基本全满足你的要求,除了把鼠标放到 event 上,不会直接弹出,需要点一下才会弹出说明是什么样的 event.

家园 如果不是网页,我发给你一个

能满足你上面的需求,甚至功能还要强很多,而且含源代码。不过不好意思,还是盗版得来的源码。

家园 我正想弄一个来着,不如大家一起讨论一下
家园 老大要在河里做吗?
家园 是。想用来给『各地活动』用
家园 MY 2 CENTS

几年前做过一个在线注册活动的网页,让参与者自己选参加时间,活动不是每天都有,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,换月时的触发器

大概就是这样。如果需要我可以提供源码。

家园 Support
家园 看到俩

The DHTML / JavaScript Calendar

http://www.dynarch.com/projects/calendar/

Gurt JavaScript Calendar

http://calendar.gurtom.com/free

家园 是啊,google calendar足够了
家园 我贴个万年历的程序上来,你修改修改可能就可以用了

我以前从别的地方偷来的,放在自己的硬盘里,打算有时间再拿出来琢磨。正好看到你们想做,就拿来分享。

以下内容保存为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>&Uacute;

<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">&ucirc;&ucirc;</FONT>

</DIV>&Ugrave; </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'">&nbsp;0000<BR>&nbsp;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

关键词(Tags): #万年历
全看树展主题 · 分页首页 上页
/ 1
下页 末页


有趣有益,互惠互利;开阔视野,博采众长。
虚拟的网络,真实的人。天南地北客,相逢皆朋友

Copyright © cchere 西西河