Jump to content

createTextNode + appendChild

KevinM1

By KevinM1
in Javascript Help

 Share

Recommended Posts

KevinM1 Advanced Member

KevinM1

Posted
Posted

I currently have a calender script in which the dates of the month and whatever appointments it has are displayed using innerHTML.  Unfortunately, this method makes it so my external CSS file can't 'see' that info, so no styling can be applied to it.  Would changing innerHTML to a createTextNode/appendChild combo make it so my CSS file could style the calender's information?  Or would I have to go another route?

Link to comment
https://forums.phpfreaks.com/topic/45879-createtextnode-appendchild/
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

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;

jminkler Newbie

jminkler

Posted
Posted

Why are you creating child elements if the tables are already created? Set the <td>'s Id's to their date, and use innerHTML.

then create a properly formed multidimensional array broken down by each year, month and day 

 

then you can loop through the month you want like ..

var $year = $get_this_year;

var $mon = $get_this_mon;

for (var $x =0; $x < $my_dates[$year][$mon].length; $x++) {

    if($x < 10)

        $x = '0'+$x;

    $('div_day_'+$year+$mon+$x).innerHTML = $my_dates[$year][$mon][$x];

}

 

Of course you would want to setup your calendar to use a database, hooking the page up to Ajax and returning JSON/XML objects to populate the js mulitdimensional array.

 

Set the widths of the cells, as well as overflow:scroll  Try setting the table cellpadding and cellspacing to 0 as well. If all else fails look at other calendar applications on the web and inspect the page using Firebug addon for firefox.

KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

Why are you creating child elements if the tables are already created? Set the <td>'s Id's to their date, and use innerHTML.

then create a properly formed multidimensional array broken down by each year, month and day 

 

then you can loop through the month you want like ..

var $year = $get_this_year;

var $mon = $get_this_mon;

for (var $x =0; $x < $my_dates[$year][$mon].length; $x++) {

    if($x < 10)

        $x = '0'+$x;

    $('div_day_'+$year+$mon+$x).innerHTML = $my_dates[$year][$mon][$x];

}

 

Of course you would want to setup your calendar to use a database, hooking the page up to Ajax and returning JSON/XML objects to populate the js mulitdimensional array.

 

Set the widths of the cells, as well as overflow:scroll   Try setting the table cellpadding and cellspacing to 0 as well. If all else fails look at other calendar applications on the web and inspect the page using Firebug addon for firefox.

 

What you're describing is

 

1) way out of my league.  I really don't want to deal with a three or four dimensional array if I can help it, let alone all of the AJAX stuff that I don't know how to do.

2) is too complicated/involved for what I'm trying to do...I'm not designing an intranet calender application, just something quick and dirty that works.

3) not related to my problem in any event.  I'm merely trying to get each table's <td> to be rendered in a consistant size throughout.

 

If you actually looked at my CSS, you'd see that I do set an explicit width and height for my <td> elements (76px x 76px), as well as set their overflow to auto.  It doesn't work.  I'm thinking that the problem is that the CSS cannot see the text within the cells, since they're filled after the page is rendered via my JS script, so it doesn't know to apply the correct overflow value.  I originally had everything written to the calender via innerHTML, but that left me with cells of different sizes.  I switched to the W3C-approved createWhatever/appendChild method, as you can see above, and that still didn't fix my cell size issue.

 

Short of switching to a server-side option (which would be difficult as my host doesn't have PHP, and I'm pretty damned rusty when it comes to Perl or C++), is there anything - within reason - that I can do to enforce consistantly sized cells, or will I just have to make do with what I have?

  • 3 weeks later...
KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

Bumpbump.  Can anyone else suggest something non-AJAX for me to do with this issue?  Am I right in thinking that the table cells stretch because the HTML is rendered before the JS is applied, thereby causing the HTML (and attached CSS) to not recognize that the info written in the cells by the JS exists?

 

Calling Dr. Fenway... :D

KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

Sorry about the delay, I've been busy with other things... as long as the CSS styles are loaded, there shouldn't really be any issue here.  Try and design a very simple "helllo world" type script to test out the combinations.

 

I just want to make sure we're on the same page, as something in your previous post just caught my eye:

 

Hmmm.... I write out HTML with CSS all the time from JS

 

My CSS isn't written to the page from the JS script.  It's merely an external CSS file linked to the HTML.  Only the calendar dates, info, and background colors are written from the JS.  Would this make a difference?

KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

Well, I just tried a very simple version of my calendar, and I'm still getting table cells that stretch.  My code is below.

 

HTML:

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
   <table>
      <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>
</body>

</html>

 

My JavaScript:

var W3CDOM = (document.createElement && document.getElementsByTagName);

function init(){
   if(!W3CDOM) return;
   printCalendar();
}

