Finish calendar

This commit is contained in:
Tutur33
2023-12-01 19:36:18 +01:00
parent b940162257
commit b87f487a89
3 changed files with 103 additions and 16 deletions
+31 -9
View File
@@ -18,6 +18,9 @@ $months = [
];
$monthName = $months[$month];
$data = json_decode(file_get_contents('data.json'), true);
?>
<!DOCTYPE html>
<html lang="en">
@@ -37,14 +40,19 @@ $monthName = $months[$month];
<th><?php echo($year) ?></th>
</tr>
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
<td>Sunday</td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<script>
function agrandir(cellule) {
cellule.classList.toggle("clicked");
}
</script>
<tr>
<?php
$nbr = 1;
@@ -73,7 +81,14 @@ $monthName = $months[$month];
}
for ($i=6-$day; $i <7 ; $i++) {
$today = (date("j") == $nbr and date("n") == $month and date("Y") == $year) ? "class='today'" : "";
echo("<td $today>$nbr");
echo("<td onclick='agrandir(this)' $today>$nbr");
$date_table = $nbr."-".$month ;
foreach ($data['dates'] as $date) {
if ($date['date'] === $date_table) {
echo "<br>" . $date['name'];
}
}
foreach ($_COOKIE as $nom_cookie => $valeur_cookie) {
$cut = explode("-", $nom_cookie);
@@ -102,7 +117,14 @@ $monthName = $months[$month];
}
$today = (date("j") == $nbr and date("n") == $month and date("Y") == $year) ? "class='today'" : "";
echo("<td $today>$nbr");
echo("<td onclick='agrandir(this)' $today>$nbr");
$date_table = $nbr."-".$month ;
foreach ($data['dates'] as $date) {
if ($date['date'] === $date_table) {
echo "<br>" . $date['name'];
}
}
foreach ($_COOKIE as $nom_cookie => $valeur_cookie) {
$cut = explode("-", $nom_cookie);
+48
View File
@@ -0,0 +1,48 @@
{
"dates": [
{
"name": "Nouvel An",
"date": "1-1"
},
{
"name": "Saint-Valentin",
"date": "14-2"
},
{
"name": "Journée internationale des femmes",
"date": "8-3"
},
{
"name": "Poisson d'avril",
"date": "1-4"
},
{
"name": "Équinoxe de printemps (ou d'automne)",
"date": "21-3"
},
{
"name": "Fête du Travail",
"date": "1-5"
},
{
"name": "Noël",
"date": "25-12"
},
{
"name": "Saint-Sylvestre",
"date": "31-12"
},
{
"name": "Armistice",
"date": "11-11"
},
{
"name": "Fête nationale française",
"date": "14-7"
},
{
"name": "Journée mondiale de l'environnement",
"date": "5-6"
}
]
}
+24 -7
View File
@@ -2,12 +2,7 @@ table {
margin-top: 30px;
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
table-layout:fixed;
}
th {
@@ -83,7 +78,7 @@ a,
}
main {
max-width: 800px;
max-width: 1000px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
@@ -105,3 +100,25 @@ main p {
.main-calendar {
min-height: 500px;
}
th,
td {
text-align: center;
width: 100px;
height: 50px;
transition: width 0.3s ease, height 0.3s ease;
cursor: pointer;
border: 1px solid #dddddd;
padding: 8px;
}
td {
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
.clicked {
height: auto;
white-space:normal;
}