Member Avatar for Tom_11

I have a posted this question in the computer science section, someone told me to move it here i am unsure of how to so starting a discussion here.

Please can someone help me to make the cell (dates) of the calendar clickable, one they have been clicked it opens up a form?
I have the database tables set up just need help to make the dates clickable to open the form.

My code for the calendar is:

?php
$monthNames = Array("January", "February", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "December");
?>
<?php
if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n");
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y");
?>
<?php
$cMonth = $_REQUEST["month"];
$cYear = $_REQUEST["year"];
$prev_year = $cYear;
$next_year = $cYear;
$prev_month = $cMonth-1;
$next_month = $cMonth+1;
if ($prev_month == 0 ) {
    $prev_month = 12;
    $prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
    $next_month = 1;
    $next_year = $cYear + 1;
}
?>
<table width="400" border="5" align="center">
<tr align="center">
<td bgcolor="#999999" style="color:#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left">  <a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $prev_month . "&year=" . $prev_year; ?>" style="color:#FFFFFF">Previous</a></td>
<td width="50%" align="right"><a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $next_month . "&year=" . $next_year; ?>" style="color:#FFFFFF">Next</a>  </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="2" cellpadding="2" cellspacing="2">
<tr align="center">
<td colspan="7" bgcolor="#999999" style="color:#FFFFFF">
<strong> <?php echo $monthNames[$cMonth-1].' '.$cYear; ?> </strong>
</td>
</tr>
<tr>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>S</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>M</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>T</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>W</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>T</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>F</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>S</strong></td>
</tr>
<?php 
$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];
for ($i=0; $i<($maxday+$startday); $i++) {
    if(($i % 7) == 0 ) echo "<tr> ";
    if($i < $startday) echo "<td></td> ";
    else echo "<td align='center' valign='middle' height='20px'>". ($i - $startday + 1) . "</td> ";
    if(($i % 7) == 6 ) echo "</tr> ";
}
?>
</table>
</td>
</tr>
</table>
  • 4 Contributors
  • 6 Replies
  • 1K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by cilla

Dani AI

Generated

A concise, practical plan that builds on 's suggestion (mark date cells) and 's modal idea while keeping the existing PHP calendar (rather than swapping to a datepicker as proposed). Key goals: make each date cell machine-readable, use event delegation to catch clicks, surface a single HTML form (hidden modal or inline) prefilled with the clicked date, and validate on the server before inserting into the SQL table.

  • Calendar markup: output each date cell with a class and an ISO data-date attribute (escape it with htmlspecialchars()). Include role="button" and tabindex="0" for keyboard accessibility and add an anchor fallback if JavaScript is disabled (e.g., a link to add.php?date=YYYY-MM-DD inside the cell).

  • Frontend handling (event delegation and modal population): attach a single handler to the calendar container so dynamically generated cells are covered. Example pattern:

<td class="cal-day" data-date="2015-01-16" role="button" tabindex="0">16</td>

<script>
  // delegated handler: read data-date, populate form field, show modal
  $('#calendar').on('click', 'td.cal-day', function () {
    var date = $(this).attr('data-date');
    $('#eventForm input[name="date"]').val(date);
    $('#eventModal').show();
  });
</script>
  • Server-side and security notes: always validate the posted date with DateTime::createFromFormat('Y-m-d', $date) (reject if invalid), and use PDO/prepared statements for any INSERTs. Escape any calendar output to prevent XSS. Typical troubleshooting steps include verifying data-date values, checking the console for JS errors, and confirming the delegated listener is bound to the correct container.

Recommended Answers

All 6 Replies

Member Avatar for milil

If I understand you right you need Date Picker?
You can see one on this link you have there already source code.

Member Avatar for Tom_11

not really that is not what i want.

I want to use the calendar code i have posted above, i want to be able to click on the cell (dates), once clicked it opens a form

Member Avatar for Tom_11

can i use this? if so how do i use it in my calendar in post 1?

<script>
        $(document).ready( function() {
            $(this).on("click", function(e) {
                alert( $(e.target).text());
            });
    </script>
Member Avatar for akeane

jQuery Impromptu might help you out. I'm just learning it but it does have the ability to prompt with forms inside. It seems to be very 'interesting'. I am still building examples for myself but give it a 'look-see'.

Member Avatar for Tom_11

what im trying to do is firstly make all the dates on the calender clickable.. secondly once any day is selected it opens up a form. The form I have created in sql database oredi. But im stuck on how to accomplish this.

Member Avatar for cilla

Well the form you'll have to create in HTML as well... A database table is not part of a webpage...

Your clickable table cells also need to be distinguishable from their header cells, assuming you don't want a form to open when clicking on the "Monday" column header; you only want to open the form when an actual date cell is clicked. To do this you can just add "class='datepick'" or whatever you want to name the class, to the td element on line 61 of your code posted.

Then you can use jQuery to enable a click event on the cells using the selector '.datepick', to open up your [HTML] form...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.