proggR Posted April 18, 2009 Share Posted April 18, 2009 I'm trying to build an AJAX based calender but I'm getting stuck before I even get to the harder parts. I have a year table for the months to be inserted in (it isn't using TOM yet) and I have another set of tables created with TOM for the days in the month. The days part is working but they are printed outside of the year table. I don't know how to describe exactly whats happening so I'm going to paste the code so you can see where I'm at. Just as a warning, this code is a mess right now because I'm revamping an older project I did that had almost everything hardcoded except the parts I've switched to using the TOM. Sorry to be a pain and just dump code on here but I'm not sure how to describe whats happening. <?xml version="1.0" encoding="UTF-8"?> <!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"> <head> <!-- Name: Description: --> <script type="text/javascript"> /* <![CDATA[ */ var lastDay=1; function displayMonth(month){ var row,end,day=1, ctr=1; switch (month){ case "September": case "April": case "June": case "November": end=30; break; case "February": end=28; break; default: end=31;} var oTable = document.createElement("table"); document.body.appendChild(oTable); var oTHead = oTable.createTHead(); var oTFoot = oTable.createTFoot(); var oTBody = document.createElement("tbody"); oTable.appendChild(oTBody); var oRow, oCell, i; oTHead.innerHTML = month; oRow = oTBody.insertRow(-1); alert("made it past declaring the objects"); oCell = oRow.insertCell(-1); oCell.innerHTML = "S"; oCell = oRow.insertCell(-1); oCell.innerHTML = "M"; oCell = oRow.insertCell(-1); oCell.innerHTML = "T"; oCell = oRow.insertCell(-1); oCell.innerHTML = "W"; oCell = oRow.insertCell(-1); oCell.innerHTML = "T"; oCell = oRow.insertCell(-1); oCell.innerHTML = "F"; oCell = oRow.insertCell(-1); oCell.innerHTML = "S"; while(day<end){ oRow = oTBody.insertRow(-1); while (ctr<lastDay){ oCell = oRow.insertCell(-1); ctr++; } for(ctr=lastDay;ctr<=7;ctr++){ oCell = oRow.insertCell(-1); oCell.innerHTML = day; day++; lastDay=1; if (day>end){ lastDay=ctr+1; break; } } } } function getDate(month,day){ } function displayAppt(month, day){ var hour; document.write("<table border='1'><tr><td colspan='2'>"+month+" "+day+", 2009</td></tr>"); for (hour=8;hour<=18;hour++){ document.write("<tr><td width='20'>"+hour+":00</td><td></td></tr>"); document.write("<tr><td width='20'>"+hour+":30</td><td></td></tr>"); } document.write("</table>"); } /* ]]> */ </script> <link rel="Stylesheet" href="style.css" /> <title> Tables and Calendars </title> </head> <body> <table border='1'> <tr><td colspan='4'>2009</td><td>Appointments</td></tr> <tr><td><script type="text/javascript">displayMonth("January");</script></td><td><script type="text/javascript">displayMonth("February");</script></td><td><script type="text/javascript">displayMonth("March");</script></td><td><script type="text/javascript">displayMonth("April");</script></td><td colspan='2' rowspan='3'><script type="text/javascript">displayAppt('January',;</script></td></tr> <tr><td><script type="text/javascript">displayMonth("May");</script></td><td><script type="text/javascript">displayMonth("June");</script></td><td><script type="text/javascript">displayMonth("July");</script></td><td><script type="text/javascript">displayMonth("August");</script></td></tr> <tr><td><script type="text/javascript">displayMonth("September");</script></td><td><script type="text/javascript">displayMonth("October");</script></td><td><script type="text/javascript">displayMonth("November");</script></td><td><script type="text/javascript">displayMonth("December");</script></td></tr> </table> </body> </html> Thank you in advance for any help you can provide. I'm going to keep toying with it myself as well. Quote Link to comment Share on other sites More sharing options...
proggR Posted April 19, 2009 Author Share Posted April 19, 2009 I switched the outer table to use the TOM as well and then used cell.appendChild(innerTable) to place the inner table in the cell. Then in the inner table's function I add return oTable return the table as an object to the outer table. It works now and I've cleaned things up a bit. On to the AJAX part. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.