Website Administrator

    for specialty administrator enhanced website solutions...

Date added: 10 March 2010
Last Mod: 30 June 2010
© 2010 Steve Campisi

Website Administrator Know How Articles

Adding some strict xhtml calendar code into your Website

Code for a cool free CSS and JavaScript calendar to insert into your webpage

This free strict xhtml or plain HTML code is for a nifty free cool looking CSS and JavaScript calendar i threw together so you can place it on your website.

Super Hero Stuff Link

If you just want a calendar date for your page like: " " in plain simple English with no-frills but all the data then you can easily copy and paste these few lines from the following code box and place it into the "body" of your html code at the exact point you would like it to appear (note: you can use your own css to add color for emphasis too, like i have) ...

<script type="text/javascript" src="http://www.websiteadministrator.com.au/html/js/wascalendar.js"></script><script type="text/javascript">//<![CDATA[
document.write(TODAY); //]]>

And that's it for that, else, if you would like the large css styled calendar which is also especially handy to have on your website's front page so you can tell the exact date your website was last captured by those sites that display a tiny snap shot of websites on their pages. Like many of the "what is my website worth?" pages, then follow the next set of install instructions.

Of the several approaches i considered, I decided it was more economical in code to directly match the calendar date suffix's (st, nd, rd, th) than to loop out those low teen numbers in an equation. You can use case too but i like ||!

The source code to this css and javascript calendar is given in this html along with simple instructions to install and use it. If you are happy with it, then I'd be happy if you left the link back to this site in the code or link this site from somewhere else in your pages.

You can get this source code a few ways, including downloading a raw html template file [2kb] with just the calendar css and javascript code in it from the link below.

You can
a) Download the css-javacript calendar in a strict xhtml template or you can
b) Download the css-javacript calendar in a transitional html template, or
c) use the copy/paste code below.

This part goes with your other CSS and or javascript code between the <head> and </head> tags.

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
var w4s=new Date();
var s3x=w4s.getDate();
var s0x=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthi8=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
    var s6ix=new Array("st","nd","rd","th");
        if (s3x==1 || s3x==21 || s3x==31){s3x=0;}
        else if (s3x==2 || s3x==22){s3x=1;}
        else if (s3x==3 || s3x==23){s3x=2;}
        else {s3x=3;}

<style type="text/css">
.outerenc {position: absolute; top: 300px; right: 50px; width: 92px; border:1px solid black; color: #fff; background-color:#333; padding:0px; width:90px; overflow:hidden; font:6px sans-serif; }
/* To exactly position your calendar: specify 'top' and 'right' pixel location in above line of code */
.monthenc {font-size:12px; color:#ffe; background-color:#333; text-align:center; }
.dayenc, .dayenc a:link, .dayenc a:visited {text-align:center; color: #222; font-size:16px; background-color:#fff; text-decoration:none; }
.dateenc, .dateenc a:link, .dateenc a:visited{text-decoration:none; line-height: 0.7; font-size:45px; background-color:#fff; color:#333; text-align:center; }
.datebx {line-height: 0.8; padding:2px; background-color:#fff; font-size:12px; color:#222; text-align:right;}
.yearenc {font-size:12px; color:#ffe; background-color:#333; text-align:center; }

This part goes into the body of your html code (between the <body> and </body> tags).

<!-- Calendar Start - www.websiteadministrator.com.au -->
<div class="outerenc"><div class="monthenc"><script type="text/javascript">
            document.write(monthi8[w4s.getMonth()]); //]]>
            </script></div><div class="datebx"><script type="text/javascript">
            document.write(s6ix[s3x]); //]]>
            </script><div class="dateenc"><a href="http://www.websiteadministrator.com.au/"><script type="text/javascript">
            document.write(w4s.getDate()); //]]>
            </script></a></div></div><div class="dayenc"><a href="http://www.websiteadministrator.com.au/"><script type="text/javascript">
            document.write(s0x[w4s.getDay()]); //]]>
            </script></a></div><div class="yearenc"><script type="text/javascript">
            document.write(w4s.getFullYear()); //]]>
<!-- Calendar End - www.websiteadministrator.com.au -->

A little bit of inspiration is due to the online efforts of Sam Raheb, Dave Taylor and a couple of others too i guess. And sometimes you just want to remind yourself just how to spell the day correctly, or where to put those rd's, nd's etc. (yes, i am joking)

Valid XHTML 1.0 Strict

Steve Campisi