function printCalendar(){
   var days = document.getElementsByTagName('td');
   
   for(var i = 0; i < days.length; i++){
      days[i].innerHTML = "I'm making a long ass paragraph to see if the table cells expand, so blah blah blah blah";
  if(i / 2 == 0){
     days[i].style.backgroundColor = "black";
	 days[i].style.color = "white";
  }
  
  else if(i / 3 == 1){
     days[i].style.backgroundColor = "red";
	 days[i].style.color = "white";
      }
  
  else if(i / 5 == 1){
     days[i].style.backgroundColor = "blue";
	 days[i].style.color = "white";
      }
  
  else{
     days[i].style.backgroundColor = "green";
	 days[i].style.color = "white";
      }
   }
}

window.onload = init;

 

My CSS:

td {
   width: 76px;
   height: 76px;
   overflow: auto;
}

 

I'm wondering if not using XHTML (or, at least, not declaring my document as XHTML) is messing it up.

KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

FF doesn't give me any problems on Linux.

 

Hmm..could it be a Windows XP thing, then?  Because both IE7 and FF on my comp give me the same problem.  With the simple example above, the widths of the cells are all approximately 76px, but their heights most definitely are not.  I'll post a screenshot when I get to work.

KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

Running WinXP here, and what you posted works fine in both FF and IE6.

 

Here are my screenshots of the simple examples:

 

http://www.nightslyr.com/ieexample.jpg

http://www.nightslyr.com/ffexample.jpg

 

As you can see, the cell height stretches to fit the text, which is what I don't want.  The widths are uniform because the text is the same, but when the text is different, that becomes messed up too:

 

http://www.nightslyr.com/ieliveversion.jpg

http://www.nightslyr.com/ffliveversion.jpg

 

I use the same

td {
   width: 76px;
   height: 76px;
   overflow: auto;
}

CSS for the live version.

 

EDIT: my OS chrome is just something one of my coworkers gave me...I am running XP.

KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

You can try and put DIVs inside the TDs.

 

I can't believe that I didn't think of that!

 

I've tried doing it that way twice, once on my test script, once on my live script.  It works great for my test script, but the height is still an issue with my live script.  This is odd, as I'm using more or less the same CSS in both cases.  As always, I'm going to post my code.  Please bear with me as some of it is large.

 

Test JavaScript:

var W3CDOM = (document.createElement && document.getElementsByTagName);

function init(){
   if(!W3CDOM) return;
   printCalendar();
}

function printCalendar(){
   var days = document.getElementsByTagName('td');
   
   for(var i = 0; i < days.length; i++){
      days[i].innerHTML = "<div>I'm making a long ass paragraph to see if the table cells expand, so blah blah blah blah</div>";
  if(i / 2 == 0){
     days[i].style.backgroundColor = "black";
	 days[i].style.color = "white";
  }
  
  else if(i / 3 == 1){
     days[i].style.backgroundColor = "red";
	 days[i].style.color = "white";
      }
  
  else if(i / 5 == 1){
     days[i].style.backgroundColor = "blue";
	 days[i].style.color = "white";
      }
  
  else{
     days[i].style.backgroundColor = "green";
	 days[i].style.color = "white";
      }
   }
}

window.onload = init;

 

Test HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
   <table>
      <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>
</body>

</html>

 

Test CSS:

td div{
   width: 80px;
   height: 80px;
   overflow: auto;
}

 

