|
<?php |
|
|
|
// CHURCH App Prefix -- replace the yourchurch text below with your Church App Prefix |
|
$churchAppPrefix = 'yourchurch'; |
|
|
|
// Set the start date to today |
|
$today = new DateTime('now', new DateTimeZone('America/Chicago')); |
|
$start = $today; |
|
$end = clone $start; |
|
$end->modify("+2 years"); |
|
|
|
$months = []; |
|
|
|
// Generate the array of months |
|
while ($start < $end) { |
|
$months[] = [ |
|
"year" => $start->format("Y"), |
|
"month" => $start->format("F"), |
|
"month_num" => $start->format("m"), |
|
"days_in_month" => $start->format("t"), |
|
]; |
|
$start->modify("+1 month"); |
|
} |
|
|
|
// Group months by year |
|
$groupedMonths = []; |
|
foreach ($months as $month) { |
|
$groupedMonths[$month["year"]][] = $month; |
|
} |
|
?> |
|
|
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<meta name="robots" content="noindex, nofollow"> |
|
<title>Event Dates</title> |
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"> |
|
<style> |
|
/* CSS Variables for Light Mode */ |
|
:root { |
|
--text-color: #0D0D0D; |
|
--bg-color: #FFFFFF; |
|
--button-text-color: #F8F5F1; |
|
--button-bg-color: #425563; |
|
--accordian-color: #EFEFEF; |
|
} |
|
|
|
/* Dark Mode */ |
|
@media (prefers-color-scheme: dark) { |
|
:root { |
|
--text-color: #FFFFFF; |
|
--bg-color: #0D0D0D; |
|
--button-text-color: #1D1D1D; |
|
--button-bg-color: #ABC8C7; |
|
--accordian-color: #1D1D1D; |
|
} |
|
} |
|
|
|
/* Box sizing rules */ |
|
*, |
|
*::before, |
|
*::after { |
|
box-sizing: border-box; |
|
} |
|
|
|
/* Prevent font size inflation */ |
|
html { |
|
-moz-text-size-adjust: none; |
|
-webkit-text-size-adjust: none; |
|
text-size-adjust: none; |
|
} |
|
|
|
/* Remove default margin in favour of better control in authored CSS */ |
|
body, |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
p, |
|
figure, |
|
blockquote, |
|
dl, |
|
dd { |
|
-webkit-margin-after: 0; |
|
margin-block-end: 0; |
|
} |
|
|
|
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ |
|
ul[role="list"], |
|
ol[role="list"] { |
|
list-style: none; |
|
} |
|
|
|
/* Set core body defaults */ |
|
body { |
|
min-height: 100vh; |
|
line-height: 1.5; |
|
} |
|
|
|
/* Set shorter line heights on headings and interactive elements */ |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
button, |
|
input, |
|
label { |
|
line-height: 1.1; |
|
} |
|
|
|
/* Balance text wrapping on headings */ |
|
h1, |
|
h2, |
|
h3, |
|
h4 { |
|
text-wrap: balance; |
|
} |
|
|
|
/* A elements that don't have a class get default styles */ |
|
a:not([class]) { |
|
-webkit-text-decoration-skip: ink; |
|
text-decoration-skip-ink: auto; |
|
color: currentColor; |
|
} |
|
|
|
/* Make images easier to work with */ |
|
img, |
|
picture { |
|
max-width: 100%; |
|
display: block; |
|
} |
|
|
|
/* Inherit fonts for inputs and buttons */ |
|
input, |
|
button, |
|
textarea, |
|
select { |
|
font-family: inherit; |
|
font-size: inherit; |
|
} |
|
|
|
/* Make sure textareas without a rows attribute are not tiny */ |
|
textarea:not([rows]) { |
|
min-height: 10em; |
|
} |
|
|
|
/* Anything that has been anchored to should have extra scroll margin */ |
|
:target { |
|
scroll-margin-block: 5ex; |
|
} |
|
|
|
|
|
|
|
/* General styles */ |
|
body { |
|
margin-inline: 1em; |
|
--gutter: 1em; |
|
font-family: sans-serif; |
|
color: var(--text-color); |
|
background: var(--bg-color); |
|
font-family: "Montserrat", serif; |
|
font-size: 1.5rem; |
|
|
|
} |
|
|
|
header > h1 { |
|
margin-block-start: 0; |
|
margin-block-end: 1em; |
|
font-size: 2.25rem; |
|
font-weight: 800; |
|
} |
|
|
|
li { |
|
width: 100%; |
|
} |
|
|
|
.cluster { |
|
display: flex; |
|
flex-direction: var(--cluster-direction, row); |
|
flex-wrap: var(--cluster-wrap, wrap); |
|
column-gap: var(--cluster-column-gap, var(--gutter, var(--space-s-m))); |
|
row-gap: var(--cluster-row-gap, var(--gutter, var(--space-s-m))); |
|
justify-content: var(--cluster-horizontal-alignment, flex-start); |
|
align-items: var(--cluster-vertical-alignment, center); |
|
} |
|
|
|
.accordion { |
|
max-width: 55rem; |
|
margin: 0 auto; |
|
} |
|
|
|
.accordion-item { |
|
background-color: var(--accordian-color); |
|
color: var(--text-color); |
|
margin-bottom: 5px; |
|
border: 1px solid var(--accordian-color); |
|
border-radius: 0.5em; |
|
} |
|
|
|
.accordion-header { |
|
font-weight: 600; |
|
padding: 10px 20px; |
|
cursor: pointer; |
|
position: relative; |
|
} |
|
|
|
.accordion-content { |
|
max-height: 0; |
|
overflow: hidden; |
|
transition: max-height 0.2s ease-out; |
|
} |
|
|
|
.accordion-content ul { |
|
padding: 10px 20px; |
|
margin: 0; |
|
} |
|
|
|
.accordion-item.active .accordion-content { |
|
max-height: 9999px; /* Adjust based on content */ |
|
transition: max-height 0.5s ease-in; |
|
} |
|
|
|
.accordion-header::after { |
|
content: '\25BC'; /* Down arrow */ |
|
float: right; |
|
transform: rotate(0deg); |
|
transition: transform 0.2s ease-out; |
|
} |
|
|
|
.accordion-item.active .accordion-header::after { |
|
transform: rotate(180deg); |
|
} |
|
|
|
.button { |
|
--button-color: var(--button-text-color); |
|
--button-bg: var(--button-bg-color); |
|
|
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.5em; |
|
padding: 0.7em 1.2em; |
|
|
|
background: var(--button-bg); |
|
color: var(--button-color); |
|
|
|
border-width: 3px; |
|
border-style: solid; |
|
border-color: var(--button-bg); |
|
border-radius: 0.5em; |
|
|
|
text-decoration: none; |
|
font-weight: 700; |
|
font-size: 1em; |
|
letter-spacing: 0.05ch; |
|
line-height: 1.1; |
|
|
|
cursor: pointer; |
|
width: 100%; |
|
} |
|
|
|
/* Hover/focus/active for buttons */ |
|
.button:hover { |
|
background: var(--button-bg); |
|
color: var(--button-color); |
|
opacity: 0.9; /* Darken on hover */ |
|
} |
|
|
|
.button:focus { |
|
outline: 3px solid var(--button-bg); |
|
outline-offset: 6px; |
|
} |
|
|
|
.button:active { |
|
transform: scale(99%); |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="wrapper"> |
|
<header> |
|
<h1>All Events</h1> |
|
</header> |
|
<div class="accordion"> |
|
<?php |
|
// Current year for comparison |
|
$currentYear = date("Y"); |
|
|
|
// Output grouped by year |
|
foreach ($groupedMonths as $year => $monthsInYear) { |
|
$activeClass = $year == $currentYear ? "active" : ""; |
|
echo '<div class="accordion-item ' . $activeClass . '">'; |
|
echo '<div class="accordion-header" onclick="toggleAccordion(this)">' . |
|
$year . |
|
"</div>"; |
|
echo '<div class="accordion-content">'; |
|
echo '<ul class="app-date-list cluster" role="list">'; |
|
|
|
foreach ($monthsInYear as $index => $month) { |
|
$link = $churchAppPrefix . "://events?title=" . urlencode($month["month"] . " " . $month["year"]); |
|
if ($index === 0) { |
|
// Special handling for the current month |
|
$link .= "&Event_Start_Date>=" . $month["year"] . "-" . $month["month_num"] . "-" . $today->format("d"); |
|
$link .= "&Event_Start_Date<=" . $month["year"] . "-" . $month["month_num"] . "-" . $month["days_in_month"]; |
|
$link .= "&Event_End_Date>=" . $month["year"] . "-" . $month["month_num"] . "-" . $today->format("d"); |
|
} else { |
|
// For all other months or if not the current month |
|
$link .= "&Event_Start_Date>=" . $month["year"] . "-" . $month["month_num"] . "-01"; |
|
$link .= "&Event_Start_Date<=" . $month["year"] . "-" . $month["month_num"] . "-" . $month["days_in_month"]; |
|
$link .= "&Event_End_Date>=" . $month["year"] . "-" . $month["month_num"] . "-01"; |
|
} |
|
|
|
echo '<li><a href="' . $link . '" class="button">' . $month["month"] . " " . $month["year"] . "</a></li>"; |
|
} |
|
|
|
echo "</ul></div></div>"; |
|
} |
|
?> |
|
</div> |
|
</div> |
|
<script> |
|
function toggleAccordion(header) { |
|
var item = header.parentElement; |
|
var items = document.querySelectorAll('.accordion-item'); |
|
|
|
// Close all accordions |
|
items.forEach(function(i) { |
|
if (i !== item) { |
|
i.classList.remove('active'); |
|
} |
|
}); |
|
|
|
// Toggle the clicked accordion |
|
item.classList.toggle('active'); |
|
} |
|
</script> |
|
</body> |
|
</html> |
