Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.parent {
width:200px;
}
.parent2 {
position:absolute;left:180px;top:220px;width:200px;
}
.main {
width:200px;
border:1px solid black;
padding: 0px;
}
.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;
}
.today{
font-weight: bold;
color: red;
}
.satsun {
background-Color:#FFCC66;
}
</style>
<script type="text/javascript" >
/***********************************************
* 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
***********************************************/
var Months=['January','February','March','April','May','June','July','August','September','October','November','December'];
function buildCal(pcls,days,cM,brdr,cH,cDW,cD,today,satsun,more,id){
var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
var todaydate=new Date(),y=todaydate.getFullYear(),m=todaydate.getMonth()+1;
return build([brdr,cH,cDW,cD,today,satsun,days,y,m,id,cM],more,pcls);
}
function build(data,more,pcls){
var obj=document.getElementById(data[9]),y=data[7],m=data[8],today=new Date(),todaydate=new Date(),d=new Date(y,m-1,1).getDay(),md=new Date(y,m,1,-1,1,1).getDate(),ud=data[6].split(',')[1]=='ddmmyy',i=!ud||d==0?0:7,os=ud?-6:0,t='',s=0,day,nd;
if (pcls){
t+='<div class="'+pcls+'">';
}
t+='<table class="'+data.join(' ')+'" cols="7" cellpadding="0" border="'+data[0]+'" cellspacing="0" ><tr align="center">';
if (more!=false){
t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,-1);" style="cursor:pointer;" ><</td>';
}
t+='<td colspan="'+(more!=false?'5':'7')+'" align="center" class="'+data[1]+'">'+Months[m-1]+' - '+y+'</td>';
if (more!=false){
t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,1);" style="cursor:pointer;" >></td>';
}
t+='</tr><tr align="center">';
for(;s<7;s++){
t+='<td class="'+data[2]+'">'+data[6].substr(s,1)+'</td>';
}
t+='</tr><tr align="center">';
while (i<20||(isFinite(day)&&day!=md)||i%7!=0){
day=i+os>=d&&i<md+d-os?i+1+os-d:' ';
nd=isFinite(day)?new Date(y,m-1,day,1,1,1).getDay():'?';
t+='<td '+(obj&&day!=' '?' onmouseup="Input(this);" style="cursor:pointer;" ':'')+'class="'+data[3]+(today&&today!='undefined'&&day==today.getDate()&&y==today.getFullYear()&&m-1==today.getMonth()?' '+data[4]:'')+(data[5]&&data[5]!='undefined'&&(nd==0||nd==6)?' '+data[5]:'')+'">'+day+'</td>';
if(i%7==6){
t+='</tr><tr align="center">';
}
i++;
}
t+='</tr></table>'
if (pcls){
t+='</div>'
}
return t;
}
function UpDate(t,bf){
while (t.nodeName.toUpperCase()!='TABLE'){
t=t.parentNode;
}
if (t.nodeName.toUpperCase()=='TABLE'){
var data=t.className.split(' '),y=data[7],m=data[8],todaydate=new Date(y,m-1+bf,1,1,1),y=todaydate.getFullYear(),m=todaydate.getMonth()+1;
t.parentNode.innerHTML=build([data[0],data[1],data[2],data[3],data[4],data[5],data[6],y,m,data[9],data[10]]);
}
}
function Input(t){
var day=t.innerHTML,data,ud,m,day;
while (t.nodeName.toUpperCase()!='TABLE'){
t=t.parentNode;
}
if (t.nodeName.toUpperCase()=='TABLE'){
data=t.className.split(' '),ud=data[6].split(',')[1]=='ddmmyy',m=Months[data[8]-1].substring(0,3),day=day>9?day:'0'+day,obj=document.getElementById(data[9]);
obj[obj.nodeName.toUpperCase()!='INPUT'?'innerHTML':'value']=(ud?day:m)+'-'+(ud?m:day)+'-'+data[7];
}
}
</script>
</head>
<body>
<span id="tst" />Date</span>
<script type="text/javascript">
document.write(buildCal('parent','MTWTFSS,ddmmyy','main',1,'month','daysofweek','days','today','satsun',false,'tst'));
</script>
<br /><br />
<input id="tst1" />
<script type="text/javascript">
document.write(buildCal('parent2','SMTWTFS,mmddyy','main',1,'month','daysofweek','days','today','satsun',true,'tst1'));
</script>
</body>
</html>
Basic Calendar: empty week appears
Reply With Quote
Bookmarks