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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.