$nbr");
+ echo("$nbr");
+
+ $date_table = $nbr."-".$month ;
+ foreach ($data['dates'] as $date) {
+ if ($date['date'] === $date_table) {
+ echo "
" . $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(" | $nbr");
+ echo(" | $nbr");
+
+ $date_table = $nbr."-".$month ;
+ foreach ($data['dates'] as $date) {
+ if ($date['date'] === $date_table) {
+ echo "
" . $date['name'];
+ }
+ }
foreach ($_COOKIE as $nom_cookie => $valeur_cookie) {
$cut = explode("-", $nom_cookie);
diff --git a/Activity_PHP/calendar/data.json b/Activity_PHP/calendar/data.json
new file mode 100644
index 0000000..d5c285a
--- /dev/null
+++ b/Activity_PHP/calendar/data.json
@@ -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"
+ }
+ ]
+}
diff --git a/Activity_PHP/calendar/style.css b/Activity_PHP/calendar/style.css
index 9a42ae6..db15d51 100644
--- a/Activity_PHP/calendar/style.css
+++ b/Activity_PHP/calendar/style.css
@@ -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;
@@ -104,4 +99,26 @@ 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;
}
\ No newline at end of file
|