Live 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 9:00 - 11:30", "amity"],
[16, 4, 16, 4, "Word II 5:30 - 8:30", "amity"],
[17, 4, 17, 4, "Excel II 9:00 - 4:00", "microsoft"],
[17, 4, 17, 4, "PowerPoint II 5:30 - 8:30", "microsoft"],
[18, 4, 18, 4, "PowerPoint I 9:00 - 4:00", "microsoft"],
[18, 4, 18, 4, "Word II 5:30 - 8:30", "microsoft"],
[19, 4, 19, 4, "AMITY II 9:00 - 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 I 9:00 - 11:00", "microsoft"],
[23, 4, 23, 4, "Excel II 5:30 - 8:30", "microsoft"],
[24, 4, 24, 4, "Access II 5:30 - 8:30", "microsoft"],
[25, 4, 25, 4, "Excell II 5:30 - 8:30", "microsoft"],
[26, 4, 26, 4, "BOSC 9:00 - 4:00", "bosc"],
[26, 4, 26, 4, "Access II 5:30 - 8:30", "bosc"],
[28, 4, 28, 4, "Intro to Vista I 9:00 - 11:00", "microsoft"],
[30, 4, 30, 4, "AMITY I 9:00 - 11:30", "amity"],
[30, 4, 30, 4, "Word I 9:00 - 4:00", "amity"],
[30, 4, 30, 4, "Word I 5:30 - 8:30", "microsoft"],
[1, 5, 1, 5, "Excel III 9:00 - 4:00", "microsoft"],
[1, 5, 1, 5, "PowerPoint I 5:30 - 8:30", "microsoft"],
[2, 5, 2, 5, "Powerpoint II 9:00 - 4:00", "microsoft"],
[2, 5, 2, 5, "Word I 5:30 - 8:30", "microsoft"],
[3, 5, 3, 5, "AMITY II 9:00 - 11:30", "amity"],
[3, 5, 3, 5, "BOSC 9:00 - 4:00", "amity"],
[3, 5, 3, 5, "PowerPoint I 5:30 - 8:30", "amity"],
[4, 5, 4, 5, "Access I 9:00 - 4:00", "microsoft"],
[5, 5, 5, 5, "Intro to Vista II 9:00 - 11:00", "microsoft"],
[7, 5, 7, 5, "Word II 9:00 - 4:00", "microsoft"],
[7, 5, 7, 5, "Excel I 5:30 - 8:30", "microsoft"],
[8, 5, 8, 5, "Excel I 9:00 - 4:00", "microsoft"],
[8, 5, 8, 5, "Access I 5:30 - 8:30", "microsoft"],
[9, 5, 9, 5, "PowerPoint III 9:00 - 4:00", "microsoft"],
[9, 5, 9, 5, "Excel I 5:30 - 8:30", "microsoft"],
[10, 5, 10, 5, "BOSC 9:00 - 4:00", "bosc"],
[10, 5, 10, 5, "Access I 5:30 - 8:30", "bosc"],
[11, 5, 11, 5, "Access II 9:00 - 4:00", "microsoft"],
[12, 5, 12, 5, "Intro to Vista II 9:00 - 11:00", "microsoft"],
[14, 5, 14, 5, "Word III 9:00 - 4:00", "microsoft"],
[14, 5, 14, 5, "Word II 5:30 - 8:30", "microsoft"],
[15, 5, 15, 5, "Excel II 9:00 - 4:00", "microsoft"],
[15, 5, 15, 5, "PowerPoint II 5:30 - 8:30", "microsoft"],
[16, 5, 16, 5, "PowerPoint I 9:00 - 4:00", "microsoft"],
[16, 5, 16, 5, "Word II 5:30 - 8:30", "microsoft"],
[17, 5, 17, 5, "BOSC 9:00 - 4:00", "bosc"],
[17, 5, 17, 5, "PowerPoint II 5:30 - 8:30", "bosc"],
[18, 5, 18, 5, "Access III 9:00 - 4:00", "microsoft"],
[19, 5, 19, 5, "Intro to Vista I 9:00 - 11:00", "microsoft"],
[21, 5, 21, 5, "Excel II 5:30 - 8:30", "microsoft"],
[22, 5, 22, 5, "Access II 5:30 - 8:30", "microsoft"],
[23, 5, 23, 5, "Excel II 5:30 - 8:30", "microsoft"],
[24, 5, 24, 5, "BOSC 9:00 - 4:00", "bosc"],
[24, 5, 24, 5, "Access II 5:30 - 8:30", "bosc"],
[26, 5, 26, 5, "Intro to Vista I 9:00 - 11:00", "microsoft"],
[28, 5, 28, 5, "Word I 9:00 - 4:00", "microsoft"],
[28, 5, 28, 5, "Word I 5:30 - 8:30", "microsoft"],
[29, 5, 29, 5, "Excel III 9:00 - 4:00", "microsoft"],
[29, 5, 29, 5, "PowerPoint I 5:30 - 8:30", "microsoft"],
[30, 5, 30, 5, "PowerPoint II 9:00 - 4:00", "microsoft"],
[30, 5, 30, 5, "Word I 5:30 - 8:30", "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 II 9:00 - 11:00", "microsoft"],
[4, 6, 4, 6, "Word II 9:00 - 4:00", "microsoft"],
[4, 6, 4, 6, "Excel I 5:30 - 8:30", "microsoft"],
[5, 6, 5, 6, "Excel I 9:00 - 4:00", "microsoft"],
[5, 6, 5, 6, "Access I 5:30 - 8:30", "microsoft"],
[6, 6, 6, 6, "PowerPoint III 9:00 - 4:00", "microsoft"],
[6, 6, 6, 6, "Excel I 5:30 - 8:30", "microsoft"],
[7, 6, 7, 6, "BOSC 9:00 - 4:00", "bosc"],
[7, 6, 7, 6, "Access I 5:30 - 8:30", "bosc"],
[8, 6, 8, 6, "Access II 9:00 - 4:00", "microsoft"],
[9, 6, 9, 6, "Intro to Vista II 9:00 - 11:00", "microsoft"],
[11, 6, 11, 6, "AMITY I 9:00 - 11:30", "amity"],
[11, 6, 11, 6, "Word III 9:00 - 4:00", "amity"],
[11, 6, 11, 6, "Word II 5:30 - 8:30", "amity"],
[11, 6, 11, 6, "AMITY I 6:00 - 8:30", "amity"],
[12, 6, 12, 6, "Excel II 9:00 - 4:00", "microsoft"],
[12, 6, 12, 6, "PowerPoint II 5:30 - 8:30", "microsoft"],
[13, 6, 13, 6, "PowerPoint I 9:00 - 4:00", "microsoft"],
[13, 6, 13, 6, "Word II 5:30 - 8:30", "microsoft"],
[14, 6, 14, 6, "AMITY II 9:00 - 11:30", "amity"],
[14, 6, 14, 6, "BOSC 9:00 - 4:00", "amity"],
[14, 6, 14, 6, "PowerPoint II 5:30 - 8:30", "amity"],
[14, 6, 14, 6, "AMITY II 6:00 - 8:30", "amity"],
[15, 6, 15, 6, "Access III 9:00 - 4:00", "microsoft"],
[16, 6, 16, 6, "Intro to Vista I 9:00 - 11:00", "microsoft"],
[18, 6, 18, 6, "AMITY I 9:00 - 11:30", "amity"],
[18, 6, 18, 6, "Excel II 5:30 - 8:30", "amity"],
[18, 6, 18, 6, "AMITY I 6:00 - 8:30", "amity"],
[19, 6, 19, 6, "Access II 5:30 - 8:30", "microsoft"],
[20, 6, 20, 6, "Excel II 5:30 - 8:30", "microsoft"],
[21, 6, 21, 6, "AMITY II 9:00 - 11:30", "amity"],
[21, 6, 21, 6, "BOSC 9:00 - 4:00", "amity"],
[21, 6, 21, 6, "Access II 5:30 - 8:30", "amity"],
[21, 6, 21, 6, "AMITY II 6:00 - 8:30", "amity"],
[23, 6, 23, 6, "Intro to Vista I 9:00 - 11:00", "microsoft"],
[25, 6, 25, 6, "Word I 9:00 - 4:00", "microsoft"],
[25, 6, 25, 6, "Word I 5:30 - 8:30", "microsoft"],
[26, 6, 26, 6, "Excel III 9:00 - 4:00", "microsoft"],
[26, 6, 26, 6, "PowerPoint I 5:30 - 8:30", "microsoft"],
[27, 6, 27, 6, "PowerPoint II 9:00 - 4:00", "microsoft"],
[27, 6, 27, 6, "Word I 5:30 - 8:30", "microsoft"],
[28, 6, 28, 6, "BOSC 9:00 - 4:00", "bosc"],
[28, 6, 28, 6, "PowerPoint I 5:30 - 8:30", "bosc"],
[29, 6, 29, 6, "Access I 9:00 - 4:00", "microsoft"],
[30, 6, 30, 6, "Intro to Vista II 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]);
  days[i].innerHTML = '<span style="font-weight: bold;">' + date++ + '<br /><br /><div>';

      for(var j = 0; j < dayInfo[2].length; j++){
         tmpText = dayInfo[2][j];
	 days[i].innerHTML += tmpText + '<br /><br />';
      }
  
  days[i].innerHTML += '</div>';
   }
}

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;

 

