You're here: Snippet Directory » HTML/JavaScript (65)
Language:

JavaScript calendar display

Language: English
Programming Language: JavaScript
Published by: gameboy [not registered]
Last Update: 5/15/2006
Views: 720


Description

Produces a compact HTML month display.

Code

1 <html> 2 <head> 3 <title>JavaScript Calendar Snippet</title> 4 5 <script language="JavaScript" type="text/javascript"> 6 <!-- 7 function write( text ) 8 { 9 document.write( text ); 10 } 11 12 function writeln( line ) 13 { 14 write( line + "\n" ); 15 } 16 17 function drawHeader( h ) 18 { 19 for( var i = 0; i < h.length; i++ ) 20 write( "<td><font color=\"#ffffff\" face=\"Arial,Helvetica\" size=\"-2\">" + h[i] + 21 22 "</font></td>\n" ); 23 } 24 25 function drawMonth( thisday ) 26 { 27 var months = new Array( "January", "February", "March", "April", "May", 28 "June", "July", "August", "September", "October", "November", "December" ); 29 var days = new Array( 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ); 30 31 // leap year? 32 { 33 var next = new Date( thisday.getFullYear(), 1, 29 ); 34 if( next.getDate() == 1 ) 35 days[1] = 28; 36 else 37 days[1] = 29; 38 } 39 40 var first = new Date(thisday.getFullYear(), thisday.getMonth(), 1); 41 42 var last = new Date(thisday.getFullYear(), thisday.getMonth(), 43 days[thisday.getMonth()]); 44 45 write( "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n" ); 46 write( "<caption><b><font face=\"Trebuchet MS\" size=\"-2\">" + months[thisday.getMonth()] + 47 48 "</font></b></caption>\n" ); 49 write( "<tbody>\n" ); 50 51 write( "<tr align=\"center\" bgcolor=\"#666666\">\n" ); 52 drawHeader( new Array("S","M","T","W","T","F","S") ); 53 write( "</tr>\n" ); 54 55 var day = first.getDay(); 56 if( day ) 57 { 58 write( "<tr align=\"center\">" ); 59 // write( "<td bgcolor=\"#e0e0e0\" colspan=\"' + day +"\"></td>" ); 60 for( var i = 1; i <= day; i++ ) 61 write( "<td bgcolor=\"#e0e0e0\"><font color=\"#808080\" face=\"Arial,Helvetica\" 62 63 size=\"-2\">" + (days[(thisday.getMonth()+11)%12] - day + i) + "</font></td>" ); 64 } 65 66 var i; 67 for( i = 1; i <= days[thisday.getMonth()]; i++ ) 68 { 69 if( (day + i) % 7 == 1 ) 70 write("<tr align=\"center\">"); 71 72 if( i == thisday.getDate() ) 73 write("<td bgcolor=\"#ffc800\"><font color=\"#000000\" face=\"Arial,Helvetica\" 74 75 size=\"-2\">&nbsp;" + i + "&nbsp;</font></td>"); 76 else 77 write("<td><font color=\"#000099\" face=\"Arial,Helvetica\" size=\"-2\">&nbsp;" + i + 78 79 "&nbsp;</font></td>"); 80 81 if( (day + i) % 7 == 0 ) 82 write("</tr>\n"); 83 } 84 85 if( (day + i - 1) % 7 != 0 ) 86 { 87 // write( "<td bgcolor=\"#e0e0e0\" colspan=\"" + (7 - ((day+i-1) % 7)) + "\"></td>\n" ); 88 for( var j = 1; j <= 7 - ((day+i-1) % 7); j++ ) 89 write( "<td bgcolor=\"#e0e0e0\"><font color=\"#808080\" face=\"Arial,Helvetica\" 90 91 size=\"-2\">" + j + "</font></td>" ); 92 write("</tr>\n"); 93 } 94 95 write( "</tbody>\n" ); 96 write( "</table>\n" ); 97 } 98 --> 99 </script> 100 101 </head> 102 103 <body> 104 <script language="JavaScript" type="text/JavaScript"> 105 drawMonth( new Date() ); 106 </script> 107 </body> 108 </html>

No comments avaiable

Add a comment

Name *  

Email (won't be displayed) *    

Website  

Comment *  

Sicherheitscode Security Code *    

RSS