asked on

Free/Cheap Calendar Script

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

lil_puffball

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;'> </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;'> </td></tr>";
str+="<tr><td colspan=2 class=divider style='height:2px;'> </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;'> </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+"> </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+"> </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> </div>

</body>

</html>

ASKER CERTIFIED SOLUTION

lil_puffball

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lil_puffball

Oops, sorry, that last function (showevt) is not necessary...

Lord_McFly

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.

avivak1

ASKER

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

avivak1

ASKER

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

lil_puffball

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

lil_puffball

Sorry, missed your last post...

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

avivak1

ASKER

Thanks again lil_p'!

You're the best!

lil_puffball

Glad to help. :) Thanks for the points and the A!