Skip to content
Related Articles

Related Articles

Create Holiday Calendar using HTML and PHP

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 06 Jul, 2021
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!