PDA

View Full Version : Basic calendar with hyperlinks?



milkman671
12-01-2005, 10:20 PM
Script: Basic Calendar
http://www.dynamicdrive.com/dynamicindex7/basiccalendar.htm

Hello all,

I was wondering if there is a way to create hyperlinks in the basic calendar for certain days. For instance, December 1 would be a link to another page (dec1.htm) and December 2 would be another link (dec2.htm) etc.

Thanks in advance.

jscheuer1
12-01-2005, 10:57 PM
Check this post (http://www.dynamicdrive.com/forums/showpost.php?p=8772&postcount=11) in particular and this thread (http://www.dynamicdrive.com/forums/showthread.php?t=2421&page=1&pp=10), in general.

milkman671
12-02-2005, 04:45 PM
John-

Thanks for the reply, but I don't understand how to implement your code into the Basic Calendar.

I was reading the tutorial at the author's homepage (http://scriptasylum.com/datetime/calender/calender.html), and there is already a user-definable function available. The part that I am having trouble with is creating the function that will create the hyperlinks on the Basic Calendar.

jscheuer1
12-02-2005, 04:50 PM
My thinking was that since calendar II is so close to basic calendar in appearance, you might be happy using the code I provided, abandoning basic calendar.

milkman671
12-03-2005, 01:42 PM
The basic calendar fits the theme of my site better than calendar II.

Can somebody assist with the ability to add links to the dates in the Basic Calendar script? There is already a user-defined function included in the newest release on the author's website, but I don't know how to create the function that adds the hyperlinks.

Thanks

jscheuer1
12-03-2005, 06:14 PM
OK, what do you want it to do, exactly? I've got a local demo set up. I can make it either:

1 ) Link every day to a page:

"cal_date_month_year.htm"

where date is the date number, month is the lower case three letter English month abbreviation and year is the 4 digit year number.

or:

2 ) Link only special dates to special pages. Any given one of these dates in any given year would all link to the same special page.

or:

3 ) Something else I've not covered here.

milkman671
12-03-2005, 06:47 PM
John-

Again, thanks for the reply...

What I would like the calendar to do is:
If I update the content on my site on December 2nd, the number 2 on the calendar would be a link to the 12022005.htm page. If I update the content on December 15th, the number 15 on the calendar would be a link to the 12152005.htm page, etc.

I would also like the calendar to highlight the current day.

See the attached screenshot of a php calendar that I was using, but my new web host does not support php, which is why I am trying to get this javascript calendar to work.

