I've created a "calender"-like table that updates its content via a list located in a .PHP file. It works fine, but I'd like to be able to style it better. I would like to have the text which is currently appearing in "contentContainer" under the table, appear in the cell it belongs to. As of now, if I move the div into $calender, it loads only in the first cell.
I'd also like for the row to break at 7 columns.
<script type="text/javascript">
var request;
showEvents = function(caller){
request = new XMLHttpRequest();
request.open("GET", "getevents.php?id="+caller.id, true);
request.onreadystatechange = updatePage(caller.id);
request.send(null);
};
function updatePage(elemId){
if(request.readyState == 4){
var data = request.responseText;
document.getElementById(elemId).innerHTML="<span>"+data+"</span>"
}
}
</script>
<style>
table {
width: 700px;
}
td {
border: 1px solid;
min-width: 100px;
height: 100px;
vertical-align: text-top;
text-align: right;
box-sizing:border-box;
padding: 5px;
}
</style>
</head><body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="31" scope="col">Calender</th>
</tr>
<tr>
<?php
$calendar="";
for($i=1;$i<=31;$i++){
$calendar .= "<td id='".$i."' onclick='showEvents(this)'><a href='#' id='".$i."'>".$i."</a> </td>";
if (($i % 7) == 0) $calendar .= '</tr><tr>';
}
echo $calendar;
?>
</tr>
</table>
<div id="contentContainer"></div>
</body>
</html>
To get the 7 days across you're looking for, I would put this in the for loop:
if (($i % 7) == 0) $calendar .= '</tr><tr>';
As for where your events pop up in the table, make sure you pass the cell's id from showEvents to updatePage:
request.onreadystatechange = updatePage(caller.id);
…
function updatePage(elemId){
…
document.getElementById(elemId).innerHTML="<span>"+data+"</span>"
That should get you there. And to make this even more complete, I would make use of the PHP date/time functions to properly set each date in its correct place on the calendar.
Update:
I've worked on it a bit and here's what I've got. For some reason, unbeknownst to me, javascript doesn't like the two functions to be separated. That's fixed, and I've also added a day of week spacer. Here's the result:
<script type="text/javascript">
var showEvents = function(caller){
request = new XMLHttpRequest();
request.open("GET", "getevents.php?id="+caller.id, true);
request.onreadystatechange = function () {
if(request.readyState == 4){
var data = request.responseText;
document.getElementById(caller.id).innerHTML="<span>"+data+"</span>"
}
}
request.send();
};
</script>
<style>
table {
width: 700px;
border-collapse: collapse;
}
td {
border: 1px solid;
min-width: 100px;
height: 100px;
vertical-align: text-top;
text-align: right;
box-sizing:border-box;
padding: 5px;
}
</style>
</head><body>
<table>
<tr>
<th colspan="7">Calendar</th>
</tr>
<tr>
<?php
$calendar="";
$n = 0;
$month = strtotime("2012-10-01"); // Always the first of the month
$start = date('N', $month);
$days = date('t',$month);
for($i=1;$i<=$days;$i++){
$n++;
if ($n <= $start) { // '<=': week starts on Sunday; '<': week starts on Monday
$calendar .= "<td> </td>";
$i--;
} else {
$calendar .= "<td id='{$i}' onclick='showEvents(this); return false;'><a href='#' id='{$i}'>{$i}</a></td>";
}
if (($n % 7) == 0) $calendar .= '</tr><tr>';
}
echo $calendar;
?>
</tr>
</table>
<div id="contentContainer"></div>
</body>
</html>