Need Calendar Script

**jscheuer1** · 01-16-2008, 04:18 PM

Ooops, I misunderstood your question. I hadn't scrolled far enough down on the demo page to see the bit with the select box, and thought you wanted to display a full year all at once. But, I also was playing around with the script after I posted and found some minor problems with it, fixed those and altered it slightly to work better with an even more robust block_dates() function. Now I get what you mean and see a slightly better way to draw the select.

First, use this modified external basiccalendar.js file:

Code:

buildCal.mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
function buildCal(m, y, cM, cH, cDW, cD, brdr){
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];

var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st

var todaydate=new Date() //DD added
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added

dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+buildCal.mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(var s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(var i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : '&nbsp;';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}

And here is a demo page that puts it all together:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drop Down Calendar 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>
<form>
<select id="selectcal" onChange="updatecalendar(this.options);block_dates();">
<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
}
;(function(){
for (var i=0; i<12; i++) //display option for 12 months of the year
document.write('<option value="'+i+'"'+(i==curmonth-1? 'selected' : '')+'>'+themonths[i]+' '+curyear+'</option>')
})();
window.onload=function(){updatecalendar(document.getElementById('selectcal').options);block_dates();};
</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">

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

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

//Configure blocked dates, same date in each month
var blocked_dates=[1, 25, 31]

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

//Configure block all weekends by month
var blocked_weekends=['May', 'June']

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

function block_dates(){
if(!block_dates.run){
for (var i = 0; i < blocked_dates.length; i++)
for (var j = 0; j < buildCal.mn.length; j++)
blocked.push([buildCal.mn[j], blocked_dates[i]]);
block_dates.run=true;
}
var get_col=function (cell){
var c=0;while (cell=cell.previousSibling)c++;
return c;
}
var dates=document.getElementsByTagName('td');
var c_month='';

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

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

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

I've added a few new ways to block dates as well. If there are any that you don't want to use, set them empty, ex:

Code:

//Configure blocked dates, same date in each month
var blocked_dates=[]

**Dazza30** · 01-16-2008, 09:01 PM

Originally Posted by jscheuer1

Ooops, I misunderstood your question. I hadn't scrolled far enough down on the demo page to see the bit with the select box, and thought you wanted to display a full year all at once. But, I also was playing around with the script after I posted and found some minor problems with it, fixed those and altered it slightly to work better with an even more robust block_dates() function. Now I get what you mean and see a slightly better way to draw the select.

First, use this modified external basiccalendar.js file:

Code:

buildCal.mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
function buildCal(m, y, cM, cH, cDW, cD, brdr){
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];

var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st

var todaydate=new Date() //DD added
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added

dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+buildCal.mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(var s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(var i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : '&nbsp;';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}

And here is a demo page that puts it all together:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drop Down Calendar 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>
<form>
<select id="selectcal" onChange="updatecalendar(this.options);block_dates();">
<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
}
;(function(){
for (var i=0; i<12; i++) //display option for 12 months of the year
document.write('<option value="'+i+'"'+(i==curmonth-1? 'selected' : '')+'>'+themonths[i]+' '+curyear+'</option>')
})();
window.onload=function(){updatecalendar(document.getElementById('selectcal').options);block_dates();};
</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">

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

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

//Configure blocked dates, same date in each month
var blocked_dates=[1, 25, 31]

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

//Configure block all weekends by month
var blocked_weekends=['May', 'June']

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

function block_dates(){
if(!block_dates.run){
for (var i = 0; i < blocked_dates.length; i++)
for (var j = 0; j < buildCal.mn.length; j++)
blocked.push([buildCal.mn[j], blocked_dates[i]]);
block_dates.run=true;
}
var get_col=function (cell){
var c=0;while (cell=cell.previousSibling)c++;
return c;
}
var dates=document.getElementsByTagName('td');
var c_month='';

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

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

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

I've added a few new ways to block dates as well. If there are any that you don't want to use, set them empty, ex:

Code:

//Configure blocked dates, same date in each month
var blocked_dates=[]

Thanks your a star!

Thread: Need Calendar Script

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions