In this article, we will create a holiday calendar for a given month using the concept of tables in HTML, CSS for styling the calendar, and PHP.
We will also display all the holidays in a given month, highlight them using a different color and display the holiday name whenever the mouse hovers over the highlighted date. We will use PHP for iterating over the dates and check if it is on the holiday list. If the mouse hovers on a holiday cell, it will trigger a JavaScript function that will display the holiday name below the calendar.
Example: We will display the calendar for August 2021 as an example. We will create a list of all holidays in August 2021, highlight the holidays using CSS background-color property and display holiday names on mouse hover.
HTML
<!DOCTYPE html> <html> <head> <title>August 2021</title> <style> table { background-color: yellow; } td { width: 40px; height: 40px; text-align: center; } .day { font-weight: bolder; background-color: lightpink; } .holiday { background-color: lightblue; } #field { font-weight: bolder; text-align: center; } </style> <script type="text/javascript"> function show(a) { document.getElementById('field').innerHTML = document.getElementById(a.id) .attributes["name"].value; setTimeout(function () { document.getElementById('field').innerHTML = ""; }, 5000); } </script> </head> <body> <table align="center" border="1"> <tr> <td colspan="7"><b>August 2021</b></td> </tr> <tr class="day"> <td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td> <td>Sat</td> </tr> <?php $holidays = array( 15 => "Independence Day", 19 => "Muharram", 21 => "Onam", 22 => "Raksha Bandhan", 30 => "Janmashtami" ); for($i = 1; $i <= 31; $i++) { if (in_array($i, array_keys($holidays))) { $x = $holidays[$i]; echo "<td class = holiday id='$i' name ='$x' onmouseover = show(this)>$i</td>"; } else { echo "<td id =$i>$i</td>"; } if($i % 7 == 0) { echo "</tr><tr>"; } } ?> </table> <br><br> <div id="field"></div> </body> </html> |
Output: In the below output, when the mouse hovers over the “30 August” cell, it displays the holiday name as “Janmashtami”.
holiday calendar with mouse hover
