Atkins Calendar Javascript

Javascripts > Javascript Calendars > Atkins Calendar

Script Title: Atkins Calendar

Description: A javascript calendar that includes a status bar clock, and the capability to draw up a popup window with future months in. Also stores entries into calendar in a cookie on users comuter.

Example: Available
Sun Mon Tue Wed Thu Fri Sat

Whats Happening Today:

To enter information into your calendar, use the form below.

This page stores this information in a cookie. If you are blocking cookies, or if you delete your cookies, this information will be lost.

The cookie and its stored information will automatically be deleted at the end of the month.

To view a different month, use the form below.

Credit: Script created by Stewart Atkins

Copy the following code into your HEAD tags.

<script language="Javascript" type="text/javascript"> leapyr=28 now=new Date if(now.getFullYear()/4==Math.floor(now.getFullYear()/4)){ leapyr=29} monthDays=new Array(31,leapyr,31,30,31,30,31,31,30,31,30,31) data=new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","") currentmon=now.getMonth() mondaybegproc=new Date("2004",currentmon,1) expireDate = new Date("2004",currentmon,1) expireDate.setMonth(expireDate.getMonth()+1) if(document.cookie!=""){ for(x=1;x<32;x++){ data[x]=document.cookie.split("=")[x] } } function showInfo(thisDay) { document.calendar.dateInfo.value = data[thisDay] } dayName=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") function funct() { pos=document.myForm.days.value data[document.myForm.days.value]=document.myForm.T1.value document.cookie = "calendardata="+data[1]+"="+data[2]+"="+data[3]+"="+data[4]+"="+data[5]+"="+data[6]+"="+data[7]+"="+data[8]+"="+data[9]+"="+data[10]+"="+data[11]+"="+data[12]+"="+data[13]+"="+data[14]+"="+data[15]+"="+data[16]+"="+data[17]+"="+data[18]+"="+data[19]+"="+data[20]+"="+data[21]+"="+data[22]+"="+data[23]+"="+data[24]+"="+data[25]+"="+data[26]+"="+data[27]+"="+data[28]+"="+data[29]+"="+data[30]+"="+data[31]+";expires=" + expireDate.toGMTString() } monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December") function newmonthgen(){ newmonthwin=window.open("","newWin","width=250,height=220,toolbar=no,scrollbars=no,resizable=no") newmonthwin.document.write("<html><head><title>"+monName[document.future.selectmonth.value]+" "+document.future.selectyear.value+"<\/title><\/head><body><table cellspacing='2' cellpadding='2' align='left'><tr><p><p><th colspan='7'>") newmonthwin.document.write(monName[document.future.selectmonth.value]+" "+document.future.selectyear.value+"<\/tr>") newmonthwin.document.write("<tr align='right'><td>Sun<\/td><td>Mon<\/td><td>Tue<\/td><td>Wed<\/td><td>Thu<\/td><td>Fri<\/td><td>Sat<\/td><\/tr><tr align='right'>") newmonthstart=new Date(document.future.selectyear.value,document.future.selectmonth.value,1) newmonthdaybegin=newmonthstart.getDay() //1 newday=1 for(g=0;g<7;g++){ newmonthwin.document.write("<td>") if (newmonthdaybegin<=g) { newmonthwin.document.write(newday) newday++} newmonthwin.document.write("<\/td>")} newmonthwin.document.write("<\/tr>") for(h=0;h<3;h++){ newmonthwin.document.write("<tr align='right'>") for(s=0;s<7;s++){ newmonthwin.document.write("<td>") newmonthwin.document.write(newday) newday++ newmonthwin.document.write("<\/td>") } newmonthwin.document.write("<\/tr>") } newmonthwin.document.write("<tr align='right'><td>") if (newday==29){ if ((document.future.selectmonth.value !=1)||(Math.floor(document.future.selectyear.value/4)==(document.future.selectyear.value/4))){ newmonthwin.document.write(newday) newday++ } } else { newmonthwin.document.write(newday) newday++ } newmonthwin.document.write("<\/td><td>") if (newday==30){ if (document.future.selectmonth.value !=1){ newmonthday.document.write(newday) newday++ } } else{ if (newday==29){ if ((document.future.selectmonth.value !=1)||(Math.floor(document.future.selectyear.value/4)==(document.future.selectyear.value/4))){ newmonthwin.document.write(newday) newday++ } } else { newmonthwin.document.write(newday) newday++ } } newmonthwin.document.write("<\/td>") for(q=0;q<5;q++){ newmonthwin.document.write("<td>") if (newday==31){ if ((document.future.selectmonth.value==0)||(document.future.selectmonth.value==2)||(document.future.selectmonth.value==4)||(document.future.selectmonth.value==6)||(document.future.selectmonth.value==7)||(document.future.selectmonth.value==9)||(document.future.selectmonth.value==11)){ newmonthwin.document.write(newday) newday++ } } else { if (newday==30){ if (document.future.selectmonth.value !=1){ newmonthwin.document.write(newday) newday++ } } else{ if (newday==29){ if ((document.future.selectmonth.value!=1)||(Math.floor(document.future.selectyear.value/4)==(document.future.selectyear.value/4))){ newmonthwin.document.write(newday) newday++ } } else { if (newday>31){ } else { newmonthwin.document.write(newday) newday++ } } } } newmonthwin.document.write("<\/td>") } newmonthwin.document.write("<\/tr><tr align='right'>") for (w=0;w<2;w++){ newmonthwin.document.write("<td>") if (newday==31){ if ((document.future.selectmonth.value==0)||(document.future.selectmonth.value==2)||(document.future.selectmonth.value==4)||(document.future.selectmonth.value==6)||(document.future.selectmonth.value==7)||(document.future.selectmonth.value==9)||(document.future.selectmonth.value==11)){ newmonthwin.document.write(newday) newday++ } } else { if (newday==30){ if (document.future.selectmonth.value!=1){ newmonthwin.document.write(newday) newday++ } } else{ if (newday==29){ if ((document.future.selectmonth.value!=1)||(Math.floor(document.future.selectyear.value/4)==(document.future.selectyear.value/4))){ newmonthwin.document.write(newday) newday++ } } else { if (newday>31){ } else { newmonthwin.document.write(newday) newday++ } } } } newmonthwin.document.write("<\/td>") } newmonthwin.document.write("<\/tr><\/table>") } function timestatus(){ currenttime=new Date msg=currenttime.getHours()+":"+currenttime.getMinutes()+":"+currenttime.getSeconds() window.status=msg setTimeout("timestatus()",50) } </script>

