日历控件的实现

来源:百度文库 编辑:神马文学网 时间:2024/04/28 00:04:17

在Web开发中我们经常会需要开发一些和日历相关的应用,自然需要制作一些日历程序,一些大家伙比如C#,JAVA或是VB.NET这些语言以往都有不少文章和示例介绍了,所以今天我给大家说一下其他常见Web脚步语言中的日历算法逻辑和具体的实现方式,希望对大家有用。

先看看我们的实现目标,就是在网页中通过脚本语言实现如下的日历:

要实现日历就必须用到相关语言中的日期和时间函数,其中最重要的是具有下面功能的两个函数:

  • 能返回指定日期是星期几的函数
  • 能返回指定年份和月份一共有多少天的函数,或者可以返回指定两个日期之间相差多少天的函数

只要语言中具有上面两个功能的函数就可以轻松实现日历。

实现日历的算法逻辑大致如下:

  1. 取得当前要显示的月份的1号是在星期几
  2. 取得当前要显示的月份一共有多少天
  3. 通过HTML的方式生成一个HTML的表格来显示日历(每行显示一周,并根据需要来决定是生成5行还是6行的表格)
  4. 根据显示的月份1号所在星期几空出前面的不属于该月日期的表格单元格
  5. 根据显示的月份1号所在星期几来决定生成表格时从星期几开始生成日历显示(第一天在星期几)
  6. 根据一共有多少天来顺次生成指定天数,另外每生成七个单元格需要加入一个表格的换行
  7. 补足HTML表格空缺的单元格

剩下的就是根据不同语言中具体的函数来实现了:

下面是根据上述算法和逻辑在asp中的具体实现代码:

div,span { font-family: "宋体"; font-size:9pt} 1
 4
 5
 6<%
 7'以下为ASP中通过该日历算法实现的具体代码
 8
 9    '先判断是否指定了一个年份和月份,没有则根据当前的年和月份显示
10    If Request("ReqDate")="" then
11         CurrentDate=Date
12    else
13         CurrentDate=Trim(Request("ReqDate"))
14    end if 
15    pyear=year(CurrentDate)
16    pmonth=month(CurrentDate)
17
18    '以下的代码生成日历显示的表格头内容
19%>
20   
21    
22        '">
23    
24    
25        <%=pyear%>年<%=pmonth%>月
26    
27    
28        >" onclick="JavaScript:location.href='?ReqDate=<%=DateAdd("m",1,CurrentDate)%>'">
29    
30  
31   
32     日
33     一
34     二
35     三
36     四
37     五
38     六
39  
40  
41  <%
42  '由于ASP中没有获取指定月共有多少天的函数,因此我们需要通过其他算法来获得,算法其实很简单,就是计算一下要显示月份的1日至下个月的1日一共相差几天
43    fromDate = FormatDateTime(month(CurrentDate) & "/1/" &  year(CurrentDate)) 
44    toDate = FormatDateTime(DateAdd("m",1,fromDate)) 
45    '获得要显示月份的第一天为周几
46    nunmonthstart=weekday(fromDate)-1
47    '获得要显示的1日至下个月的1日一共相差几天(月份一共有多少天)
48    nunmonthend=DateDiff("d",fromDate,toDate)
49    '判断显示日历需要用几行表格来显示(每行显示7天)
50    if nunmonthstart+nunmonthend<36 then
51         maxi=36
52    else
53         maxi=43
54    end if
55    '循环生成表格并显示
56    i=1
57    do while i58        iv=i-nunmonthstart
59        if i>nunmonthstart and i<=nunmonthend+nunmonthstart then
60            '如果为显示的是今天则用红色背景显示
61            if iv=Day(now) and month(now)=pmonth and year(now)=pyear then
62                response.write( "" & iv & "")
63            else
64                response.write( "" & iv & "")
65            end if
66        else
67            response.write( " ")
68        end if
69
70        '如果能被7整除(每行显示7个)则输出一个换行
71        if i mod 7=0 then
72            response.write( "")
73        end if
74        i=i+1
75    loop
76%>
77
78

具体实现效果如下:

 

 

下面是根据上述算法和逻辑在PHP中的具体实现代码:

 1
 4
 5
 6 7//以下为PHP中通过该日历算法实现的具体代码
 8
 9    //先判断是否指定了一个年份和月份,没有则根据当前的年和月份显示
10    if($ReqDate==""){
11        $pyear=date("Y");
12        $pmonth=date("m");
13        $CurrentDate=date("Y-m-j");
14    }else{
15        $ReqDateStrs = explode("-",$ReqDate );
16        $pyear=$ReqDateStrs[0];
17        $pmonth=$ReqDateStrs[1];
18        $CurrentDate=$ReqDate;
19    }
20
21//以下的代码生成日历显示的表格头内容
22?>
23 
24    
25        '">
26    
27    
28        
29    
30    
31        >" onclick="JavaScript:location.href='?ReqDate='">
32    
33  
34   
35     日
36     一
37     二
38     三
39     四
40     五
41     六
42  
43  
4445    //获得要显示月份的第一天为周几
46    $nunmonthstart=date('w',mktime(0,0,0,$pmonth,1,$pyear));
47    //获得要显示月份一共有多少天
48    $nunmonthend=date('t',mktime(0,0,0,$pmonth,1,$pyear));
49    //判断显示日历需要用几行表格来显示(每行显示7天)
50    if($nunmonthstart+$nunmonthend<36){
51        $maxi=36;
52    }
53    else{
54        $maxi=43;
55    }
56    //循环生成表格并显示
57    for( $i=1; $i <$maxi; $i++)
58    {
59        $iv=$i-$nunmonthstart;
60        if($i>$nunmonthstart && $i<=$nunmonthend+$nunmonthstart) {
61            //如果为显示的是今天则用红色背景显示
62            if($iv==date("d") && date("n")==$pmonth && date("Y")==$pyear){
63                print( "".$iv."" );
64            }else{
65                print( "".$iv."" );
66            }
67        }else{
68            print( " " ); 
69        }
70
71        //如果能被7整除(每行显示7个)则输出一个换行
72        if ($i%7 ==0) {
73            print( "" );
74        }
75    }
76?>
77
78
79
80

具体实现效果如下:

 

下面是根据上述算法和逻辑在NoahWeb中的具体实现代码:

 1<%@ Page language="c#" AutoEventWireup="false" Inherits="NoahWeb.Engine" %>
 2
 5
 6
 7
 8
 9    
10
11    
12
13
14
15
16
17
18
19
20 
21    
22        '">
23    
24    
25        
26    
27    
28        >" onclick="JavaScript:location.href='?ReqDate='">
29    
30  
31   
32     日
33     一
34     二
35     三
36     四
37     五
38     六
39  
40
41
42
43
44
45
46
47
48
49    
50
51    
52
53
54
55
56
57    
58
59    
60    
61        
62    
63        
64    
65
66    
67    
68        
69     
70
71    
72    
73        
74    
75
76
77
78
79
80

具体实现效果如下: