西西河

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

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

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


    本帖一共被 1 帖 引用 (帖内工具实现)
    • 复 想做一个网页calender，请教高人
      家园 看到俩

      The DHTML / JavaScript Calendar

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

      Gurt JavaScript Calendar

      http://calendar.gurtom.com/free

    • 复 想做一个网页calender，请教高人
      家园 我正想弄一个来着，不如大家一起讨论一下
      • 复 我正想弄一个来着，不如大家一起讨论一下
        家园 我贴个万年历的程序上来，你修改修改可能就可以用了

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

        以下内容保存为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): #万年历，
      • 复 我正想弄一个来着，不如大家一起讨论一下
        家园 老大要在河里做吗？
        • 复 老大要在河里做吗？
          家园 是。想用来给『各地活动』用
          • 复 是。想用来给『各地活动』用
            家园 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，换月时的触发器

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

    • 复 想做一个网页calender，请教高人
      家园 如果不是网页，我发给你一个

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

    • 复 想做一个网页calender，请教高人
      家园 就用 Google Calendar 就行吧

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

    • 复 想做一个网页calender，请教高人
      家园 JS + *

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

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

      具体地说：

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

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

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

分页树展主题 · 全看首页 上页
/ 1
下页 末页


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

Copyright © cchere 西西河

版面群落 趣味社区 帮助 常见问题 网站简介 基本河规 隐私条款 使用条款 广告说明