Home/ Questions/Q 8701673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T02:27:29+00:00

I’ve created a calender-like table that updates its content via a list located in

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>&nbsp;</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>
    • 0