Solved

Free/Cheap Calendar Script

Posted on 2004-04-17
10
362 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 500 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
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 get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now