NGUN - Events Calendar<\/title>\r\n <style>\r\n :root {\r\n --primary: #262e52;\r\n --secondary: #c89b43;\r\n --light-gray: #f5f5f5;\r\n --mid-gray: #e0e0e0;\r\n --dark-gray: #333333;\r\n --white: #ffffff;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Arial', sans-serif;\r\n }\r\n \r\n .banner {\r\n background-color: var(--secondary);\r\n color: var(--white);\r\n text-align: center;\r\n padding: 15px;\r\n font-weight: bold;\r\n font-size: 18px;\r\n margin-bottom: 20px;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n max-width: 1200px;\r\n margin: 20px auto;\r\n }\r\n \r\n .events-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n background-color: var(--white);\r\n border-radius: 8px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .search-bar {\r\n display: flex;\r\n margin-bottom: 20px;\r\n border: 1px solid var(--mid-gray);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n }\r\n \r\n .search-input {\r\n flex-grow: 1;\r\n padding: 12px 15px;\r\n border: none;\r\n outline: none;\r\n font-size: 16px;\r\n }\r\n \r\n .search-button {\r\n background-color: var(--secondary);\r\n color: var(--white);\r\n border: none;\r\n padding: 12px 20px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: background-color 0.3s;\r\n }\r\n \r\n .search-button:hover {\r\n background-color: #b68a39;\r\n }\r\n \r\n .view-options {\r\n display: flex;\r\n justify-content: flex-end;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .view-option {\r\n padding: 8px 16px;\r\n margin-left: 10px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 500;\r\n color: var(--dark-gray);\r\n border-bottom: 3px solid transparent;\r\n }\r\n \r\n .view-option.active {\r\n color: var(--primary);\r\n border-bottom: 3px solid var(--primary);\r\n font-weight: bold;\r\n }\r\n \r\n .calendar-nav {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .nav-button {\r\n background: none;\r\n border: none;\r\n color: var(--primary);\r\n font-size: 20px;\r\n cursor: pointer;\r\n padding: 5px 10px;\r\n }\r\n \r\n .current-view {\r\n display: flex;\r\n align-items: center;\r\n margin: 0 15px;\r\n }\r\n \r\n .today-button {\r\n padding: 6px 12px;\r\n background-color: var(--light-gray);\r\n border: 1px solid var(--mid-gray);\r\n border-radius: 4px;\r\n margin-right: 15px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n }\r\n \r\n .current-period {\r\n font-size: 20px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .dropdown-icon {\r\n margin-left: 5px;\r\n font-size: 14px;\r\n }\r\n \r\n .no-events {\r\n background-color: var(--light-gray);\r\n padding: 15px;\r\n text-align: center;\r\n border-radius: 4px;\r\n color: var(--dark-gray);\r\n margin-bottom: 30px;\r\n }\r\n \r\n .section-title {\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid var(--secondary);\r\n }\r\n \r\n .event-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 30px;\r\n }\r\n \r\n .event-card {\r\n display: flex;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n transition: transform 0.3s, box-shadow 0.3s;\r\n }\r\n \r\n .event-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .event-date {\r\n background-color: var(--primary);\r\n color: var(--white);\r\n padding: 15px;\r\n text-align: center;\r\n min-width: 100px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n \r\n .date-month {\r\n text-transform: uppercase;\r\n font-size: 12px;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .date-day {\r\n font-size: 28px;\r\n font-weight: bold;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .date-year {\r\n font-size: 14px;\r\n }\r\n \r\n .event-content {\r\n flex-grow: 1;\r\n display: flex;\r\n }\r\n \r\n .event-details {\r\n padding: 20px;\r\n flex-grow: 1;\r\n }\r\n \r\n .event-time {\r\n color: var(--secondary);\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .event-title {\r\n font-size: 20px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n margin-bottom: 10px;\r\n }\r\n \r\n .event-title a {\r\n color: var(--primary);\r\n text-decoration: none;\r\n transition: color 0.3s;\r\n }\r\n \r\n .event-title a:hover {\r\n color: var(--secondary);\r\n }\r\n \r\n .event-description {\r\n color: var(--dark-gray);\r\n margin-bottom: 15px;\r\n line-height: 1.5;\r\n }\r\n \r\n .event-location {\r\n color: var(--dark-gray);\r\n font-style: italic;\r\n font-size: 14px;\r\n }\r\n \r\n .event-image {\r\n width: 300px;\r\n object-fit: cover;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .event-card {\r\n flex-direction: column;\r\n }\r\n \r\n .event-date {\r\n padding: 10px;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .event-content {\r\n flex-direction: column;\r\n }\r\n \r\n .event-image {\r\n width: 100%;\r\n height: 200px;\r\n }\r\n \r\n .section-title {\r\n font-size: 20px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"banner\">\r\n Registration for the Youth Conference: Mini NGUN is now open! <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScyBnFZGKyJVV8MjBlBr6QD3qrVNXLg70i4lP70G_YNgXWtNQ\/viewform?usp=header \">Register here<\/a>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ This will execute once the DOM is fully loaded\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Real upcoming events\r\n const eventsData = [\r\n {\r\n id: 1,\r\n title: \"New Generation Webinar: Salud mental en poblaciones j\u00f3venes de Am\u00e9rica Latina (online)\",\r\n description: \"In the first New Generation Webinar (Spanish), our expert Jorge Brito of the International Humanitarian Consultants & Project Management (IHC) provides a unique opportunity to participate in an enriching discussion on youth mental health in Latin America. Registration is completely free, and participants will receive an official Certificate of Participation. In addition, their perspectives will be included in the first report of the NGUN Project, which will be shared with international leaders at the UN level.\",\r\n location: \"Zoom\",\r\n startDate: new Date(2025, 3, 5, 14, 0), \/\/ April 5, 2025, 2:00 PM (using a default time)\r\n endDate: new Date(2025, 3, 5, 16, 0), \/\/ April 5, 2025, 4:00 PM (using a default time)\r\n \r\n language: \"Spanish\",\r\n cost: \"Free\",\r\n registration: \"https:\/\/docs.google.com\/forms\/d\/1KK66ScozdF-Sk8wIb2T76tSicOhmoG4fcBVxmhwFYG0\/edit#responses\"\r\n },\r\n {\r\n id: 2,\r\n title: \"Youth Conference: Mini NGUN\",\r\n description: \"This one-day event will feature insightful panel discussions, exciting interactive roundtable sessions and great networking opportunities. Learn from our experts and make your voice heard! The topic will address Youth Involvement in Current Challenges (Democracy, Climate, Economic Crisis), and the perspectives of our participants will be included in the first NGUN Report which will be shared with Global. Human Rights Defence's (GHRD) Network at the UN Level! Stay tuned for more info!\",\r\n location: \"Het Nutshuis, Riviervismarkt 5, 2513 Den Haag\",\r\n startDate: new Date(2025, 4, 3, 9, 0), \/\/ May 3, 2025, 9:00 AM (using a default time)\r\n endDate: new Date(2025, 4, 3, 17, 0), \/\/ May 3, 2025, 5:00 PM (using a default time)\r\n image: \"\", \/\/ \"Stock Image\"\r\n language: \"English\",\r\n cost: \"5\u20ac\",\r\n registration: \"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScyBnFZGKyJVV8MjBlBr6QD3qrVNXLg70i4lP70G_YNgXWtNQ\/viewform?usp=header \"\r\n }\r\n ];\r\n\r\n \/\/ Elements\r\n const searchInput = document.querySelector('.search-input');\r\n const searchButton = document.querySelector('.search-button');\r\n const viewOptions = document.querySelectorAll('.view-option');\r\n const prevButton = document.querySelectorAll('.nav-button')[0];\r\n const nextButton = document.querySelectorAll('.nav-button')[1];\r\n const todayButton = document.querySelector('.today-button');\r\n const currentPeriodElement = document.querySelector('.current-period');\r\n const noEventsElement = document.querySelector('.no-events');\r\n const eventListElement = document.querySelector('.event-list');\r\n const pastEventsTitle = document.querySelector('.section-title');\r\n\r\n \/\/ Current state\r\n let currentView = 'list'; \/\/ list, month, day\r\n let currentDate = new Date();\r\n let currentPeriod = 'upcoming';\r\n let searchQuery = '';\r\n \r\n \/\/ Initialize\r\n renderEvents();\r\n\r\n \/\/ Event listeners\r\n searchButton.addEventListener('click', function() {\r\n searchQuery = searchInput.value.toLowerCase();\r\n renderEvents();\r\n });\r\n\r\n searchInput.addEventListener('keyup', function(event) {\r\n if (event.key === 'Enter') {\r\n searchQuery = searchInput.value.toLowerCase();\r\n renderEvents();\r\n }\r\n });\r\n\r\n viewOptions.forEach(option => {\r\n option.addEventListener('click', function() {\r\n viewOptions.forEach(opt => opt.classList.remove('active'));\r\n this.classList.add('active');\r\n currentView = this.textContent.toLowerCase();\r\n renderEvents();\r\n });\r\n });\r\n\r\n prevButton.addEventListener('click', function() {\r\n navigatePeriod(-1);\r\n });\r\n\r\n nextButton.addEventListener('click', function() {\r\n navigatePeriod(1);\r\n });\r\n\r\n todayButton.addEventListener('click', function() {\r\n currentDate = new Date();\r\n currentPeriod = 'upcoming';\r\n updateCurrentPeriodDisplay();\r\n renderEvents();\r\n });\r\n\r\n currentPeriodElement.addEventListener('click', function() {\r\n togglePeriodDropdown();\r\n });\r\n\r\n \/\/ Functions\r\n function renderEvents() {\r\n \/\/ First determine which events to show based on current period and search\r\n let eventsToShow = [];\r\n const now = new Date();\r\n \r\n if (currentPeriod === 'upcoming') {\r\n \/\/ Future events\r\n eventsToShow = eventsData.filter(event => event.startDate > now);\r\n } else if (currentPeriod === 'past') {\r\n \/\/ Past events\r\n eventsToShow = eventsData.filter(event => event.startDate <= now);\r\n } else {\r\n \/\/ Month view\r\n \/\/ Can be expanded for more sophisticated filtering\r\n eventsToShow = eventsData;\r\n }\r\n \r\n \/\/ Apply search filter if any\r\n if (searchQuery) {\r\n eventsToShow = eventsToShow.filter(event => \r\n event.title.toLowerCase().includes(searchQuery) || \r\n event.description.toLowerCase().includes(searchQuery) ||\r\n event.location.toLowerCase().includes(searchQuery)\r\n );\r\n }\r\n \r\n \/\/ Sort events by date (newest first for past, soonest first for upcoming)\r\n eventsToShow.sort((a, b) => \r\n currentPeriod === 'past' \r\n ? b.startDate - a.startDate \r\n : a.startDate - b.startDate\r\n );\r\n \r\n \/\/ Update UI\r\n updateEventsDisplay(eventsToShow);\r\n updateCurrentPeriodDisplay();\r\n }\r\n \r\n function updateEventsDisplay(events) {\r\n \/\/ Update the no events message\r\n if (events.length === 0) {\r\n noEventsElement.style.display = 'block';\r\n noEventsElement.textContent = `There are no ${currentPeriod} events${searchQuery ? ' matching your search' : ''}.`;\r\n eventListElement.style.display = 'none';\r\n pastEventsTitle.textContent = currentPeriod === 'upcoming' ? 'Upcoming Events' : 'Past Events';\r\n } else {\r\n noEventsElement.style.display = 'none';\r\n eventListElement.style.display = 'flex';\r\n pastEventsTitle.textContent = currentPeriod === 'upcoming' ? 'Upcoming Events' : 'Latest Past Events';\r\n \r\n \/\/ Clear current events\r\n eventListElement.innerHTML = '';\r\n \r\n \/\/ Add events to the list\r\n events.forEach(event => {\r\n const eventDate = event.startDate;\r\n const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];\r\n \r\n \/\/ Format time\r\n const startHour = eventDate.getHours();\r\n const startMinutes = eventDate.getMinutes();\r\n const endHour = event.endDate.getHours();\r\n const endMinutes = event.endDate.getMinutes();\r\n \r\n const startTime = `${startHour % 12 || 12}:${startMinutes.toString().padStart(2, '0')} ${startHour >= 12 ? 'pm' : 'am'}`;\r\n const endTime = `${endHour % 12 || 12}:${endMinutes.toString().padStart(2, '0')} ${endHour >= 12 ? 'pm' : 'am'}`;\r\n \r\n const eventCard = document.createElement('div');\r\n eventCard.className = 'event-card';\r\n eventCard.innerHTML = `\r\n <div class=\"event-date\">\r\n <div class=\"date-month\">${months[eventDate.getMonth()]}<\/div>\r\n <div class=\"date-day\">${eventDate.getDate()}<\/div>\r\n <div class=\"date-year\">${eventDate.getFullYear()}<\/div>\r\n <\/div>\r\n <div class=\"event-content\">\r\n <div class=\"event-details\">\r\n <div class=\"event-time\">${startTime} - ${endTime} | ${event.language}<\/div>\r\n <h3 class=\"event-title\">\r\n <a href=\"#\">${event.title}<\/a>\r\n <\/h3>\r\n <p class=\"event-description\">${event.description}<\/p>\r\n <div class=\"event-location\">${event.location}<\/div>\r\n <div class=\"event-additional-info\" style=\"margin-top: 12px;\">\r\n <p style=\"font-weight: bold; margin-bottom: 4px;\">Cost: <span style=\"font-weight: normal;\">${event.cost}<\/span><\/p>\r\n <p style=\"font-weight: bold; margin-bottom: 0;\">Registration: \r\n <span style=\"font-weight: normal;\">\r\n ${event.registration === \"tba\" ? \r\n \"To be announced\" : \r\n `<a href=\"${event.registration}\" target=\"_blank\" style=\"color: var(--secondary);\">Register here<\/a>`\r\n }\r\n <\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n `;\r\n \r\n eventListElement.appendChild(eventCard);\r\n });\r\n }\r\n }\r\n \r\n function updateCurrentPeriodDisplay() {\r\n if (currentPeriod === 'upcoming') {\r\n currentPeriodElement.innerHTML = 'Upcoming <span class=\"dropdown-icon\">▾<\/span>';\r\n } else if (currentPeriod === 'past') {\r\n currentPeriodElement.innerHTML = 'Past Events <span class=\"dropdown-icon\">▾<\/span>';\r\n } else {\r\n \/\/ For month view, show the month and year\r\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n currentPeriodElement.innerHTML = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()} <span class=\"dropdown-icon\">▾<\/span>`;\r\n }\r\n }\r\n \r\n function navigatePeriod(direction) {\r\n if (currentView === 'month') {\r\n \/\/ In month view, navigate months\r\n currentDate.setMonth(currentDate.getMonth() + direction);\r\n } else if (currentPeriod === 'upcoming' && direction < 0) {\r\n \/\/ Switch from upcoming to past\r\n currentPeriod = 'past';\r\n } else if (currentPeriod === 'past' && direction > 0) {\r\n \/\/ Switch from past to upcoming\r\n currentPeriod = 'upcoming';\r\n }\r\n \r\n renderEvents();\r\n }\r\n \r\n function togglePeriodDropdown() {\r\n \/\/ Create dropdown if it doesn't exist\r\n let dropdown = document.querySelector('.period-dropdown');\r\n \r\n if (dropdown) {\r\n dropdown.remove();\r\n return;\r\n }\r\n \r\n dropdown = document.createElement('div');\r\n dropdown.className = 'period-dropdown';\r\n dropdown.style.position = 'absolute';\r\n dropdown.style.zIndex = '100';\r\n dropdown.style.backgroundColor = 'white';\r\n dropdown.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';\r\n dropdown.style.borderRadius = '4px';\r\n dropdown.style.padding = '10px 0';\r\n dropdown.style.width = '150px';\r\n \r\n const options = ['Upcoming', 'Past Events', 'Month View'];\r\n \r\n options.forEach(option => {\r\n const optionElement = document.createElement('div');\r\n optionElement.textContent = option;\r\n optionElement.style.padding = '8px 15px';\r\n optionElement.style.cursor = 'pointer';\r\n optionElement.style.transition = 'background-color 0.3s';\r\n \r\n optionElement.addEventListener('mouseover', function() {\r\n this.style.backgroundColor = '#f5f5f5';\r\n });\r\n \r\n optionElement.addEventListener('mouseout', function() {\r\n this.style.backgroundColor = 'transparent';\r\n });\r\n \r\n optionElement.addEventListener('click', function() {\r\n if (option === 'Upcoming') {\r\n currentPeriod = 'upcoming';\r\n } else if (option === 'Past Events') {\r\n currentPeriod = 'past';\r\n } else if (option === 'Month View') {\r\n currentView = 'month';\r\n \/\/ Here you would implement month view rendering\r\n }\r\n \r\n renderEvents();\r\n dropdown.remove();\r\n });\r\n \r\n dropdown.appendChild(optionElement);\r\n });\r\n \r\n \/\/ Position the dropdown\r\n const rect = currentPeriodElement.getBoundingClientRect();\r\n dropdown.style.top = (rect.bottom + window.scrollY) + 'px';\r\n dropdown.style.left = (rect.left + window.scrollX) + 'px';\r\n \r\n document.body.appendChild(dropdown);\r\n \r\n \/\/ Close dropdown when clicking elsewhere\r\n setTimeout(() => {\r\n const closeDropdown = function(e) {\r\n if (!dropdown.contains(e.target) && e.target !== currentPeriodElement) {\r\n dropdown.remove();\r\n document.removeEventListener('click', closeDropdown);\r\n }\r\n };\r\n \r\n document.addEventListener('click', closeDropdown);\r\n }, 0);\r\n }\r\n });\r\n <\/script>\r\n <div class=\"events-container\">\r\n \r\n <div class=\"search-bar\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search for events\">\r\n <button class=\"search-button\">Find Events<\/button>\r\n <\/div>\r\n \r\n <div class=\"view-options\">\r\n <button class=\"view-option active\">List<\/button>\r\n <button class=\"view-option\">Month<\/button>\r\n <button class=\"view-option\">Day<\/button>\r\n <\/div>\r\n \r\n <div class=\"calendar-nav\">\r\n <button class=\"nav-button\">‹<\/button>\r\n <div class=\"current-view\">\r\n <button class=\"today-button\">Today<\/button>\r\n <div class=\"current-period\">\r\n Upcoming\r\n <span class=\"dropdown-icon\">▾<\/span>\r\n <\/div>\r\n <\/div>\r\n <button class=\"nav-button\">›<\/button>\r\n <\/div>\r\n \r\n \r\n <div class=\"no-events\">\r\n There are no upcoming events.\r\n <\/div>\r\n \r\n \r\n <h2 class=\"section-title\">Past Events<\/h2>\r\n \r\n <div class=\"event-list\">\r\n \r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NGUN – Events Calendar Registration for the Youth Conference: Mini NGUN is now open! Register here Find Events List Month Day ‹ Today Upcoming ▾ › There are no upcoming events. Past Events<\/p>\n","protected":false},"author":10,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-397","page","type-page","status-publish","hentry"],"ase":null,"_links":{"self":[{"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/pages\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ngun.global\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=397"}],"version-history":[{"count":50,"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/pages\/397\/revisions"}],"predecessor-version":[{"id":1340,"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/pages\/397\/revisions\/1340"}],"wp:attachment":[{"href":"https:\/\/www.ngun.global\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t

<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n NGUN - Events Calendar<\/title>\r\n <style>\r\n :root {\r\n --primary: #262e52;\r\n --secondary: #c89b43;\r\n --light-gray: #f5f5f5;\r\n --mid-gray: #e0e0e0;\r\n --dark-gray: #333333;\r\n --white: #ffffff;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Arial', sans-serif;\r\n }\r\n \r\n .banner {\r\n background-color: var(--secondary);\r\n color: var(--white);\r\n text-align: center;\r\n padding: 15px;\r\n font-weight: bold;\r\n font-size: 18px;\r\n margin-bottom: 20px;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n max-width: 1200px;\r\n margin: 20px auto;\r\n }\r\n \r\n .events-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n background-color: var(--white);\r\n border-radius: 8px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .search-bar {\r\n display: flex;\r\n margin-bottom: 20px;\r\n border: 1px solid var(--mid-gray);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n }\r\n \r\n .search-input {\r\n flex-grow: 1;\r\n padding: 12px 15px;\r\n border: none;\r\n outline: none;\r\n font-size: 16px;\r\n }\r\n \r\n .search-button {\r\n background-color: var(--secondary);\r\n color: var(--white);\r\n border: none;\r\n padding: 12px 20px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: background-color 0.3s;\r\n }\r\n \r\n .search-button:hover {\r\n background-color: #b68a39;\r\n }\r\n \r\n .view-options {\r\n display: flex;\r\n justify-content: flex-end;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .view-option {\r\n padding: 8px 16px;\r\n margin-left: 10px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 500;\r\n color: var(--dark-gray);\r\n border-bottom: 3px solid transparent;\r\n }\r\n \r\n .view-option.active {\r\n color: var(--primary);\r\n border-bottom: 3px solid var(--primary);\r\n font-weight: bold;\r\n }\r\n \r\n .calendar-nav {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .nav-button {\r\n background: none;\r\n border: none;\r\n color: var(--primary);\r\n font-size: 20px;\r\n cursor: pointer;\r\n padding: 5px 10px;\r\n }\r\n \r\n .current-view {\r\n display: flex;\r\n align-items: center;\r\n margin: 0 15px;\r\n }\r\n \r\n .today-button {\r\n padding: 6px 12px;\r\n background-color: var(--light-gray);\r\n border: 1px solid var(--mid-gray);\r\n border-radius: 4px;\r\n margin-right: 15px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n }\r\n \r\n .current-period {\r\n font-size: 20px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .dropdown-icon {\r\n margin-left: 5px;\r\n font-size: 14px;\r\n }\r\n \r\n .no-events {\r\n background-color: var(--light-gray);\r\n padding: 15px;\r\n text-align: center;\r\n border-radius: 4px;\r\n color: var(--dark-gray);\r\n margin-bottom: 30px;\r\n }\r\n \r\n .section-title {\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid var(--secondary);\r\n }\r\n \r\n .event-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 30px;\r\n }\r\n \r\n .event-card {\r\n display: flex;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n transition: transform 0.3s, box-shadow 0.3s;\r\n }\r\n \r\n .event-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .event-date {\r\n background-color: var(--primary);\r\n color: var(--white);\r\n padding: 15px;\r\n text-align: center;\r\n min-width: 100px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n \r\n .date-month {\r\n text-transform: uppercase;\r\n font-size: 12px;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .date-day {\r\n font-size: 28px;\r\n font-weight: bold;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .date-year {\r\n font-size: 14px;\r\n }\r\n \r\n .event-content {\r\n flex-grow: 1;\r\n display: flex;\r\n }\r\n \r\n .event-details {\r\n padding: 20px;\r\n flex-grow: 1;\r\n }\r\n \r\n .event-time {\r\n color: var(--secondary);\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .event-title {\r\n font-size: 20px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n margin-bottom: 10px;\r\n }\r\n \r\n .event-title a {\r\n color: var(--primary);\r\n text-decoration: none;\r\n transition: color 0.3s;\r\n }\r\n \r\n .event-title a:hover {\r\n color: var(--secondary);\r\n }\r\n \r\n .event-description {\r\n color: var(--dark-gray);\r\n margin-bottom: 15px;\r\n line-height: 1.5;\r\n }\r\n \r\n .event-location {\r\n color: var(--dark-gray);\r\n font-style: italic;\r\n font-size: 14px;\r\n }\r\n \r\n .event-image {\r\n width: 300px;\r\n object-fit: cover;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .event-card {\r\n flex-direction: column;\r\n }\r\n \r\n .event-date {\r\n padding: 10px;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .event-content {\r\n flex-direction: column;\r\n }\r\n \r\n .event-image {\r\n width: 100%;\r\n height: 200px;\r\n }\r\n \r\n .section-title {\r\n font-size: 20px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"banner\">\r\n Registration for the Youth Conference: Mini NGUN is now open! <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScyBnFZGKyJVV8MjBlBr6QD3qrVNXLg70i4lP70G_YNgXWtNQ\/viewform?usp=header \">Register here<\/a>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ This will execute once the DOM is fully loaded\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Real upcoming events\r\n const eventsData = [\r\n {\r\n id: 1,\r\n title: \"New Generation Webinar: Salud mental en poblaciones j\u00f3venes de Am\u00e9rica Latina (online)\",\r\n description: \"In the first New Generation Webinar (Spanish), our expert Jorge Brito of the International Humanitarian Consultants & Project Management (IHC) provides a unique opportunity to participate in an enriching discussion on youth mental health in Latin America. Registration is completely free, and participants will receive an official Certificate of Participation. In addition, their perspectives will be included in the first report of the NGUN Project, which will be shared with international leaders at the UN level.\",\r\n location: \"Zoom\",\r\n startDate: new Date(2025, 3, 5, 14, 0), \/\/ April 5, 2025, 2:00 PM (using a default time)\r\n endDate: new Date(2025, 3, 5, 16, 0), \/\/ April 5, 2025, 4:00 PM (using a default time)\r\n \r\n language: \"Spanish\",\r\n cost: \"Free\",\r\n registration: \"https:\/\/docs.google.com\/forms\/d\/1KK66ScozdF-Sk8wIb2T76tSicOhmoG4fcBVxmhwFYG0\/edit#responses\"\r\n },\r\n {\r\n id: 2,\r\n title: \"Youth Conference: Mini NGUN\",\r\n description: \"This one-day event will feature insightful panel discussions, exciting interactive roundtable sessions and great networking opportunities. Learn from our experts and make your voice heard! The topic will address Youth Involvement in Current Challenges (Democracy, Climate, Economic Crisis), and the perspectives of our participants will be included in the first NGUN Report which will be shared with Global. Human Rights Defence's (GHRD) Network at the UN Level! Stay tuned for more info!\",\r\n location: \"Het Nutshuis, Riviervismarkt 5, 2513 Den Haag\",\r\n startDate: new Date(2025, 4, 3, 9, 0), \/\/ May 3, 2025, 9:00 AM (using a default time)\r\n endDate: new Date(2025, 4, 3, 17, 0), \/\/ May 3, 2025, 5:00 PM (using a default time)\r\n image: \"\", \/\/ \"Stock Image\"\r\n language: \"English\",\r\n cost: \"5\u20ac\",\r\n registration: \"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScyBnFZGKyJVV8MjBlBr6QD3qrVNXLg70i4lP70G_YNgXWtNQ\/viewform?usp=header \"\r\n }\r\n ];\r\n\r\n \/\/ Elements\r\n const searchInput = document.querySelector('.search-input');\r\n const searchButton = document.querySelector('.search-button');\r\n const viewOptions = document.querySelectorAll('.view-option');\r\n const prevButton = document.querySelectorAll('.nav-button')[0];\r\n const nextButton = document.querySelectorAll('.nav-button')[1];\r\n const todayButton = document.querySelector('.today-button');\r\n const currentPeriodElement = document.querySelector('.current-period');\r\n const noEventsElement = document.querySelector('.no-events');\r\n const eventListElement = document.querySelector('.event-list');\r\n const pastEventsTitle = document.querySelector('.section-title');\r\n\r\n \/\/ Current state\r\n let currentView = 'list'; \/\/ list, month, day\r\n let currentDate = new Date();\r\n let currentPeriod = 'upcoming';\r\n let searchQuery = '';\r\n \r\n \/\/ Initialize\r\n renderEvents();\r\n\r\n \/\/ Event listeners\r\n searchButton.addEventListener('click', function() {\r\n searchQuery = searchInput.value.toLowerCase();\r\n renderEvents();\r\n });\r\n\r\n searchInput.addEventListener('keyup', function(event) {\r\n if (event.key === 'Enter') {\r\n searchQuery = searchInput.value.toLowerCase();\r\n renderEvents();\r\n }\r\n });\r\n\r\n viewOptions.forEach(option => {\r\n option.addEventListener('click', function() {\r\n viewOptions.forEach(opt => opt.classList.remove('active'));\r\n this.classList.add('active');\r\n currentView = this.textContent.toLowerCase();\r\n renderEvents();\r\n });\r\n });\r\n\r\n prevButton.addEventListener('click', function() {\r\n navigatePeriod(-1);\r\n });\r\n\r\n nextButton.addEventListener('click', function() {\r\n navigatePeriod(1);\r\n });\r\n\r\n todayButton.addEventListener('click', function() {\r\n currentDate = new Date();\r\n currentPeriod = 'upcoming';\r\n updateCurrentPeriodDisplay();\r\n renderEvents();\r\n });\r\n\r\n currentPeriodElement.addEventListener('click', function() {\r\n togglePeriodDropdown();\r\n });\r\n\r\n \/\/ Functions\r\n function renderEvents() {\r\n \/\/ First determine which events to show based on current period and search\r\n let eventsToShow = [];\r\n const now = new Date();\r\n \r\n if (currentPeriod === 'upcoming') {\r\n \/\/ Future events\r\n eventsToShow = eventsData.filter(event => event.startDate > now);\r\n } else if (currentPeriod === 'past') {\r\n \/\/ Past events\r\n eventsToShow = eventsData.filter(event => event.startDate <= now);\r\n } else {\r\n \/\/ Month view\r\n \/\/ Can be expanded for more sophisticated filtering\r\n eventsToShow = eventsData;\r\n }\r\n \r\n \/\/ Apply search filter if any\r\n if (searchQuery) {\r\n eventsToShow = eventsToShow.filter(event => \r\n event.title.toLowerCase().includes(searchQuery) || \r\n event.description.toLowerCase().includes(searchQuery) ||\r\n event.location.toLowerCase().includes(searchQuery)\r\n );\r\n }\r\n \r\n \/\/ Sort events by date (newest first for past, soonest first for upcoming)\r\n eventsToShow.sort((a, b) => \r\n currentPeriod === 'past' \r\n ? b.startDate - a.startDate \r\n : a.startDate - b.startDate\r\n );\r\n \r\n \/\/ Update UI\r\n updateEventsDisplay(eventsToShow);\r\n updateCurrentPeriodDisplay();\r\n }\r\n \r\n function updateEventsDisplay(events) {\r\n \/\/ Update the no events message\r\n if (events.length === 0) {\r\n noEventsElement.style.display = 'block';\r\n noEventsElement.textContent = `There are no ${currentPeriod} events${searchQuery ? ' matching your search' : ''}.`;\r\n eventListElement.style.display = 'none';\r\n pastEventsTitle.textContent = currentPeriod === 'upcoming' ? 'Upcoming Events' : 'Past Events';\r\n } else {\r\n noEventsElement.style.display = 'none';\r\n eventListElement.style.display = 'flex';\r\n pastEventsTitle.textContent = currentPeriod === 'upcoming' ? 'Upcoming Events' : 'Latest Past Events';\r\n \r\n \/\/ Clear current events\r\n eventListElement.innerHTML = '';\r\n \r\n \/\/ Add events to the list\r\n events.forEach(event => {\r\n const eventDate = event.startDate;\r\n const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];\r\n \r\n \/\/ Format time\r\n const startHour = eventDate.getHours();\r\n const startMinutes = eventDate.getMinutes();\r\n const endHour = event.endDate.getHours();\r\n const endMinutes = event.endDate.getMinutes();\r\n \r\n const startTime = `${startHour % 12 || 12}:${startMinutes.toString().padStart(2, '0')} ${startHour >= 12 ? 'pm' : 'am'}`;\r\n const endTime = `${endHour % 12 || 12}:${endMinutes.toString().padStart(2, '0')} ${endHour >= 12 ? 'pm' : 'am'}`;\r\n \r\n const eventCard = document.createElement('div');\r\n eventCard.className = 'event-card';\r\n eventCard.innerHTML = `\r\n <div class=\"event-date\">\r\n <div class=\"date-month\">${months[eventDate.getMonth()]}<\/div>\r\n <div class=\"date-day\">${eventDate.getDate()}<\/div>\r\n <div class=\"date-year\">${eventDate.getFullYear()}<\/div>\r\n <\/div>\r\n <div class=\"event-content\">\r\n <div class=\"event-details\">\r\n <div class=\"event-time\">${startTime} - ${endTime} | ${event.language}<\/div>\r\n <h3 class=\"event-title\">\r\n <a href=\"#\">${event.title}<\/a>\r\n <\/h3>\r\n <p class=\"event-description\">${event.description}<\/p>\r\n <div class=\"event-location\">${event.location}<\/div>\r\n <div class=\"event-additional-info\" style=\"margin-top: 12px;\">\r\n <p style=\"font-weight: bold; margin-bottom: 4px;\">Cost: <span style=\"font-weight: normal;\">${event.cost}<\/span><\/p>\r\n <p style=\"font-weight: bold; margin-bottom: 0;\">Registration: \r\n <span style=\"font-weight: normal;\">\r\n ${event.registration === \"tba\" ? \r\n \"To be announced\" : \r\n `<a href=\"${event.registration}\" target=\"_blank\" style=\"color: var(--secondary);\">Register here<\/a>`\r\n }\r\n <\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n `;\r\n \r\n eventListElement.appendChild(eventCard);\r\n });\r\n }\r\n }\r\n \r\n function updateCurrentPeriodDisplay() {\r\n if (currentPeriod === 'upcoming') {\r\n currentPeriodElement.innerHTML = 'Upcoming <span class=\"dropdown-icon\">▾<\/span>';\r\n } else if (currentPeriod === 'past') {\r\n currentPeriodElement.innerHTML = 'Past Events <span class=\"dropdown-icon\">▾<\/span>';\r\n } else {\r\n \/\/ For month view, show the month and year\r\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n currentPeriodElement.innerHTML = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()} <span class=\"dropdown-icon\">▾<\/span>`;\r\n }\r\n }\r\n \r\n function navigatePeriod(direction) {\r\n if (currentView === 'month') {\r\n \/\/ In month view, navigate months\r\n currentDate.setMonth(currentDate.getMonth() + direction);\r\n } else if (currentPeriod === 'upcoming' && direction < 0) {\r\n \/\/ Switch from upcoming to past\r\n currentPeriod = 'past';\r\n } else if (currentPeriod === 'past' && direction > 0) {\r\n \/\/ Switch from past to upcoming\r\n currentPeriod = 'upcoming';\r\n }\r\n \r\n renderEvents();\r\n }\r\n \r\n function togglePeriodDropdown() {\r\n \/\/ Create dropdown if it doesn't exist\r\n let dropdown = document.querySelector('.period-dropdown');\r\n \r\n if (dropdown) {\r\n dropdown.remove();\r\n return;\r\n }\r\n \r\n dropdown = document.createElement('div');\r\n dropdown.className = 'period-dropdown';\r\n dropdown.style.position = 'absolute';\r\n dropdown.style.zIndex = '100';\r\n dropdown.style.backgroundColor = 'white';\r\n dropdown.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';\r\n dropdown.style.borderRadius = '4px';\r\n dropdown.style.padding = '10px 0';\r\n dropdown.style.width = '150px';\r\n \r\n const options = ['Upcoming', 'Past Events', 'Month View'];\r\n \r\n options.forEach(option => {\r\n const optionElement = document.createElement('div');\r\n optionElement.textContent = option;\r\n optionElement.style.padding = '8px 15px';\r\n optionElement.style.cursor = 'pointer';\r\n optionElement.style.transition = 'background-color 0.3s';\r\n \r\n optionElement.addEventListener('mouseover', function() {\r\n this.style.backgroundColor = '#f5f5f5';\r\n });\r\n \r\n optionElement.addEventListener('mouseout', function() {\r\n this.style.backgroundColor = 'transparent';\r\n });\r\n \r\n optionElement.addEventListener('click', function() {\r\n if (option === 'Upcoming') {\r\n currentPeriod = 'upcoming';\r\n } else if (option === 'Past Events') {\r\n currentPeriod = 'past';\r\n } else if (option === 'Month View') {\r\n currentView = 'month';\r\n \/\/ Here you would implement month view rendering\r\n }\r\n \r\n renderEvents();\r\n dropdown.remove();\r\n });\r\n \r\n dropdown.appendChild(optionElement);\r\n });\r\n \r\n \/\/ Position the dropdown\r\n const rect = currentPeriodElement.getBoundingClientRect();\r\n dropdown.style.top = (rect.bottom + window.scrollY) + 'px';\r\n dropdown.style.left = (rect.left + window.scrollX) + 'px';\r\n \r\n document.body.appendChild(dropdown);\r\n \r\n \/\/ Close dropdown when clicking elsewhere\r\n setTimeout(() => {\r\n const closeDropdown = function(e) {\r\n if (!dropdown.contains(e.target) && e.target !== currentPeriodElement) {\r\n dropdown.remove();\r\n document.removeEventListener('click', closeDropdown);\r\n }\r\n };\r\n \r\n document.addEventListener('click', closeDropdown);\r\n }, 0);\r\n }\r\n });\r\n <\/script>\r\n <div class=\"events-container\">\r\n \r\n <div class=\"search-bar\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search for events\">\r\n <button class=\"search-button\">Find Events<\/button>\r\n <\/div>\r\n \r\n <div class=\"view-options\">\r\n <button class=\"view-option active\">List<\/button>\r\n <button class=\"view-option\">Month<\/button>\r\n <button class=\"view-option\">Day<\/button>\r\n <\/div>\r\n \r\n <div class=\"calendar-nav\">\r\n <button class=\"nav-button\">‹<\/button>\r\n <div class=\"current-view\">\r\n <button class=\"today-button\">Today<\/button>\r\n <div class=\"current-period\">\r\n Upcoming\r\n <span class=\"dropdown-icon\">▾<\/span>\r\n <\/div>\r\n <\/div>\r\n <button class=\"nav-button\">›<\/button>\r\n <\/div>\r\n \r\n \r\n <div class=\"no-events\">\r\n There are no upcoming events.\r\n <\/div>\r\n \r\n \r\n <h2 class=\"section-title\">Past Events<\/h2>\r\n \r\n <div class=\"event-list\">\r\n \r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NGUN – Events Calendar Registration for the Youth Conference: Mini NGUN is now open! Register here Find Events List Month Day ‹ Today Upcoming ▾ › There are no upcoming events. Past Events<\/p>\n","protected":false},"author":10,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-397","page","type-page","status-publish","hentry"],"ase":null,"_links":{"self":[{"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/pages\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ngun.global\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=397"}],"version-history":[{"count":50,"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/pages\/397\/revisions"}],"predecessor-version":[{"id":1340,"href":"https:\/\/www.ngun.global\/index.php?rest_route=\/wp\/v2\/pages\/397\/revisions\/1340"}],"wp:attachment":[{"href":"https:\/\/www.ngun.global\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}