Create Holiday Calendar using HTML and PHP

06 Jul, 2021
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
CSS-Properties
CSS-Questions
HTML-Questions
PHP-array
PHP-Questions
CSS
HTML
PHP
Web Technologies
HTML
PHP
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS