?
Solved

Free/Cheap Calendar Script

Posted on 2004-04-17
10
Medium Priority
?
373 Views
Last Modified: 2013-12-03
Hi,

I need a FREE calendar script that shows the present month (month name and year, week names, and day numbers etc) with forward and backward buttons to go to the previous month(s) and future month(s). I need a script that has no serious copyright infringements and that I can use it on any site of my choosing. I also want the ability to change the colors and look of the month without too much difficulty.

If there isn't any free calendar script - then perhaps something in a low range of under $50 that can be used muliple times and no extra licensing fees.

Thanks for your help in advance, looking forward to a speedy reply.
Aviva

0
Comment
Question by:avivak1
  • 6
  • 3
10 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10850781
Here is a calendar script I wrote. It comes with 4 different colour schemes, you can also define your own in the style sheet. It even has holidays, and you can mark your own. :)

<html>
<head>
<title>Easy Calendar</title>

<style>
body{font-family:zero twos;font-size:14px;}

#tbl{background:#000066;}
.divider{background:#000066;font-size:0;}
#title{font-weight:bold;height:0.5in;font-size:30px;font-style:italic;background:#99ccff;color:#000066;}
.wkd{width:1in;height:0.25in;text-align:center;font-size:18px;background:#000066;color:#ffffff;}
.sq{vertical-align:top;font-size:18px;word-wrap:break-word;background:#ffffff;color:#000066;}
.sqS{vertical-align:top;font-size:18px;word-wrap:break-word;background:#99ccff;color:#000066;}
.sqE{height:1in;width;1in;vertical-align:top;background:#ddeeff;}
.notes{vertical-align:top;padding:10px;font-size:18px;font-style:italic;background:#ffffff;color:#000066;}
.mtitle{color:#000066;font-size:11px;}
.msq{background:#ffffff;color:#000066;width:14;height:14;}
.msqS{background:#ffffff;color:#3366ff;}
.msqE{background:#ffffff;}
.mwkd{color:#3366ff;}
</style>

<script>
var now, y, m, frm, initClr=1, KD=true;
var hlptxt="Previous Year:\tSHIFT + LEFT ARROW\nPrevious Month:\tLEFT ARROW\nCurrent Month:\tC\nNext Month:\tRIGHT ARROW";
  hlptxt+="\nNext Year:\tSHIFT + RIGHT ARROW\nToggle Print:\tP\nHelp Dialogue:\tH";

function init(){
  now=new Date(); frm=document.forms[0].elements;
  frm[0].options[now.getMonth()].selected=true;
  frm[1].value=now.getFullYear();
  y=frm[1].value*1; m=frm[0].selectedIndex; create(); frm['clr'][initClr].checked=true; switchCSS(initClr);}

function create(){
//Create Title and Weekday rows
var str="<table id=tbl border=0 cellspacing=2 cellpadding=1><tr><td id=title colspan=7 align=center>"+mthn[m]+" "+y+"</td></tr><tr>";
  for(i=0;i<7;i++){str+="<td class=wkd>"+wkdn[i]+"</td>";} str+="</tr><tr>";
//Add Main Squares
var str=str+generate('sq','sqS','sqE',y,m,true,'width:1in;height:1in;');
//Create notes square
str+="</tr><tr><td colspan=7 style='height:2.5in;background:#ffffff;padding:0;'><table width=100% height=100% cellspacing=0 border=0 cellpadding=0>";
str+="<tr><td class=notes rowspan=3>Notes:</td><td rowspan=3 class=divider style='width:2px;'>&nbsp;</td><td align=right width=121>";
//Create Before/After Calendars
  var mt=m-1, yt=y; if(mt==-1){mt=11;yt-=1;}
  str+="<table style='font-family:verdana;font-size:9;text-align:center;' border=0 cellspacing=1>";
  str+="<tr><td colspan=7 align=center class=mtitle>"+mthn[mt]+" "+yt+"</td></tr><tr>";
    for(i=0;i<7;i++){str+="<td class=mwkd>"+wkdn[i].charAt(0)+"</td>";} str+="</tr><tr>";
  str=str+generate('msq','msqS','msqE',yt,mt,false,'')+"</tr></table>";
str+="</td><td style='font-size:0;width:5px;'>&nbsp;</td></tr>";
str+="<tr><td colspan=2 class=divider style='height:2px;'>&nbsp;</td></tr><tr><td align=right width=121>";
  var mt=m+1, yt=y; if(mt==12){mt=0;yt+=1;}
  str+="<table style='font-family:verdana;font-size:9;text-align:center;' border=0 cellspacing=1>";
  str+="<tr><td colspan=7 align=center class=mtitle>"+mthn[mt]+" "+yt+"</td></tr><tr>";
    for(i=0;i<7;i++){str+="<td class=mwkd>"+wkdn[i].charAt(0)+"</td>";} str+="</tr><tr>";
  str=str+generate('msq','msqS','msqE',yt,mt,false,'')+"</tr></table>";
str+="</td><td style='font-size:0;width:5px;'>&nbsp;</td></tr>";
str+="</table></td></tr></table>";
//Display Calendar
document.getElementById('temp').innerHTML=str;
frm[0].selectedIndex=m; frm[1].value=y;}

function generate(cl1,cl2,cl3,yt,mt,showHD,WH){
var strtWkd=new Date(yt,mt,1).getDay(); var leapYr=(yt%400==0 || (yt%4==0 && yt%100!=0))?true:false;
var col=0, row=0, cl, str="";
//Get Holiday Days
var hdayN=new Array(), temp1, temp2, temp3;
for(i=0;i<hday[mt].length;i++){
  temp1=hday[mt][i].split('='); temp2=temp1[0].split('#'); temp3=temp1[0]-1;
  if(temp2.length>1){temp3=temp2[0]-strtWkd; temp3=(temp3<0)?temp3+7:temp3; temp3+=(temp2[1]-1)*7;}
  hdayN[temp3]=temp1[1];}
//Create empty squares
for(i=0;i<strtWkd;i++){
  str+="<td class="+cl3+">&nbsp;</td>"; col++;}
//Create main Squares
var mthL=mthl[mt]; if(mt==1&&leapYr){mthL+=1;}
for(i=0;i<mthL;i++){cl=(col==0||col==6)?cl2:cl1; var txt=(hdayN[i]&&showHD)?"<br><font style='font-size:9;font-family:verdana;'>"+hdayN[i]+"</font>":"";
  str+="<td id=sq"+i+" class="+cl+" style='"+WH+"'>"+(i+1)+txt+"</td>"; col++;
    if(col==7){col=0;row++;if(i<mthL-1){str+="</tr><tr>";}}}
//Create empty squares
if(col!=0){while(col!=7){
  str+="<td class="+cl3+">&nbsp;</td>"; col++;}}
return str;}

function switchCSS(num){
var cssclrs=new Array(), css=document.styleSheets[0].rules;
  cssclrs[0]=new Array('#000066','#99ccff','#ddeeff','#99ccff','#3366ff');
  cssclrs[1]=new Array('#000000','#c5c5c5','#e0e0e0','#ededed','#6a6a6a');
  cssclrs[2]=new Array('#000000','#c5c5c5','#ededed','#c5c5c5','#6a6a6a');
  cssclrs[3]=new Array('#005500','#aaff99','#d1ffc1','#aaff99','#44ff33');
var bg=new Array('1:0','2:0','3:1','4:0','6:3','7:2');
var clr=new Array('3:0','5:0','6:0','8:0','9:0','10:0','11:4','13:4');
for(i=0;i<bg.length;i++){var n=bg[i].split(':'); css[n[0]].style.background=cssclrs[num][n[1]];}
for(i=0;i<clr.length;i++){var n=clr[i].split(':'); css[n[0]].style.color=cssclrs[num][n[1]];}
}

function mark(num,txt,repl){
if(isNaN(num)||num<1||num>mthl[m]){alert('Invalid Date.');return false;}
var obj=document.getElementById('sq'+(num-1)), otxt=obj.innerHTML;
if(repl){
  if(otxt.indexOf('<br>')){otxt=otxt.split('<BR>')[0];}
  obj.innerHTML=otxt+"<br><font style='font-size:9;font-family:verdana;'>"+txt+"</font>";}
else{
  obj.innerHTML+="<br><font style='font-size:9;font-family:verdana;'>"+txt+"</font>";}
}

function act(ev){
var k=ev.keyCode, x=ev.shiftKey;
if(k==37){
  if(x){y-=1;create();}
  else{m-=1;if(m==-1){m=11;y-=1;}create();}
}else if(k==39){
  if(x){y+=1;create();}
  else{m+=1;if(m==12){m=0;y+=1;}create();}
}else if(k==67){
  y=now.getFullYear();m=now.getMonth();create();
}else if(k==80){
  var obj=document.forms[0].style;
  obj.display=(obj.display=='none')?'block':'none';
}else if(k==72){
  alert(hlptxt);
}}


var mthl=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var mthn=new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var wkdn1=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var wkdn=new Array('Sun','Mon','Tues','Wed','Thurs','Fri','Sat');
var hday=new Array(12);
  hday[0]=new Array();
    hday[0][0]="1=New Year's Day";
  hday[1]=new Array();
    hday[1][0]="14=Valentine's Day";
  hday[2]=new Array();
  hday[3]=new Array();
    hday[3][0]="5#2=Good Friday";
    hday[3][1]="1#2=Easter";
  hday[4]=new Array();
    hday[4][0]="0#2=Mother's Day";
    hday[4][1]="1#4=Victoria Day";
  hday[5]=new Array();
    hday[5][0]="0#3=Father's Day";
  hday[6]=new Array();
    hday[6][0]="1=Canada Day";
  hday[7]=new Array();
    hday[7][0]="1#1=Civic Day";
  hday[8]=new Array();
    hday[8][0]="1#1=Labour Day";
  hday[9]=new Array();
    hday[9][0]="1#2=Thanksgiving Day";
    hday[9][1]="31=Halloween";
  hday[10]=new Array();
    hday[10][0]="11=Remembrance Day";
  hday[11]=new Array();
    hday[11][0]="25=Christmas Day";
    hday[11][1]="26=Boxing Day";
    hday[11][2]="31=New Year's Eve";
</script>

</head>

<body onload="init();" onkeydown="if(KD){act(event);}">

<form style='font-family:verdana;'>
Please select the month and year:

<p>

Month:
  <select>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
  </select>
Year: <input type=text maxlength=4 style="width:40px;" onfocus="KD=false;" onblur="KD=true;">

<input type=button value="Create Calendar" onclick="var temp=frm[1].value*1;if(isNaN(temp)){alert('Invalid Year.');return false;}y=temp;m=frm[0].selectedIndex;create();">

<p>
Date: <input type=text maxlength=2 style="width:30px;" onfocus="KD=false;" onblur="KD=true;">
Holiday: <input type=text onfocus="KD=false;" onblur="KD=true;">
<input type=button value="Mark Holiday" onclick="mark(frm[3].value*1,frm[4].value);">
<input type=checkbox checked>Replace

<p>
<input type=button value="<<" onclick="y-=1;create();">
<input type=button value="<" onclick="m-=1;if(m==-1){m=11;y-=1;}create();">
<input type=button value="Now" onclick="y=now.getFullYear();m=now.getMonth();create();">
<input type=button value=">" onclick="m+=1;if(m==12){m=0;y+=1;}create();">
<input type=button value=">>" onclick="y+=1;create();">

<input type=button value="Print" onclick="document.forms[0].style.display='none';">
<input type=button value="?" onclick="alert(hlptxt);">

<p>Color:
  <input type=radio name=clr value=0 onclick="switchCSS(this.value);" onfocus="KD=false;" onblur="KD=true;">Blue
  <input type=radio name=clr value=1 onclick="switchCSS(this.value);" onfocus="KD=false;" onblur="KD=true;">B&W
  <input type=radio name=clr value=2 onclick="switchCSS(this.value);" onfocus="KD=false;" onblur="KD=true;">B&W2
  <input type=radio name=clr value=3 onclick="switchCSS(this.value);" onfocus="KD=false;" onblur="KD=true;">Green

</form>

<div id=temp>&nbsp;</div>

</body>

</html>
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 2000 total points
ID: 10850805
Here is a more compact version (again, colours can be defined in the style sheet):

<style type="text/css">
.other{color: #606cff; background-color: #dcecff;}
.main{color: #000088; background-color: #c2ccff;}
.today{color: #000088; background-color: #9fb9ff;}
.wkheader{color: #ffffff; font-weight: bold; background-color: #0000aa; font-szie: 15px;}
.header{color: #ffffff; font-weight: 700; background-color: #000088; font-size: 19px;}
.cont{border: #000088 3px solid; background-color: #ffffff; font-family: Verdana; font-size: 18px; text-align: center;}
.btn{background-color: #b2bcfe; color: #000088; font-weight: bold; font-size: 15px;}
</style>

<body onLoad="wrCal(ty,tm,td);">

<table border='0'>
<tr><td colspan="3" align="center" id="calcont">
</td></tr></table>

<script>

//get today's date
var now=new Date(), y=now.getFullYear(), m=now.getMonth(), d=now.getDate(), ty=y; var tm=m; var td=d;
var mnth, dte, wkday; var tmnth, tdte, twkday, cur, strtdte, enddte, str, ln, xpos, ypos, moveD=false;
var mnths=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var mnthname=new Array('Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec');
var dyswk=new Array("Su","Mo","Tu","We","Th","Fr","Sa");


function wrCal(dy,dm,dd){
date=new Date(dy,dm,dd);
if(dy%400==0 || (dy%4==0 && dy%100!=0)){mnths[1]=29;}else{mnths[1]=28;}
mnth=dm; dte=dd; wkday=date.getDay();
tmnth=mnth; tdte=dte;
str="<table class='cont' cellspacing='1' cellpadding='4'><tr><td colspan='7' class='header'>"
str+='<table><tr><td><button onClick="ty--;wrCal(ty,tm,td);" class="btn"><<</button><button onClick="tm--;if(tm==-1){tm=11;ty--;}wrCal(ty,tm,td);" class="btn"><</button></td>';
str+="<td width='60%' align='center' class='header'>"+mnthname[dm]+" "+dy+"</td><td>"
str+='<button onClick="tm++;if(tm==12){tm=0;ty++;}wrCal(ty,tm,td);" class="btn">></button><button onClick="ty++;wrCal(ty,tm,td);" class="btn">>></button>';
str+="</td></tr></table></td></tr><tr>";
for(i=0;i<7;i++){str+="<td class='wkheader'>"+dyswk[i]+"</td>"}
str+="</tr>"

//determine start date
while(tdte>7){tdte-=7;}
strtdte=tdte-wkday;
if(strtdte>0){strtdte-=7;}
if(strtdte>-6){tmnth=mnth-1;
  if(tmnth==-1){tmnth=11;}
  strtdte=mnths[tmnth]+strtdte;}
else{strtdte=32}

//determine weekday of the 1st of the month
ln=wkday-tdte+1;
if(ln<0){ln=ln+7;}

//determine end date
while(tdte<mnths[mnth]-7){tdte+=7;}
enddte=6-wkday+tdte+7-mnths[mnth];
if(enddte>6){enddte-=7;}

//print days of prev month
for(i=strtdte;i<=mnths[tmnth];i++){str+="<td class='other'>" +i+ "</td>"}
//print days of cur month
for(i=1;i<=mnths[mnth];i++){
  if(i==dd && dm==m && dy==y){cname='today';}
  else{cname='main';}
 if(ln==7){str+="</tr><tr><td class='"+cname+"'>" +i+ "</td>"; ln=1;}
 else{str+="<td class='"+cname+"'>" +i+ "</td>"; ln+=1;}}
//print days of next month
for(i=1;i<=enddte;i++){str+="<td class='other'>" +i+ "</td>"}

str+="</tr></table>";
document.getElementById('calcont').innerHTML=str;
}


function showevt(msg,shw){
Obj=document.getElementById('eCt')
if(shw){
  Obj.style.display='inline'; moveD=true; Obj.innerHTML=msg;}
if(!shw){Obj.style.display='none'; moveD=false;}
}

</script>
</body>
</html>
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10850809
Oops, sorry, that last function (showevt) is not necessary...
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10850822
Some for you to take a look at - I've only listed the better looking ones. In most the script is free you just need to leave their name in the source.

http://javascript.internet.com/calendars/dynamic.html

http://javascript.internet.com/calendars/fuushikaden-pop-up-calendar.html

Hmmm, thats enough calendars for me - the above 2 seems pretty good in comparison to some of the calendars that are out there.

0
 

Author Comment

by:avivak1
ID: 10850984
First of all, thanks for your input,

lil_puffball - the two scripts you sent didn't work - I pasted them into an .html document and I have internet explorer 6.0 - the first one I get a black screen with half the month in a mess and the second one - only a black screen.

Lord McFly (cool nick btw) I saw those two calendars - the first one has no forward or back buttons and the pop up - I don't want the calendar to be linked to return any code - just to show a simple calendar with the days, weeks and month,year name - no dropdowns etc...

Thanks,
Aviva
0
 

Author Comment

by:avivak1
ID: 10850994
Sorry, lil_puffball - all of a sudden it did work - weird...

I like your compact one  - If I don't want the year forward and back buttons can I just remove the links?

Thanks again,
Aviva
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10850995
Are you sure you copied them correctly? They work fine on my computer.

Are you using Mac maybe?

Anyways I uploaded them for you:

http://www34.brinkster.com/lilpuffball/ee/calendar.htm
http://www34.brinkster.com/lilpuffball/ee/calendar-compact.htm
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10851001
Sorry, missed your last post...

Feel free to do whatever you want with the script. :)
0
 

Author Comment

by:avivak1
ID: 10851348
Thanks again lil_p'!

You're the best!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10851385
Glad to help. :) Thanks for the points and the A!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month14 days, 17 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question