Menu
I’m trying to modify a script from the ‘Dynamic Drive’ site that displays a calendar.
I modified it so that when you click on a day, it posts that mm/dd/yyyy format to the adjacent textarea.
Problem is, when I do it again, it appends to the textarea rather than move down to a new line.
I have tried various combinations of ‘n’ in the write to the textarea and the commented-out alert show the correct format.
What do I need to do to start the next date on a new line in the text area?
[code]
<html>
<head>
<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;
cursor:pointer;
}
.days #today{
font-weight: bold;
color: red;
}
.btnCal {
width:36px;
}
</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
***********************************************/
function buildCal(m, y, cM, cH, cDW, cD, brdr){
var mn=[‘January’,’February’,’March’,’April’,’May’,’June’,’July’,’August’,’September’,’October’,’November’,’December’];
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=”;
t += t='<div class=”‘+cM+'”>’;
t += ‘<table class=”‘+cM+'” cols=”7″ cellpadding=”0″ border=”‘+brdr+'” cellspacing=”0″>’;
t += ‘<tr align=”center”>’;
t += ‘<td colspan=”7″ align=”center” class=”‘+cH+'”>’+mn[m-1]+’ – ‘+y+'</td></tr><tr align=”center”>’;
for (s=0;s<7;s++) t+='<td class=”‘+cDW+'”>’+”SMTWTFS”.substr(s,1)+'</td>’;
t+='</tr><tr align=”center”>’;
for(i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : ‘ ’;
var xt = ”; if (x==scanfortoday) xt='<span id=”today”>’+x+'</span>’ //DD added
if (xt == ”) xt = x;
// t+='<td class=”‘+cD+'” onclick=”alert(‘+formatMDY(m,x,y)+’)”>’+xt+'</td>’;
t+='<td class=”‘+cD+'” onclick=”document.getElementById(‘selectedDates’).value+=’+formatMDY(m,x,y)+’n”>’+xt+'</td>’;
if(((i)%7==0)&&(i<36))t+='</tr><tr align=”center”>’;
}
return t+='</tr></table></div>’;
}
function formatMDY(m,x,y) {
var MM = (m<10)?’0’+m:m;
var DD = (x<10)?’0’+x:x;
return “‘”+MM+’/’+DD+’/’+y+”‘”;
}
</script>
</head>
<body>
<div><center>
<table border=’0’><tr><td>
<div id=”SingleCal”></div
<script type=”text/javascript”>
var todaydate = new Date();
var curmonth = 0;
var curyear = 0;
function getNow() {
todaydate=new Date()
curmonth=todaydate.getMonth()+1 //get current month (1-12)
curyear=todaydate.getFullYear() //get current year
}
function ShowMonth(curmonth,curyear) {
document.getElementById(‘SingleCal’).innerHTML = buildCal(curmonth ,curyear, “main”, “month”, “daysofweek”, “days”, 1);
}
getNow(); ShowMonth(curmonth,curyear);
</script>
<button class=”btnCal” onclick=”curyear-=1;ShowMonth(curmonth,curyear)”><Y</button>
<button class=”btnCal” onclick=”curmonth–;if (curmonth<1) { curmonth=12; };ShowMonth(curmonth,curyear)”><M</button>
<button onclick=”getNow();ShowMonth(curmonth,curyear)”>Now</button>
<button class=”btnCal” onclick=”curmonth++;if (curmonth>12) { curmonth=1; };ShowMonth(curmonth,curyear)”>M></button>
<button class=”btnCal” onclick=”curyear+=1;ShowMonth(curmonth,curyear)”>Y></button>
</center>
</td><td>
<textarea id=”selectedDates” rows=”8″ cols=”16″></textarea><br>
<button onclick=”document.getElementById(‘selectedDates’).value=””>Clear</button>
</td></tr>
</table>
</div>
</body>
</html>