Copy the following code into your BODY tag.

onload="document.myForm.T1.value=data[1];timestatus()">

Copy the following code into the BODY of your html page.

<script> document.write("<h1>Today is "+dayName[now.getDay()]+", "+monName[now.getMonth()]+" "+now.getDate()+". <\/h1>") </script><table cellspacing="2" cellpadding="2" align="left"><tr><p><p><th colspan="7"><script> document.write(monName[now.getMonth()]+" "+now.getYear()) </script></tr><script> monthdaybegin=mondaybegproc.getDay() curdat=1 </script><tr align="right"><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr><tr align="right"><script> for(i=0;i<7;i++){ document.write("<td>") if (monthdaybegin<=i) { document.write("<a href='javascript:showInfo("+curdat+")'>"+curdat+"<\/a>") curdat++} document.write("</td>")} </script></tr><script> for(k=0;k<3;k++){ document.write("<tr align='right'>") for(p=0;p<7;p++){ document.write("<td>") document.write("<a href='javascript:showInfo("+curdat+")'>"+curdat+"<\/a>") curdat++ document.write("</td>") } document.write("</tr>") } </script><script> // this tr section is where the checks for the end of the month should begin. what with the checks already in place, // things could get complicated... </script><tr align="right"><td><script> if (curdat==29){ if ((now.getMonth()!=1)||(Math.floor(now.getYear()/4)==(now.getYear()/4))){ document.write("<a href='javascript:showInfo(29)'>29<\/a>") curdat++ } } else { document.write("<a href='javascript:showInfo("+curdat+")'>"+curdat+"<\/a>") curdat++ } </script></td><td><script> if (curdat==30){ if (now.getMonth()!=1){ document.write("<a href='javascript:showInfo(30)'>30<\/a>") curdat++ } } else{ if (curdat==29){ if ((now.getMonth()!=1)||(Math.floor(now.getYear()/4)==(now.getYear()/4))){ document.write("<a href='javascript:showInfo(29)'>29<\/a>") curdat++ } } else { document.write("<a href='javascript:showInfo("+curdat+")'>"+curdat+"<\/a>") curdat++ } } </script></td><script> for(q=0;q<5;q++){ document.write("<td>") if (curdat==31){ if ((now.getMonth()==0)||(now.getMonth()==2)||(now.getMonth()==4)||(now.getMonth()==6)||(now.getMonth()==7)||(now.getMonth()==9)||(now.getMonth()==11)){ document.write("<a href='javascript:showInfo(31)'>31<\/a>") curdat++ } } else { if (curdat==30){ if (now.getMonth()!=1){ document.write("<a href='javascript:showInfo(30)'>30<\/a>") curdat++ } } else{ if (curdat==29){ if ((now.getMonth()!=1)||(Math.floor(now.getYear()/4)==(now.getYear()/4))){ document.write("<a href='javascript:showInfo(29)'>29<\/a>") curdat++ } } else { if (curdat>31){ } else { document.write("<a href='javascript:showInfo("+curdat+")'>"+curdat+"<\/a>") curdat++ } } } } document.write("</td>") } </script></tr><tr align="right"><script> for (z=0;z<2;z++){ document.write("<td>") if (curdat==31){ if ((now.getMonth()==0)||(now.getMonth()==2)||(now.getMonth()==4)||(now.getMonth()==6)||(now.getMonth()==7)||(now.getMonth()==9)||(now.getMonth()==11)){ document.write("<a href='javascript:showInfo(31)'>31<\/a>") curdat++ } } else { if (curdat==30){ if (now.getMonth()!=1){ document.write("<a href='javascript:showInfo(30)'>30<\/a>") curdat++ } } else{ if (curdat==29){ if ((now.getMonth()!=1)||(Math.floor(now.getYear()/4)==(now.getYear()/4))){ document.write("<a href='javascript:showInfo(29)'>29<\/a>") curdat++ } } else { if (curdat>31){ } else { document.write("<a href='javascript:showInfo("+curdat+")'>"+curdat+"<\/a>") curdat++ } } } } document.write("</td>") } </script></tr></table><p>Whats Happening Today:<form name="calendar" action="#"><textarea rows="7" cols="30" name="dateInfo" readonly="readonly">Click on any underlined date to see what's happening then </textarea></form><p>  <p>  <p> <br>To enter information into your calendar, use the form below. <br> <form name="myForm" action="#" onsubmit="funct()"> <p><select name="days" onchange="document.myForm.T1.value=data[document.myForm.days.value]"> <script> for(o=1;o<=monthDays[currentmon];o++){ document.write("<option value="+o+">"+o+"<\/option>") } </script> </select><input type="text" name="T1" size="20"><input type="submit" value="Store" name="B1"></p> </form> <p>This page stores this information in a cookie. If you are blocking cookies, or if you delete your cookies, this information will be lost.</p> <p>The cookie and its stored information will automatically be deleted at the end of the month.</p> <p> </p> <p>To view a different month, use the form below.</p> <form name="future" action="#" onsubmit="newmonthgen()"> <p><select size="1" name="selectmonth"> <script> for(m=now.getMonth()+1;m<=11;m++){ slmpo=monName[m] document.write("<option value="+m+">"+slmpo+"</option>") } for(m=0;m<=now.getMonth();m++){ slmpo=monName[m] document.write("<option value="+m+">"+slmpo+"</option>") } </script> </select><select size="1" name="selectyear"> <script> for(y=0;y<10;y++){ objkpl=now.getFullYear()+y document.write("<option value="+objkpl+">"+objkpl+"</option>") } </script> </select><input type="submit" value="View Month" name="B1"></p> </form>

Enter your name and email address to have this script sent right to your Inbox for later viewing.

First Name Last Name Email

<reallybig.com>
Web Builder Network Portal

WebBuilderZone
The Largest directory of Web Building resources on the 'Net!

Reallybig Forums
Ask a question, join a discussion, start a thread.

Bignosebird
FREE CGI scripts, Web tutorials, essential HTML tricks and more!

Fontpool
1000+ Truetype fonts for PC & MAC!

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

DHTMLShock
Add life to your site with these DHTML scripts!

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!

Sitecritique.net
Friendly community where you can get a site critique - or give one!

Advertise
on the
Reallybig.com
Network