Web Style Press, Best Practices from all the Web, Build Better Websites » calendar http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 Advanced JS Calendar http://www.webstylepress.com/advanced-js-calendar/ http://www.webstylepress.com/advanced-js-calendar/#comments Thu, 06 Nov 2008 08:43:42 +0000 Hiroshi http://www.webstylepress.com/?p=451 Advanced JS Calendar is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Following javascript based calendar is kind of advanced and it shows current month, year and controls of next or previous. You can view days of any year or month in future or in past. You get the idea. This calendar uses an external javascript file. The origional code can be found at dynamicdrive.

Download Advanced JS Calendar

Advanced JS Calendar is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/advanced-js-calendar/feed/ 0 Create Simple Javascript Based Calendar http://www.webstylepress.com/simple-js-calendar/ http://www.webstylepress.com/simple-js-calendar/#comments Wed, 05 Nov 2008 08:35:13 +0000 Hiroshi http://www.webstylepress.com/?p=447 Create Simple Javascript Based Calendar is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Following script is a calendar script which simply shows current month and highlights current date.

<html><body>
<table border="0" cellpadding="5" cellspacing="0">
  <tr>
    <td align="center" valign="middle" bgcolor="#eeeeee">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
        <tr> 
          <td align="center" valign="middle"> <SCRIPT LANGUAGE="JavaScript">
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0) 
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=0 bgcolor=#FFFFFF ");
document.write("bordercolor=black><font color=black face=verdana>");
document.write("<tr><td colspan=7><center><strong>" 
+ monthnames[thismonth] + " " + thisyear 
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>"); 
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
      }
   }
}
if (count==thisdate) {
document.write("<font color='E44401'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</SCRIPT> </td>
        </tr>
      </table>
    </td>
  </tr>
</table></body></html>

Download Simple Calendar Script

Create Simple Javascript Based Calendar is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/simple-js-calendar/feed/ 0