Unfortunately, createElement, createTextNode, and appendChild didn't fix my problem. Here's a more detailed rundown of what's happening and what I want.
I have a calender in which appointments can be entered and the color of the day chosen depending on what's entered into the script. It's not an elegant solution, but it works well enough. Each calender month is a table, which is hard-coded right into the HTML. The script populates these tables with the appropriate dates, apppointments, and background colors. Unfortunately, my appointment text causes the calender's table cells to stretch, both horizontally and vertically, making the days without any appointments look squished.
I've tried setting the cells' width, height, and overflow properties in the hopes of getting a more uniform shape, but nothing has worked. Is it impossible to keep the calendars looking uniform, given that they're populated by JavaScript? Or am I going about it the wrong way? Below is my code.
HTML:
<table class="calendar" id="January" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">January</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="February" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">February</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="March" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">March</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="April" cellspacing="0" style="display: auto;">
<tr>
<th colspan="7">April</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="May" cellspacing="0" cellpadding="5" style="display: auto;">
<tr>
<th colspan="7">May</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="June" cellspacing="0" cellpadding="5" style="display: auto;">
<tr>
<th colspan="7">June</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="July" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">July</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="August" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">August</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="September" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">September</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="October" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">October</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="November" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">November</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="calendar" id="December" cellspacing="0" cellpadding="5" style="display: none;">
<tr>
<th colspan="7">December</th>
</tr>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
CSS:
.calendar{
margin: 0 0 2px 0;
width: 525px;
}
.calendar th{
padding: 5px;
width: 76px;
border: 1px solid #000000;
text-align: center;
}
.calendar td{
border: 1px solid #000000;
padding: 5px;
width: 76px;
height: 76px;
overflow: auto;
text-align: right;
}
JavaScript:
var W3CDOM = (document.createElement && document.getElementsByTagName);
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var numDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //Number of days in each month...be sure to make February equal to 29 on leap years
var firstDays = [2, 5, 5, 1, 3, 6, 1, 4, 7, 2, 5, 7]; //1 = Sunday, 2 = Monday, etc.
var apps = [
[16, 4, 16, 4, "AMITY I 8:30 - 11:30", "amity"],
[16, 4, 16, 4, "Word II 6:00 - 9:00", "amity"],
[17, 4, 17, 4, "Excel II 9:00 - 4:00", "microsoft"],
[17, 4, 17, 4, "PowerPoint II 6:00 - 9:00", "microsoft"],
[18, 4, 18, 4, "PowerPoint I 9:00 - 4:00", "microsoft"],
[18, 4, 18, 4, "Word II 6:00 - 9:00", "microsoft"],
[19, 4, 19, 4, "AMITY II 8:30 - 11:30", "amity"],
[19, 4, 19, 4, "PowerPoint II 9:00 - 4:00", "amity"],
[20, 4, 20, 4, "Access III 9:00 - 4:00", "microsoft"],
[21, 4, 21, 4, "Into to Vista 9:00 - 11:00", "microsoft"],
[23, 4, 23, 4, "Excel II 6:00 - 9:00", "microsoft"],
[24, 4, 24, 4, "Access II 6:00 - 9:00", "microsoft"],
[25, 4, 25, 4, "Excell II 6:00 - 9:00", "microsoft"],
[26, 4, 26, 4, "BOSC 9:00 - 4:00", "bosc"],
[26, 4, 26, 4, "Access II 6:00 - 9:00", "bosc"],
[28, 4, 28, 4, "Intro to Vista 9:00 - 11:00", "microsoft"],
[30, 4, 30, 4, "AMITY I 8:30 - 11:30", "amity"],
[30, 4, 30, 4, "Word I 9:00 - 4:00", "amity"],
[30, 4, 30, 4, "Word I 6:00 - 9:00", "microsoft"],
[1, 5, 1, 5, "Excel III 9:00 - 4:00", "microsoft"],
[1, 5, 1, 5, "PowerPoint I 6:00 - 9:00", "microsoft"],
[2, 5, 2, 5, "Powerpoint II 9:00 - 4:00", "microsoft"],
[2, 5, 2, 5, "Word I 6:00 - 9:00", "microsoft"],
[3, 5, 3, 5, "AMITY II 8:30 - 11:30", "amity"],
[3, 5, 3, 5, "BOSC 9:00 - 4:00", "amity"],
[3, 5, 3, 5, "PowerPoint I 6:00 - 9:00", "amity"],
[4, 5, 4, 5, "Access I 9:00 - 4:00", "microsoft"],
[5, 5, 5, 5, "Intro to Vista 9:00 - 11:00", "microsoft"],
[7, 5, 7, 5, "Word II 9:00 - 4:00", "microsoft"],
[7, 5, 7, 5, "Excel I 6:00 - 9:00", "microsoft"],
[8, 5, 8, 5, "Excel I 9:00 - 4:00", "microsoft"],
[8, 5, 8, 5, "Access I 6:00 - 9:00", "microsoft"],
[9, 5, 9, 5, "PowerPoint III 9:00 - 4:00", "microsoft"],
[9, 5, 9, 5, "Excel I 6:00 - 9:00", "microsoft"],
[10, 5, 10, 5, "BOSC 9:00 - 4:00", "bosc"],
[10, 5, 10, 5, "Access I 6:00 - 9:00", "bosc"],
[11, 5, 11, 5, "Access II 9:00 - 4:00", "microsoft"],
[12, 5, 12, 5, "Intro to Vista 9:00 - 11:00", "microsoft"],
[14, 5, 14, 5, "Word III 9:00 - 4:00", "microsoft"],
[14, 5, 14, 5, "Word II 6:00 - 9:00", "microsoft"],
[15, 5, 15, 5, "Excel II 9:00 - 4:00", "microsoft"],
[15, 5, 15, 5, "PowerPoint II 6:00 - 9:00", "microsoft"],
[16, 5, 16, 5, "PowerPoint I 9:00 - 4:00", "microsoft"],
[16, 5, 16, 5, "Word II 6:00 - 9:00", "microsoft"],
[17, 5, 17, 5, "BOSC 9:00 - 4:00", "bosc"],
[17, 5, 17, 5, "PowerPoint II 6:00 - 9:00", "bosc"],
[18, 5, 18, 5, "Access III 9:00 - 4:00", "microsoft"],
[19, 5, 19, 5, "Intro to Vista 9:00 - 11:00", "microsoft"],
[21, 5, 21, 5, "Excel II 6:00 - 9:00", "microsoft"],
[22, 5, 22, 5, "Access II 6:00 - 9:00", "microsoft"],
[23, 5, 23, 5, "Excel II 6:00 - 9:00", "microsoft"],
[24, 5, 24, 5, "BOSC 9:00 - 4:00", "bosc"],
[24, 5, 24, 5, "Access II 6:00 - 9:00", "bosc"],
[26, 5, 26, 5, "Intro to Vista 9:00 - 11:00", "microsoft"],
[28, 5, 28, 5, "Word I 9:00 - 4:00", "microsoft"],
[28, 5, 28, 5, "Word I 6:00 - 9:00", "microsoft"],
[29, 5, 29, 5, "Excel III 9:00 - 4:00", "microsoft"],
[29, 5, 29, 5, "PowerPoint I 6:00 - 9:00", "microsoft"],
[30, 5, 30, 5, "PowerPoint II 9:00 - 4:00", "microsoft"],
[30, 5, 30, 5, "Word I 6:00 - 9:00", "microsoft"],
[31, 5, 31, 5, "BOSC 9:00 - 4:00", "bosc"],
[31, 5, 31, 5, "PowerPoint I 6:00 - 9:00", "bosc"],
[1, 6, 1, 6, "Access I 9:00 - 4:00", "microsoft"],
[2, 6, 2, 6, "Intro to Vista 9:00 - 11:00", "microsoft"],
[4, 6, 4, 6, "Word II 9:00 - 4:00", "microsoft"],
[4, 6, 4, 6, "Excel I 6:00 - 9:00", "microsoft"],
[5, 6, 5, 6, "Excel I 9:00 - 4:00", "microsoft"],
[5, 6, 5, 6, "Access I 6:00 - 9:00", "microsoft"],
[6, 6, 6, 6, "PowerPoint III 9:00 - 4:00", "microsoft"],
[6, 6, 6, 6, "Excel I 6:00 - 9:00", "microsoft"],
[7, 6, 7, 6, "BOSC 9:00 - 4:00", "bosc"],
[7, 6, 7, 6, "Access I 6:00 - 9:00", "bosc"],
[8, 6, 8, 6, "Access II 9:00 - 4:00", "microsoft"],
[9, 6, 9, 6, "Intro to Vista 9:00 - 11:00", "microsoft"],
[11, 6, 11, 6, "Word III 9:00 - 4:00", "microsoft"],
[11, 6, 11, 6, "Word II 6:00 - 9:00", "microsoft"],
[12, 6, 12, 6, "Excel II 9:00 - 4:00", "microsoft"],
[12, 6, 12, 6, "PowerPoint II 6:00 - 9:00", "microsoft"],
[13, 6, 13, 6, "PowerPoint I 9:00 - 4:00", "microsoft"],
[13, 6, 13, 6, "Word II 6:00 - 9:00", "microsoft"],
[14, 6, 14, 6, "BOSC 9:00 - 4:00", "bosc"],
[14, 6, 14, 6, "PowerPoint II 6:00 - 9:00", "bosc"],
[15, 6, 15, 6, "Access III 9:00 - 4:00", "microsoft"],
[16, 6, 16, 6, "Intro to Vista 9:00 - 11:00", "microsoft"],
[18, 6, 18, 6, "Excel II 6:00 - 9:00", "microsoft"],
[19, 6, 19, 6, "Access II 6:00 - 9:00", "microsoft"],
[20, 6, 20, 6, "Excel II 6:00 - 9:00", "microsoft"],
[21, 6, 21, 6, "BOSC 9:00 - 4:00", "bosc"],
[21, 6, 21, 6, "Access II 6:00 - 9:00", "bosc"],
[23, 6, 23, 6, "Intro to Vista 9:00 - 11:00", "microsoft"],
[25, 6, 25, 6, "Word I 9:00 - 4:00", "microsoft"],
[25, 6, 25, 6, "Word I 6:00 - 9:00", "microsoft"],
[26, 6, 26, 6, "Excel III 9:00 - 4:00", "microsoft"],
[26, 6, 26, 6, "PowerPoint I 6:00 - 9:00", "microsoft"],
[27, 6, 27, 6, "PowerPoint II 9:00 - 4:00", "microsoft"],
[27, 6, 27, 6, "Word I 6:00 - 9:00", "microsoft"],
[28, 6, 28, 6, "BOSC 9:00 - 4:00", "bosc"],
[28, 6, 28, 6, "PowerPoint I 6:00 - 9:00", "bosc"],
[29, 6, 29, 6, "Access I 9:00 - 4:00", "microsoft"],
[30, 6, 30, 6, "Intro to Vista 9:00 - 11:00", "microsoft"]
]; // Format is: Appt start day, appt start month, appt end day, appt end month, appt description, appt category
function init(){
if(!W3CDOM) return;
printCalendar();
}
function printCalendar(){
for(var i = 0; i < 12; i++){
printMonth(i);
}
}
function printMonth(monthNum){
var month = document.getElementById(months[monthNum]);
var days = month.getElementsByTagName('td');
var date = 1;
var start = firstDays[monthNum] - 1;
var dayText;
var dayInfo;
var tmpText;
for(var i = 0; i < days.length; i++){ //To make the bottom row look pretty if its cells are empty
days[i].innerHTML = " ";
}
for (i = start; date <= numDays[monthNum]; i++){
dayInfo = checkDate(monthNum, date);
days[i].style.backgroundColor = dayInfo[0];
days[i].style.color = dayInfo[1];
days[i].setAttribute("title", dayInfo[2]);
var span = document.createElement('span');
dayText = date++;
span.style.fontWeight = 'bold';
span.appendChild(document.createTextNode(dayText));
days[i].appendChild(span);
days[i].appendChild(document.createElement('br'));
days[i].appendChild(document.createElement('br'));
for(var j = 0; j < dayInfo[2].length; j++){
tmpText = dayInfo[2][j];
days[i].appendChild(document.createTextNode(tmpText));
days[i].appendChild(document.createElement('br'));
days[i].appendChild(document.createElement('br'));
}
}
}
function checkDate(monthNum, dayNum){
var output = new Array();
var desc = new Array();
var bgColor = "";
var color = "";
var index = 0;
for(var i = 0; i < apps.length; i++){
if((monthNum + 1) >= apps[i][1] && (monthNum + 1) <= apps[i][3]){ //if we're in the range of the appointment's months
if(apps[i][1] == apps[i][3]){ // if the appointment takes place in just one month
if(dayNum >= apps[i][0] && dayNum <= apps[i][2]){ // setting the range of dates in that month
desc[index++] = apps[i][4];
bgColor = apps[i][5];
}
}
else if((monthNum + 1) == apps[i][1]){ //if we're in the first month of an appointment that goes over the end of the start month
if(dayNum >= apps[i][0]){ // if the date is greater or equal to the starting date of the appointment
desc[index++] = apps[i][4];
bgColor = apps[i][5];
}
}
else if((monthNum + 1) == apps[i][3]){ // if we're in the last month of an appointment that goes over the end of the start month
if(dayNum <= apps[i][2]){ // if the date is less than or equal to the ending date of the appointment
desc[index++] = apps[i][4];
bgColor = apps[i][5];
}
}
else{ // if we're somewhere in between a multi-month appointment
desc[index++] = apps[i][4];
bgColor = apps[i][5];
}
}
}
if(bgColor == "microsoft"){
bgColor = "#284DBF";
color = "#FFFFFF";
}
else if(bgColor == "amity"){
bgColor = "#D10000";
color = "#FFFFFF";
}
else if(bgColor == "bosc"){
bgColor = "#000000";
color = "#FFFFFF";
}
else{
bgColor = "white";
}
output[0] = bgColor;
output[1] = color;
output[2] = desc;
return output;
}
window.onload = init;