En este artículo, crearemos un calendario de vacaciones para un mes determinado utilizando el concepto de tablas en HTML, CSS para diseñar el calendario y PHP.
También mostraremos todos los días festivos en un mes determinado, los resaltaremos con un color diferente y mostraremos el nombre del día festivo cada vez que el mouse se desplace sobre la fecha resaltada. Usaremos PHP para iterar sobre las fechas y verificar si está en la lista de días festivos. Si el mouse se desplaza sobre una celda de día festivo, activará una función de JavaScript que mostrará el nombre del día festivo debajo del calendario.
Ejemplo: mostraremos el calendario de agosto de 2021 como ejemplo. Crearemos una lista de todos los días festivos en agosto de 2021, resaltaremos los días festivos usando la propiedad de color de fondo CSS y mostraremos los nombres de los días festivos al pasar el mouse por encima.
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>
Salida: En la siguiente salida, cuando el mouse pasa sobre la celda «30 de agosto», muestra el nombre del día festivo como «Janmashtami».
calendario de vacaciones con el mouse flotante
Publicación traducida automáticamente
Artículo escrito por SAKSHIKULSHRESHTHA y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA