Hi all,
I'm trying to write a page for my genealogy website, which eventually will show a French Republican calendar, a Gregorian calendar, and highlight corresponding dates between them when selected. My PHP knowledge is limited, but I'm trying to learn as I go. Some things really don't seem clear to me. Which is why I'm asking you for any hints or tips.
First step is trying to get the calendar to show as I want it to. I've included three months with 5 days each for testnig purposes.
The months show up correctly, the days are "calculated" correctly, but the display won't toggle when clicking on a month.
The .days div is standard "display: none", and when I select a month, the corresponding .days div should be changed into "display: block". But it doesn't. Clicking a month has no result.
Any ideas why? I'm quite sure there's something wrong with the <script> but I can't figure out what...
<!DOCTYPE html>
<html>
<head>
<title>French Republican Calendar</title>
<meta charset="UTF-8">
<style>
.month-container {
margin: 10px;
}
.month {
display: inline-block;
margin: 10px;
padding: 10px;
background-color: #EEE;
cursor: pointer;
}
.days {
display: none;
margin-top: 10px;
padding: 10px;
background-color: #DDD;
}
.day {
margin: 5px 0;
font-weight: bold;
}
.name {
margin-left: 10px;
font-style: italic;
}
</style>
</head>
<body>
<h1>French Republican Calendar</h1>
<?php
$months = array(
"Vendémiaire" => array(
array("1", "Raisin"),
array("2", "Safran"),
array("3", "Châtaigne"),
array("4", "Colchique"),
array("5", "Cheval")
),
"Brumaire" => array(
array("1", "Pomme"),
array("2", "Céleri"),
array("3", "Poire"),
array("4", "Betterave"),
array("5", "Oie")
),
"Frimaire" => array(
array("1", "Raiponce"),
array("2", "Turneps"),
array("3", "Chicorée"),
array("4", "Nèfle"),
array("5", "Cochon")
),
);
foreach ($months as $month => $days) {
echo "<div class='month-container'>";
echo "<div class='days' id='" . htmlentities($month, ENT_QUOTES, "UTF-8") . "'>";
foreach ($days as $day) {
echo "<div class='day'>" . $day[0] . "<span class='name'>" . $day[1] . "</span></div>";
}
echo "</div>";
echo "<div class='month' onclick='toggleDays(this)'>$month</div>";
echo "</div>";
}
?>
<script>
function toggleDays(el) {
var days = null;
var sibling = el.nextElementSibling;
while (sibling) {
if (sibling.classList.contains("days")) {
days = sibling;
break;
}
sibling = sibling.nextElementSibling;
}
if (days.style.display === "none") {
days.style.display = "block";
} else {
days.style.display = "none";
}
}
var months = document.querySelectorAll(".month");
months.forEach(function(month) {
month.addEventListener("click", function() {
toggleDays(this);
});
});
</script>
</body>
</html>
