Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Create Holiday Calendar using HTML and PHP

  • Difficulty Level : Hard
  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
Recommended Articles
Page :