jscheuer1
12-03-2005, 08:06 PM
Working from the demo on the home page proved to be a little tricky. The demo's layout and source code on the demo page are different than the demo code and layout offered on that page. I chose the source & layout code of the demo page, as they're more cross browser friendly. Then I modified the code to your specifications (date and month numbers will be prefix padded with a zero, if less than 2 characters in the link filename), all you need to worry about is configuring the 'specialDays' array at the beginning of the script and any css style or HTML markup modifications you may want. Note: the onload event thing (// ADD OTHER WINDOW ONLOAD EVENTS HERE...) could not be used for this because the changes needed happen before that code would fire, it is for other onload events on your page, if any. It is not for modifying the script itself. Here is a working demo:


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="Author" content="Brian Gosselin">
<title>Basic Calender</title>

<style type="text/css">
body{
font-size:11px;
font-family:verdana;
color:#00416e;
margin-left:50px;
margin-right:50px;
text-align:justify;
}

td{
font-size:11px;
font-family:verdana;
color:#00416e;
}

input{
background-color:light-grey;
vertical-align:middle;
}

table.desc{
font-size:10pt;
font-family:sans-serif;
color:black;
}
</style>

<!-- START OF CALENDER STYLE DECLARATIONS -->
<style type="text/css">

.calShadow{
background-color:black;
position:absolute;
top:10px;
left:10px;
-moz-opacity:.5;
filter:alpha(opacity=50);
}

.calMain{
width:275px;
position:absolute;
left:0px;
top:0px;
background-color:#00436e;
border-width:2px;
border-style:outset;
border-color:#0084d8;
padding:3px;
}

.calMonthYear{
font-size:12px;
font-family:sans-serif;
color:#ffedcf;
cursor:default;
background-color:#00436e;
}

.calHdr{
width:35px;
font-size:12px;
font-weight:bold;
font-family:sans-serif;
color:#ffedcf;
cursor:default;
padding:1px;
background-color:#00436e;
}

.calToday{
width:35px;
font-size:12px;
font-family:sans-serif;
font-weight:bold;
color:red;
cursor:default;
border-width:1px;
border-style:inset;
border-color:gray;
padding:1px;
background-color:#ffedcf;
}

.calText{
width:35px;
font-size:12px;
font-family:sans-serif;
color:black;
cursor:default;
border-width:1px;
border-style:inset;
border-color:gray;
padding:1px;
background-color:#ffedcf;
}

</style>
<!--END OF CALENDER STYLE DECLARATIONS -->


<!-- START OF CALENDER JAVASCRIPT CODE -->
<script language="javascript">
var specialDays=new Array()
// set special days for links below: specialDays[x]=['month_number', 'date_number']
specialDays[0]=['12', '25']
specialDays[1]=['1', '1']

var w3c=(document.getElementById)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns4=(document.layers)?true:false;
var ns6=(w3c && !document.all)?true:false;
var mi=0; var yi=0;
var calA=new Array();
var cal_m, cal_y, cal, calS, now;

function setMonth(incr){
if(!ns4){
mi+=(incr)?1:-1;
if(mi>11)mi=0;
if(mi<0)mi=11;
now.setMonth(mi);
updateCalender();
}}

function setYear(incr){
if(!ns4){
yi+=(incr)?1:-1;
if(yi>50)yi=0;
if(yi<0)yi=50;
now.setFullYear(yi+1970);
updateCalender();
}}

function updateCalender(){
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
dim[1]=(((now.getFullYear()%100!=0)&&(now.getFullYear()%4==0))||(now.getFullYear()%400==0))?29:28;
cal_m.innerHTML=['January','February','March','April','May','June','July','August','September','October','November','December'][mi];
cal_y.innerHTML=yi+1970;
var offsetD=new Date();
offsetD.setFullYear(yi+1970);
offsetD.setMonth(mi);
offsetD.setDate(1);
offsetD=offsetD.getDay()+1;
for(i=1;i<=42;i++){
if((i-offsetD>=0)&&(i-offsetD<dim[mi])){
for (var i_tem = 0; i_tem < specialDays.length; i_tem++)
if ([mi+1]==specialDays[i_tem][0]&&[i-offsetD+1]==specialDays[i_tem][1]){
calA[i].innerHTML='<a href="'+([mi+1].toString(10).length<2? '0'+[mi+1] : [mi+1] )+([i-offsetD+1].toString(10).length<2? '0'+[i-offsetD+1] : [i-offsetD+1])+cal_y.innerHTML+'.htm">'+[i-offsetD+1]+'</a>';
break
}
else
calA[i].innerHTML=i-offsetD+1;
calA[i].i=i;
calA[i].o=offsetD;
calA[i].className=((now.ref.getDate()==i-offsetD+1)&&(now.ref.getFullYear()==now.getFullYear())&&(now.ref.getMonth()==now.getMonth()))?"calToday":"calText";
}else{
calA[i].className="calText";
calA[i].innerHTML='&nbsp;';
}}}

window.onload=function(){
if(!ns4){
for(i=1;i<=42;i++)calA[i]=(ie4)?document.all['cal'+i]:document.getElementById('cal'+i);
cal_m=(ie4)?document.all["calender_m"]:document.getElementById("calender_m");
cal_y=(ie4)?document.all["calender_y"]:document.getElementById("calender_y");
cal=(ie4)?document.all["calender"]:document.getElementById("calender");
calS=(ie4)?document.all["calenderS"]:document.getElementById("calenderS");
calS.style.height=((ie4||ie5)?cal.clientHeight:(w3c)?cal.offsetHeight:200)+'px';
calS.style.width=((ie4||ie5)?cal.clientWidth:(w3c)?cal.offsetWidth:300)+'px';
cal.parentNode.style.width=parseInt(calS.style.width)+10+'px';
cal.parentNode.style.height=parseInt(calS.style.height)+10+'px';
now=new Date(); now.ref=new Date();
mi=now.getMonth(); yi=now.getFullYear()-1970;
updateCalender();
}
// ADD OTHER WINDOW ONLOAD EVENTS HERE...
}

</script>
<!-- END OF CALENDER JAVASCRIPT CODE -->


</head>
<body>

<center><h1>Basic Calender</h1></center>

<table cellpadding=20 cellspacing=0 border=0><tr>

<td valign="top">

<!-- START OF CALENDER HTML CODE -->

<layer visibility="hide"><div style="position:relative; width:200px">
<div id="calenderS" class="calShadow"></div>
<div id="calender" class="calMain"><center>
<table cellpadding=0 border=0 cellspacing=0 width="100%" class="spanText"><tr align="center" valign="bottom">
<td class="calMonthYear"><img src="images/back.jpg" border="none" width=13 height=13 onmousedown="setMonth(false)"></td>
<td class="calMonthYear" width="75"><span id="calender_m" class="calMonthYear">&nbsp;</span></td>
<td class="calMonthYear"><img src="images/next.jpg" border="none" width=13 height=13 onmousedown="setMonth(true)"></td>
<td class="calMonthYear">&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td class="calMonthYear"><img src="images/back.jpg" border="none" width=13 height=13 onmousedown="setYear(false)"></td>
<td class="calMonthYear" width="75"><span id="calender_y" class="calMonthYear">&nbsp;</span></td>
<td class="calMonthYear"><img src="images/next.jpg" border="none" width=13 height=13 onmousedown="setYear(true)"></td>
</tr></table><hr>
<table cellpadding=0 border=0 cellspacing=0>
<tr align="center">
<td><div class="calHdr">S</div></td>
<td><div class="calHdr">M</div></td>

<td><div class="calHdr">T</div></td>
<td><div class="calHdr">W</div></td>
<td><div class="calHdr">T</div></td>
<td><div class="calHdr">F</div></td>
<td><div class="calHdr">S</div></td>
</tr><tr align="center">
<td><div id="cal1" class="calText">&nbsp;</div></td>
<td><div id="cal2" class="calText">&nbsp;</div></td>
<td><div id="cal3" class="calText">&nbsp;</div></td>
<td><div id="cal4" class="calText">&nbsp;</div></td>
<td><div id="cal5" class="calText">&nbsp;</div></td>
<td><div id="cal6" class="calText">&nbsp;</div></td>

<td><div id="cal7" class="calText">&nbsp;</div></td>
</tr><tr align="center">
<td><div id="cal8" class="calText">&nbsp;</div></td>
<td><div id="cal9" class="calText">&nbsp;</div></td>
<td><div id="cal10" class="calText">&nbsp;</div></td>
<td><div id="cal11" class="calText">&nbsp;</div></td>
<td><div id="cal12" class="calText">&nbsp;</div></td>
<td><div id="cal13" class="calText">&nbsp;</div></td>
<td><div id="cal14" class="calText">&nbsp;</div></td>
</tr><tr align="center">
<td><div id="cal15" class="calText">&nbsp;</div></td>
<td><div id="cal16" class="calText">&nbsp;</div></td>
<td><div id="cal17" class="calText">&nbsp;</div></td>
<td><div id="cal18" class="calText">&nbsp;</div></td>
<td><div id="cal19" class="calText">&nbsp;</div></td>
<td><div id="cal20" class="calText">&nbsp;</div></td>
<td><div id="cal21" class="calText">&nbsp;</div></td>

</tr><tr align="center">
<td><div id="cal22" class="calText">&nbsp;</div></td>
<td><div id="cal23" class="calText">&nbsp;</div></td>
<td><div id="cal24" class="calText">&nbsp;</div></td>
<td><div id="cal25" class="calText">&nbsp;</div></td>
<td><div id="cal26" class="calText">&nbsp;</div></td>
<td><div id="cal27" class="calText">&nbsp;</div></td>
<td><div id="cal28" class="calText">&nbsp;</div></td>
</tr><tr align="center">
<td><div id="cal29" class="calText">&nbsp;</div></td>
<td><div id="cal30" class="calText">&nbsp;</div></td>
<td><div id="cal31" class="calText">&nbsp;</div></td>
<td><div id="cal32" class="calText">&nbsp;</div></td>
<td><div id="cal33" class="calText">&nbsp;</div></td>
<td><div id="cal34" class="calText">&nbsp;</div></td>
<td><div id="cal35" class="calText">&nbsp;</div></td>
</tr><tr align="center">

<td><div id="cal36" class="calText">&nbsp;</div></td>
<td><div id="cal37" class="calText">&nbsp;</div></td>
<td><div id="cal38" class="calText">&nbsp;</div></td>
<td><div id="cal39" class="calText">&nbsp;</div></td>
<td><div id="cal40" class="calText">&nbsp;</div></td>
<td><div id="cal41" class="calText">&nbsp;</div></td>
<td><div id="cal42" class="calText">&nbsp;</div></td>
</table></center>
</div></div></layer>
<!--END OF CALENDER HTML CODE -->

</td></tr></table>

</body>
</html>

jscheuer1
12-03-2005, 08:39 PM
It just occurred to me that you probably only want the date in a specified year to be linked. If so, change the 'specialDays' array to:


var specialDays=new Array()
// set special days for links below: specialDays[x]=['month_number', 'date_number', 'year_number']
specialDays[0]=['12', '25', '2005']
specialDays[1]=['1', '1', '2006']

and this line in my code:


if ([mi+1]==specialDays[i_tem][0]&&[i-offsetD+1]==specialDays[i_tem][1]){

to:


if ([mi+1]==specialDays[i_tem][0]&&[i-offsetD+1]==specialDays[i_tem][1]&&cal_y.innerHTML==specialDays[i_tem][2]){

milkman671
12-04-2005, 06:50 PM
John-

Very nice work, I modified the css styles to fit the theme of my site, typed my events into the specialDays array, and it works great!

Thanks for all of your help...