Hi,
In this script, I will show you how to make a calendar in Javascript with a transparency effect.
You can see the final result:
Javascript Calendar
This calendar is simple, first, we get the day, the month and the year as a number form.
The calendar will be a table and the title will be the curent date.
We will make a Javascript Array containing the number of days in each month. If we are in a leap year, the febrary month will have 29 days. We will get the week day of the first day of the month. Then, we will make a loop to show all the days of the month.
This is the code of the Javascript Calendar:
calendar.js
function setStyle(id,style,value)
{
id.style[style] = value;
}
function opacity(el,opacity)
{
setStyle(el,"filter:","alpha(opacity="+opacity+")");
setStyle(el,"-moz-opacity",opacity/100);
setStyle(el,"-khtml-opacity",opacity/100);
setStyle(el,"opacity",opacity/100);
}
function calendar()
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getYear();
if(year<=200)
{
year += 1900;
}
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if(year%4 == 0 && year!=1900)
{
days_in_month[1]=29;
}
total = days_in_month[month];
var date_today = day+' '+months[month]+' '+year;
beg_j = date;
beg_j.setDate(1);
if(beg_j.getDate()==2)
{
beg_j=setDate(0);
}
beg_j = beg_j.getDay();
document.write('<table class="cal_calendar" onload="opacity(document.getElementById(\'cal_body\'),20);"><tbody id="cal_body"><tr><th colspan="7">'+date_today+'</th></tr>');
document.write('<tr class="cal_d_weeks"><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr>');
week = 0;
for(i=1;i<=beg_j;i++)
{
document.write('<td class="cal_days_bef_aft">'+(days_in_month[month-1]-beg_j+i)+'</td>');
week++;
}
for(i=1;i<=total;i++)
{
if(week==0)
{
document.write('<tr>');
}
if(day==i)
{
document.write('<td class="cal_today">'+i+'</td>');
}
else
{
document.write('<td>'+i+'</td>');
}
week++;
if(week==7)
{
document.write('</tr>');
week=0;
}
}
for(i=1;week!=0;i++)
{
document.write('<td class="cal_days_bef_aft">'+i+'</td>');
week++;
if(week==7)
{
document.write('</tr>');
week=0;
}
}
document.write('</tbody></table>');
opacity(document.getElementById('cal_body'),70);
return true;
}
calendar.css
.cal_calendar
{
border:1px solid black;
padding:1px;
background-color:#4594ff;
width:300px;
margin:auto;
height:246px;
background-image:url('http://www.webestools.com/ftp/ybouane/scripts_tutorials/javascript/calendar/bak-300-250.gif');
}
.cal_calendar th
{
border:1px solid black;
background-color:#ffffff;
width:36px;
}
.cal_calendar td
{
border:1px solid black;
background-color:#ffffff;
text-align:center;
width:36px;
height:36px;
}
.cal_today
{
color:#ff0000;
font-weight:bold;
}
.cal_days_bef_aft
{
color:#5a779e;
}
calendar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Calendar</title>
<link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calendar.css" />
<script type="text/javascript" src="calendar.js"></script>
</head>
<body>
<script type="text/javascript">
calendar();
</script>
</body>
</html>Test
I hope this script will be useful
Similar Scripts and Tutorials
The 09/08/2010 at 19:35:21
Simple PHP Forum Script - php forum easy simple script code download free php forum mysql
Javascript Calculator - Buttons calculator keyboard support operations modulo
Go to previous and next page in Javascript - history object
Display Date and Time in Javascript - real-time clock javascript date time
Top site PHP script - install a php top site on his web site