Need Calendar Script

[Troutslayer]

I am looking for a calendar script that will show my availability to potential clients. I am using FrontPage 03 as my editor (simply because it came with my computer package and I can't afford Dreamweaver and am a slave to GUI).

I like this: http://www.dynamicdrive.com/dynamici...iccalendar.htm

but need to be able to block out individual days as I book them.

Here's the current page without java: www.fishwithafly.net/availability.htm (it takes too long to load.)

Thanks for your help.

[jscheuer1]

Block out, how? Would a different color background for those dates be sufficient?

[Troutslayer]

Sure. If that's an easy solution...I don't know how to write java script but have figured out how to manipulate it through trial and error. I do not see a code for the basiccalendar script that will allow me to change the font on numbers or backgrounds.

[jscheuer1]

Well then, all you need is this bit of code (red) after the buildCal calls (otherwise from the demo):

<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)+'<br>');
document.write(buildCal(curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 1)+'<br>');

function block_dates(){

//Configure blocked dates and blocked color below
var blocked=[['April',8], ['March',1], ['March',6], 
['March',7], ['March',23], ['April',17]]
var blocked_color='lightblue'

////////////////Stop Editing/////////////
var dates=document.getElementsByTagName('td')
var c_month
for (var j_tem = 0; j_tem < blocked.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
dates[i_tem].style.backgroundColor=blocked_color
break
}
}
}
block_dates();
</script>

Notes: As you can see, the order of the blocked dates doesn't matter. If you need a line break in the blocked dates entries, do it after a comma that follows a closing bracket, as shown above. Don't forget the extra opening and closing brackets that delimit the entire array of blocked dates or the single quotes delimiting the month name in each entry. Also note that there is no comma after the last entry in the blocked array. Case matters with the month names. If you use several script blocks on your page to set up the various calendars (like the 'Displaying multiple calendar months' example using a table on the demo page), you can use the red code alone in a script block as long as it is after all of the buildCal calls on the page.

[jscheuer1]

Here is a slightly more robust version:

<script type="text/javascript">
function block_dates(){

//Configure blocked dates
var blocked=[['April',8], ['March',1], ['March',6], 
['March',7], ['March',23], ['Feb',11]]

//Configure blocked background color
var blocked_color='lightblue'

//Configure block all weekdays by month
var blocked_weekdays=['Feb', 'April']

////////////////Stop Editing/////////////

function get_col(cell){
var r=cell.parentNode.childNodes
for (var i_tem = 0; i_tem < r.length; i_tem++)
if (r[i_tem]==cell)
break
return i_tem;
}
var dates=document.getElementsByTagName('td')
var c_month=''

for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
dates[i_tem].style.backgroundColor=blocked_color
}

for (var j_tem = 0; j_tem < blocked.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
dates[i_tem].style.backgroundColor=blocked_color
break
}
}
}
block_dates();

</script>

[Dazza30]

Well then, all you need is this bit of code (red) after the buildCal calls (otherwise from the demo):

<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)+'<br>');
document.write(buildCal(curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 1)+'<br>');

function block_dates(){

//Configure blocked dates and blocked color below
var blocked=[['April',8], ['March',1], ['March',6], 
['March',7], ['March',23], ['April',17]]
var blocked_color='lightblue'

////////////////Stop Editing/////////////
var dates=document.getElementsByTagName('td')
var c_month
for (var j_tem = 0; j_tem < blocked.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
dates[i_tem].style.backgroundColor=blocked_color
break
}
}
}
block_dates();
</script>

Notes: As you can see, the order of the blocked dates doesn't matter. If you need a line break in the blocked dates entries, do it after a comma that follows a closing bracket, as shown above. Don't forget the extra opening and closing brackets that delimit the entire array of blocked dates or the single quotes delimiting the month name in each entry. Also note that there is no comma after the last entry in the blocked array. Case matters with the month names. If you use several script blocks on your page to set up the various calendars (like the 'Displaying multiple calendar months' example using a table on the demo page), you can use the red code alone in a script block as long as it is after all of the buildCal calls on the page.

Hi

How would i go about using the blocked out dates code for the dynamic version of this calander script please

Script url

http://www.dynamicdrive.com/dynamici...iccalendar.htm

Thanks

[jscheuer1]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>


<script type="text/javascript" src="basiccalendar.js">

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script> 
</head>
<body>
<script type="text/javascript">

var todaydate=new Date()
var curmonth=1
var curyear=todaydate.getFullYear() //get current year

</script>

<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
</table>
<script type="text/javascript">
function block_dates(){

//Configure blocked dates
var blocked=[['April',8], ['March',1], ['March',6], 
['March',7], ['March',23], ['Feb',11]]

//Configure blocked background color
var blocked_color='lightblue'

//Configure block all weekdays by month
var blocked_weekdays=['Feb', 'April']

////////////////Stop Editing/////////////

function get_col(cell){
var r=cell.parentNode.childNodes
for (var i_tem = 0; i_tem < r.length; i_tem++)
if (r[i_tem]==cell)
break
return i_tem;
}
var dates=document.getElementsByTagName('td')
var c_month=''

for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
dates[i_tem].style.backgroundColor=blocked_color
}

for (var j_tem = 0; j_tem < blocked.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
dates[i_tem].style.backgroundColor=blocked_color
break
}
}
}
block_dates();

</script>
</body>
</html>

[jscheuer1]

Here's another way that always starts with the current month, and is more compact:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Basic Calendar - Full Year w/ Blocked Dates - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today {
font-weight: bold;
color: red;
}

</style>
<script type="text/javascript" src="basiccalendar.js">

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script> 
</head>
<body>
<script type="text/javascript">

//Configure blocked dates
var blocked=[['April',8], ['March',1], ['March',6], 
['March',7], ['March',23], ['Feb',11]]

//Configure blocked background color
var blocked_color='lightblue'

//Configure block all weekdays by month
var blocked_weekdays=['Feb', 'April']

////////////////Stop Editing/////////////

var todaydate=new Date();
var curmonth=todaydate.getMonth()+1; //get current month (1-12)
var curyear=todaydate.getFullYear(); //get current year
function doit(){var c=curmonth++;
document.write(buildCal( (c>12? c-12 : c),(c>12? curyear+1 : curyear), "main", "month", "daysofweek", "days", 1));};
;(function(){
document.write('<table border="0" cellspacing="0" cellpadding="3">');
for (var i = 0; i < 4; i++){
document.write('<tr>')
for (var j = 0; j < 3; j++)
document.write('<td width="33%"><script>doit();<\/script><\/td>');
document.write('<\/tr>');
};
document.write('<\/table>');

var block_dates=function (){
var get_col=function (cell){
var r=cell.parentNode.childNodes;
for (var i_tem = 0; i_tem < r.length; i_tem++)
if (r[i_tem]==cell)
break;
return i_tem;
}
var dates=document.getElementsByTagName('td');
var c_month='';

for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML;
if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
dates[i_tem].style.backgroundColor=blocked_color;
};

for (var j_tem = 0; j_tem < blocked.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML;
if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
dates[i_tem].style.backgroundColor=blocked_color;
break;
};};}
block_dates();})();
</script>
</body>
</html>

[Dazza30]

Thank you very much!

[Dazza30]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>


<script type="text/javascript" src="basiccalendar.js">

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script> 
</head>
<body>
<script type="text/javascript">

var todaydate=new Date()
var curmonth=1
var curyear=todaydate.getFullYear() //get current year

</script>

<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
</table>
<script type="text/javascript">
function block_dates(){

//Configure blocked dates
var blocked=[['April',8], ['March',1], ['March',6], 
['March',7], ['March',23], ['Feb',11]]

//Configure blocked background color
var blocked_color='lightblue'

//Configure block all weekdays by month
var blocked_weekdays=['Feb', 'April']

////////////////Stop Editing/////////////

function get_col(cell){
var r=cell.parentNode.childNodes
for (var i_tem = 0; i_tem < r.length; i_tem++)
if (r[i_tem]==cell)
break
return i_tem;
}
var dates=document.getElementsByTagName('td')
var c_month=''

for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
dates[i_tem].style.backgroundColor=blocked_color
}

for (var j_tem = 0; j_tem < blocked.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
dates[i_tem].style.backgroundColor=blocked_color
break
}
}
}
block_dates();

</script>
</body>
</html>

Thanks for the help youve given me so far.

But could you please take a look at the below code, ive replaced the Displaying multiple calendar months part of the script with the Display an entire year dynamically option. The script you provided me with now looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>


<script type="text/javascript" src="basiccalendar.js">

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script> 
</head>
<body>
<form>
<select onChange="updatecalendar(this.options)">
<script type="text/javascript">

var themonths=['January','February','March','April','May','June',
'July','August','September','October','November','December']

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

function updatecalendar(theselection){
var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)
if (document.getElementById)
document.getElementById("calendarspace").innerHTML=calendarstr
}

document.write('<option value="'+(curmonth+1)+'" selected="yes"></option>')
for (i=0; i<12; i++) //display option for 12 months of the year
document.write('<option value="'+i+'">'+themonths[i]+' '+curyear+'</option>')


</script>
</select>

<div id="calendarspace">
<script>
//write out current month's calendar to start
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 0))
</script>
</div>

</form><script type="text/javascript">
function block_dates(){

//Configure blocked dates
var blocked=[['January',18], ['February',11], ['March',6], 
['March',7], ['March',23], ['Feb',11]]

//Configure blocked background color
var blocked_color='lightblue'

//Configure block all weekdays by month
var blocked_weekdays=['Feb', 'April']

////////////////Stop Editing/////////////

function get_col(cell){
var r=cell.parentNode.childNodes
for (var i_tem = 0; i_tem < r.length; i_tem++)
if (r[i_tem]==cell)
break
return i_tem;
}
var dates=document.getElementsByTagName('td')
var c_month=''

for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
dates[i_tem].style.backgroundColor=blocked_color
}

for (var j_tem = 0; j_tem < blocked.length; j_tem++)
for (var i_tem = 0; i_tem < dates.length; i_tem++){
if (dates[i_tem].className=='month')
c_month=dates[i_tem].innerHTML
if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
dates[i_tem].style.backgroundColor=blocked_color
break
}
}
}
block_dates();

</script>
</body>
</html>

The dynamic calander displays correctly apart from it shows January twice and i can only highlight the dates i want in January.

Is there a way of getting this to work correctly with the dynamic calander?

Thanks again