Live CSS:

.calendar{
margin: 0 0 2px 0;
    width: 525px;
}

.calendar th{
    padding: 5px;
border: 1px solid #000000;
text-align: center;
}

.calendar td{
border: 1px solid #000000;
}

.calendar td div{
   width: 80px;
   height: 80px;
   overflow: auto;
}

#legend{
float: right;
padding: 5px;
border: 1px solid #000000;
}

#red{
background-color: #ff0000;
height: 15px;
width: 15px;
float: left;
}

#green{
background-color: green;
height: 15px;
width: 15px;
float: left;
}

#gray{
background-color: gray;
height: 15px;
width: 15px;
float: left;
}

#yellow{
background-color: yellow;
height: 15px;
width: 15px;
float: left;
}

#purple{
background-color: purple;
height: 15px;
width: 15px;
float: left;
}

p .divs{
clear: left;
margin: 0;
padding: 5px 0 0 0;
}

 

I didn't post the live HTML as it's identical to the test HTML.  Also, there's some stuff at the end of the live CSS that I don't use, but left in the file (the stuff from #legend to the end of the file).

KevinM1 Advanced Member

KevinM1

Posted
  • Author
Posted

Test vs live issues are often race conditions... but again, why overflow:auto?

 

Well, since I'm making the calendar days so small, so as to fit in with the live site's layout, their contents will always be bigger than what the layout can handle.  It's my understanding that, since I don't want both a horizontal and vertical scroll bar for each date, setting the overflow to auto will only give me a vertical scroll bar while keeping the dates' sizes static, which is what I want.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.