Reorient calendar to vertical?

help me reorient this calendar script I have to vertical, if you can please !!    I need it in a long thin vertical column,  1 column per month, width = 2 to 3 months (variable that can be edited).   Like this --

     JAN       FEB

M     1         30
T     2          31
W    3           1
Th   4           2
F     5           3
S     6           4

You get the idea.  The column will be 28 lines high, 4 x 7 days, and leftover days wrap to the next month, and looking at it, it is easy enough to figure out that the straggling days belong to the previous month.

The script I have I would like to keep -- its design, and showing the current date, is just what I want, but there is only a narrow column to fit it into.  If the Q runs over normal length, I will continue it with additional Qs and more points -- like a scroll button would be nice, but is an extra question.  Have not seen this done, and looking at the code, I am not 100% confident how to reorient it to vertical.  Thanks for help.

Also, the only thing that needs to go in line in the HTML is the final document.write, the rest is in the JS.
<style type="text/css">
 
.calmain {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">
 
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='<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+'">'+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 : '&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>';
}
 
 
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, "calmain", "month", "daysofweek", "days", 1));
</script>

Open in new window

LVL 44
scrathcyboyAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Before I spend more time... Is this beginning to look like what you want?
<style type="text/css">
 
.calmain {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">
var mn='Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(",");
var ds = "M,T,W,Th,F,S,S".split(","); 
function buildCal(m, y, cM, cH, cDW, cD, brdr){
  var date = new Date(y,m-1,1,0,0,0)
  var isFebWith28Days = date.getMonth()==1 && date.getDay()==1; // and the first being a monday
  var lastDay = new Date(y,m,0,0,0,0);
  var startDay = date.getDay();
  var t='<div class="'+cM+'"><table class="'+cM+'" cellpadding="0" border="'+brdr+'" cellspacing="0">'
  t+='<tr><td align="center" class="'+cH+'">&nbsp;</td><td align="center" class="'+cH+'">'+mn[date.getMonth()]+'</td>';
  t+= (isFebWith28Days)?'':'<td align="center" class="'+cH+'">'+mn[date.getMonth()+1]+'</td>';
  t+='</tr>'
 
  while (startDay!=1) {
    date.setDate(date.getDate()-1); // move to monday
    startDay = date.getDay();
  }
 
  for (var i=0,dsCnt=0;i<28;i++, dsCnt++) {
    if (dsCnt>6) dsCnt=0;
    t += '<tr align="center">';
    t += '<td class="'+cDW+'">'+ds[dsCnt]+'</td>';
    if (i) t += '<td>'+i+'</td>';
    t += '</tr>';
  }
  t+='</table></div>';
  return t; 
} 
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, "calmain", "month", "daysofweek", "days", 1));
</script>

Open in new window

0
 
scrathcyboyAuthor Commented:
No doubt about you Michel, you are just a GENIUS.  That's enough work for the first part of this project -- when you are through, you will have created the only vertical scrollable calendar out there, and you have rights to the code, as far as I am concerned.  Part 2 continuing is here, hope you can carry it on.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23117035.html
0
All Courses

From novice to tech pro — start learning today.