Embedded Google Calendar<\/title>\n <style>\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n }\n\n#calendar-container {\n position: relative; \/* Keep this to provide a positioning context *\/\n display: flex;\n flex-direction: column; \/* Stack children vertically *\/\n align-items: center;\n margin-top: 20px;\n}\n\n #calendar-select-container {\n width: 50%;\n display: block;\n margin-bottom: 15px;\n }\n\n #calendar-select {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n }\n\n #button-container {\n display: none;\n }\n\n#calendar-title-large-screen {\n display: none; \/* This will still hide the title on smaller screens *\/\n order: -1; \/* This will move the title above the calendar in the flex container *\/\n width: 100%; \/* Full width of the container *\/\n text-align: center;\n font-size: 30px;\n padding: 10px 0; \/* Add padding to give some space above the calendar *\/\nfont-weight: bold;\n color: black;\n z-index: 10; \/* Ensure it's above other elements *\/\n}\n\n @media (min-width: 768px) {\n #calendar-title-large-screen {\n display: block;\n \/* Show title only on larger screens *\/\n }\n\n #calendar-container {\n flex-direction: row;\n align-items: flex-start;\n }\n\n #button-container {\n display: flex;\n flex-direction: column;\n margin-right: 20px;\n}\n\n #calendar-select-container {\n display: none;\n }\n\n #calendar-title {\n display: none;\n \/* Hide title on larger displays *\/\n }\n\n #calendar-iframe {\n height: 600px;\n width: calc(100% - 220px);\n \/* Adjust as needed *\/\n }\n \n .active-button {\n background-color: #4CAF50; \/* Green background *\/\n color: white; \/* White text *\/\n border-color: #4CAF50; \/* Green border, if needed *\/\n}\n\n }\n\nbutton {\n margin-bottom: 10px;\n padding: 10px 20px; \/* Increase padding for better visual appeal *\/\n font-size: 18px;\n width: 100%; \/* Make each button expand to fill the container *\/\n color: white;\n background-color: #4393FF; \/* Set default background color *\/\n}\n\nbutton:hover {\n background-color: #94C2FF; \/* Light blue background on hover *\/\n}\n\n #button-container button:last-child {\n margin-bottom: 0;\n}\n\n #calendar-iframe {\n border: solid 1px #777;\n height: 600px;\n width: 100%;\n max-width: 800px;\n }\n <\/style>\n<\/head>\n\n<body>\n <div>\n \n<div id=\"selected-calendar-header\" style=\"display: none; background-color: blue; color: white; width: 100%; text-align: center; padding: 5px;\">\n Current Calendar Displayed: <span id=\"current-calendar-name\"><\/span>\n<\/div>\n <h2 id=\"calendar-title-large-screen\"><\/h2> \n <div id=\"calendar-container\">\n <div id=\"button-container\"><\/div>\n <div id=\"calendar-select-container\">\n <select id=\"calendar-select\"><\/select>\n <\/div>\n <h2 id=\"calendar-title\">Default Calendar Title<\/h2>\n <iframe id=\"calendar-iframe\" src=\"\" frameborder=\"0\" scrolling=\"no\"><\/iframe>\n <\/div>\n <\/div>\n\n\n <script>\n \/\/ Array of calendar URLs\nvar calendarURLs = [\n { title: \"Parish Events\", color: \"green\", code: \"OGVkYzcyMzgxYzdmZTkwYzg1NDg4MDc1NjFhMDlhNGQ4OTcxMWQ5ZjQzZjdmM2QwMGYyM2Q3MDZkYmUwYmIwOEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Mass, Adoration and Confession\", color: \"yellow\", code: \"ZTE5ZDk5YmM3M2ZhZjcyNmFmMDI0ZjdlMTIzNDEyNTYyYTJlMGJhOGNmNjU2Y2MwOWVjM2ZkMjU2N2NkMDBmNEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Weddings and Funerals\", color: \"yellow\", code: \"NDk4N2NiZDRjZTI4MDI0NWE1ZDU3ZjZkYTI1ODBjMTAwNjY5ZDEzZGZkZWVhN2FjZTcyYzBmZmIyMmJkMDkzZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Sacramental Program 2024\", color: \"yellow\", code: \"NzU3OWU2Zjg0NzY3ZmY5OTQ0ODhlMzZlMjBkMDUxNGMzMDJmMjU4Y2RjNDcwNTMxZGEyMjQ3Y2ViNzlkMGUzZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Medjugorje Prayer Group\", color: \"yellow\", code: \"YWM1NTk5ZDU0ZmYxNTM3NjlmNWI3OGFlMzJlM2E2MTY4M2YxZjQ0NDBhNGQ0OTI4ZDY0NGIxNzNlMTJlYzE2Y0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Catholic Women\u2019s League\", color: \"yellow\", code: \"ZjYxOTNlOGJlN2UxZDUxZDBmZmQ1YzM0ZDU4YWYxNzI3ZDZmY2EyZGEwN2E5OTM2Yjk2OGVmZDc1NDNkZWU2N0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Cenacle Group\", color: \"yellow\", code: \"Yzg1YTQzMzJjZmYxMmJmNzVjMTA5MTFmYWQwY2M0YmMxOWMxZTg0NjNjZTg1Njk0NWNlZjA0ODIwMzU5OTYxZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Gymea Catholic Men\", color: \"yellow\", code: \"Y2FjZDUwMTEzMTQyOWQ5MWMzMWQzOWE4NjkwNmVkMDc2ZGY1NTBlZjA0NzNmZWQ4MWIwYmEyZjU4MDc1MjFmMEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Legion of Mary\", color: \"yellow\", code: \"ZjhhN2RiY2NkZGFmZjliYzJkYWY1MTg4ZjMyM2MwMDJkMzA4Nzk1NjRjMGM5NGE2NGRmYTAyMGVjOGM2NjA2M0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Vinnies\", color: \"yellow\", code: \"YzMxMjIzOTdiYzVjODE3NWZlN2QyMTRlMTU2YjJhNDMzZGUyOGMwYmJhODk2ZGYzMTUwYmVmMjY5NTlkNTAzN0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Young Adults\", color: \"yellow\", code: \"M2E0YTIyMWRhMzI2YmVkOTcyYjRkNmFkYmNhYzdiMzI4YmU4NDk3MmRhYzNlMjkwMWMxNGQ3NTg4YzI2YzEwMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" }\n];\n\n\/\/ Save the first three items\nvar firstItems = calendarURLs.slice(0, 4);\n\n\/\/ Sort the rest of the items alphabetically\nvar restSorted = calendarURLs.slice(4).sort((a, b) => a.title.localeCompare(b.title));\n\n\/\/ Concatenate the first three items and the sorted rest\ncalendarURLs = firstItems.concat(restSorted);\n\n\n \n var activeButton = null; \/\/ Declare activeButton outside to have a global scope\n\n\n \/\/ Function to create buttons and dropdown options\nfunction createControls() {\n var buttonContainer = document.getElementById('button-container');\n var select = document.getElementById('calendar-select');\n\n \/\/ Add options and buttons for each calendar first\n calendarURLs.forEach(function(calendar) {\n var button = document.createElement('button');\n var option = document.createElement('option');\n\n button.textContent = calendar.title;\n button.setAttribute('data-title', calendar.title);\n button.onclick = function() {\n changeCalendarFrame(calendar.code, calendar.title);\n select.value = calendar.code; \/\/ Synchronize dropdown with the button pressed\n highlightButton(button); \/\/ Call highlightButton to activate the clicked button\n\n };\n\n option.value = calendar.code;\n option.textContent = calendar.title;\n\n buttonContainer.appendChild(button);\n select.appendChild(option);\n });\n\n \/\/ Then, add the \"All\" button and option last\n var allButton = document.createElement('button');\n allButton.textContent = 'ALL EVENTS';\n allButton.onclick = function() {\n showAllCalendars();\n select.value = 'ALL EVENTS'; \/\/ Synchronize dropdown with the \"ALL EVENTS\" button\n highlightButton(allButton); \/\/ Call highlightButton to activate the \"All\" button\n\n };\n buttonContainer.appendChild(allButton); \/\/ This adds the \"All\" button at the end of the button list\n\n var allOption = document.createElement('option');\n allOption.value = 'ALL EVENTS';\n allOption.textContent = 'All Calendars';\n select.appendChild(allOption); \/\/ This adds the \"All\" option at the end of the dropdown list\n\n \/\/ Attach onchange event to dropdown\n select.onchange = function() {\n var selectedCode = this.value;\n var selectedCalendar = calendarURLs.find(calendar => calendar.code === selectedCode);\n if (selectedCalendar) {\n changeCalendarFrame(selectedCalendar.code, selectedCalendar.title);\n } else if (selectedCode === 'all') {\n showAllCalendars();\n }\n };\n}\n\n \/\/ Function to highlight the active button and clear previous highlights\n function highlightButton(newActiveButton) {\n if (activeButton) {\n activeButton.classList.remove('active-button'); \/\/ Remove active class from previously active button\n }\n newActiveButton.classList.add('active-button'); \/\/ Add active class to the new active button\n activeButton = newActiveButton; \/\/ Update the reference to the current active button\n }\n\n\n\n\nfunction changeCalendarFrame(code, title) {\n var iframe = document.getElementById('calendar-iframe');\n var selectedCalendarHeader = document.getElementById('selected-calendar-header');\n var currentCalendarName = document.getElementById('current-calendar-name');\n \n iframe.src = \"https:\/\/calendar.google.com\/calendar\/embed?src=\" + code + \"&showTitle=0\";\n document.getElementById('calendar-title').textContent = title;\n document.getElementById('calendar-title-large-screen').textContent = title;\n\n \/\/ Update the selected calendar header text based on the selected calendar\n currentCalendarName.textContent = title;\n selectedCalendarHeader.style.display = 'block'; \/\/ Ensure the header is visible\n}\n\nfunction showAllCalendars() {\n var iframe = document.getElementById('calendar-iframe');\n var selectedCalendarHeader = document.getElementById('selected-calendar-header');\n var currentCalendarName = document.getElementById('current-calendar-name');\n\n \/\/ Base calendar URL with the first calendar included\n var combinedURL = \"https:\/\/calendar.google.com\/calendar\/embed?showTitle=0&src=\" + calendarURLs[0].code;\n calendarURLs.slice(1).forEach(function(calendar) {\n combinedURL += \"&src=\" + calendar.code;\n });\n\n console.log(combinedURL); \/\/ Check to ensure the URL is correct\n iframe.src = combinedURL;\n document.getElementById('calendar-title').textContent = \"ALL EVENTS\";\n document.getElementById('calendar-title-large-screen').textContent = \"ALL EVENTS\";\n\n \/\/ Update the selected calendar header for \"All Calendars\"\n currentCalendarName.textContent = \"All Calendars\";\n selectedCalendarHeader.style.display = 'block';\n}\n\n\n\n\/\/ Initial setup of controls and default display\nwindow.onload = function() {\n createControls();\n var firstButton = document.querySelector('#button-container button');\n highlightButton(firstButton); \/\/ Highlight the first button by default\n changeCalendarFrame(calendarURLs[0].code, calendarURLs[0].title);\n};\n\n <\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\">Want to book or update an event? Fill out this <a href=\"https:\/\/form.jotform.com\/241080959821056\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>form<\/strong><\/a> or email office@stcaths.org.au<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Check out our new Parish Calendar to keep up to date with our latest events! Embedded Google Calendar Current Calendar Displayed: Default Calendar Title Want to book or update an event? Fill out this form or email office@stcaths.org.au<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"custom_full_width.php","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/pages\/8531"}],"collection":[{"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/comments?post=8531"}],"version-history":[{"count":5,"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/pages\/8531\/revisions"}],"predecessor-version":[{"id":8648,"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/pages\/8531\/revisions\/8648"}],"wp:attachment":[{"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/media?parent=8531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Check out our new Parish Calendar to keep up to date with our latest events!<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n\n\n\n\n \n \n Embedded Google Calendar<\/title>\n <style>\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n }\n\n#calendar-container {\n position: relative; \/* Keep this to provide a positioning context *\/\n display: flex;\n flex-direction: column; \/* Stack children vertically *\/\n align-items: center;\n margin-top: 20px;\n}\n\n #calendar-select-container {\n width: 50%;\n display: block;\n margin-bottom: 15px;\n }\n\n #calendar-select {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n }\n\n #button-container {\n display: none;\n }\n\n#calendar-title-large-screen {\n display: none; \/* This will still hide the title on smaller screens *\/\n order: -1; \/* This will move the title above the calendar in the flex container *\/\n width: 100%; \/* Full width of the container *\/\n text-align: center;\n font-size: 30px;\n padding: 10px 0; \/* Add padding to give some space above the calendar *\/\nfont-weight: bold;\n color: black;\n z-index: 10; \/* Ensure it's above other elements *\/\n}\n\n @media (min-width: 768px) {\n #calendar-title-large-screen {\n display: block;\n \/* Show title only on larger screens *\/\n }\n\n #calendar-container {\n flex-direction: row;\n align-items: flex-start;\n }\n\n #button-container {\n display: flex;\n flex-direction: column;\n margin-right: 20px;\n}\n\n #calendar-select-container {\n display: none;\n }\n\n #calendar-title {\n display: none;\n \/* Hide title on larger displays *\/\n }\n\n #calendar-iframe {\n height: 600px;\n width: calc(100% - 220px);\n \/* Adjust as needed *\/\n }\n \n .active-button {\n background-color: #4CAF50; \/* Green background *\/\n color: white; \/* White text *\/\n border-color: #4CAF50; \/* Green border, if needed *\/\n}\n\n }\n\nbutton {\n margin-bottom: 10px;\n padding: 10px 20px; \/* Increase padding for better visual appeal *\/\n font-size: 18px;\n width: 100%; \/* Make each button expand to fill the container *\/\n color: white;\n background-color: #4393FF; \/* Set default background color *\/\n}\n\nbutton:hover {\n background-color: #94C2FF; \/* Light blue background on hover *\/\n}\n\n #button-container button:last-child {\n margin-bottom: 0;\n}\n\n #calendar-iframe {\n border: solid 1px #777;\n height: 600px;\n width: 100%;\n max-width: 800px;\n }\n <\/style>\n<\/head>\n\n<body>\n <div>\n \n<div id=\"selected-calendar-header\" style=\"display: none; background-color: blue; color: white; width: 100%; text-align: center; padding: 5px;\">\n Current Calendar Displayed: <span id=\"current-calendar-name\"><\/span>\n<\/div>\n <h2 id=\"calendar-title-large-screen\"><\/h2> \n <div id=\"calendar-container\">\n <div id=\"button-container\"><\/div>\n <div id=\"calendar-select-container\">\n <select id=\"calendar-select\"><\/select>\n <\/div>\n <h2 id=\"calendar-title\">Default Calendar Title<\/h2>\n <iframe id=\"calendar-iframe\" src=\"\" frameborder=\"0\" scrolling=\"no\"><\/iframe>\n <\/div>\n <\/div>\n\n\n <script>\n \/\/ Array of calendar URLs\nvar calendarURLs = [\n { title: \"Parish Events\", color: \"green\", code: \"OGVkYzcyMzgxYzdmZTkwYzg1NDg4MDc1NjFhMDlhNGQ4OTcxMWQ5ZjQzZjdmM2QwMGYyM2Q3MDZkYmUwYmIwOEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Mass, Adoration and Confession\", color: \"yellow\", code: \"ZTE5ZDk5YmM3M2ZhZjcyNmFmMDI0ZjdlMTIzNDEyNTYyYTJlMGJhOGNmNjU2Y2MwOWVjM2ZkMjU2N2NkMDBmNEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Weddings and Funerals\", color: \"yellow\", code: \"NDk4N2NiZDRjZTI4MDI0NWE1ZDU3ZjZkYTI1ODBjMTAwNjY5ZDEzZGZkZWVhN2FjZTcyYzBmZmIyMmJkMDkzZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Sacramental Program 2024\", color: \"yellow\", code: \"NzU3OWU2Zjg0NzY3ZmY5OTQ0ODhlMzZlMjBkMDUxNGMzMDJmMjU4Y2RjNDcwNTMxZGEyMjQ3Y2ViNzlkMGUzZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Medjugorje Prayer Group\", color: \"yellow\", code: \"YWM1NTk5ZDU0ZmYxNTM3NjlmNWI3OGFlMzJlM2E2MTY4M2YxZjQ0NDBhNGQ0OTI4ZDY0NGIxNzNlMTJlYzE2Y0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Catholic Women\u2019s League\", color: \"yellow\", code: \"ZjYxOTNlOGJlN2UxZDUxZDBmZmQ1YzM0ZDU4YWYxNzI3ZDZmY2EyZGEwN2E5OTM2Yjk2OGVmZDc1NDNkZWU2N0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Cenacle Group\", color: \"yellow\", code: \"Yzg1YTQzMzJjZmYxMmJmNzVjMTA5MTFmYWQwY2M0YmMxOWMxZTg0NjNjZTg1Njk0NWNlZjA0ODIwMzU5OTYxZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Gymea Catholic Men\", color: \"yellow\", code: \"Y2FjZDUwMTEzMTQyOWQ5MWMzMWQzOWE4NjkwNmVkMDc2ZGY1NTBlZjA0NzNmZWQ4MWIwYmEyZjU4MDc1MjFmMEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Legion of Mary\", color: \"yellow\", code: \"ZjhhN2RiY2NkZGFmZjliYzJkYWY1MTg4ZjMyM2MwMDJkMzA4Nzk1NjRjMGM5NGE2NGRmYTAyMGVjOGM2NjA2M0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Vinnies\", color: \"yellow\", code: \"YzMxMjIzOTdiYzVjODE3NWZlN2QyMTRlMTU2YjJhNDMzZGUyOGMwYmJhODk2ZGYzMTUwYmVmMjY5NTlkNTAzN0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" },\n { title: \"Young Adults\", color: \"yellow\", code: \"M2E0YTIyMWRhMzI2YmVkOTcyYjRkNmFkYmNhYzdiMzI4YmU4NDk3MmRhYzNlMjkwMWMxNGQ3NTg4YzI2YzEwMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t\" }\n];\n\n\/\/ Save the first three items\nvar firstItems = calendarURLs.slice(0, 4);\n\n\/\/ Sort the rest of the items alphabetically\nvar restSorted = calendarURLs.slice(4).sort((a, b) => a.title.localeCompare(b.title));\n\n\/\/ Concatenate the first three items and the sorted rest\ncalendarURLs = firstItems.concat(restSorted);\n\n\n \n var activeButton = null; \/\/ Declare activeButton outside to have a global scope\n\n\n \/\/ Function to create buttons and dropdown options\nfunction createControls() {\n var buttonContainer = document.getElementById('button-container');\n var select = document.getElementById('calendar-select');\n\n \/\/ Add options and buttons for each calendar first\n calendarURLs.forEach(function(calendar) {\n var button = document.createElement('button');\n var option = document.createElement('option');\n\n button.textContent = calendar.title;\n button.setAttribute('data-title', calendar.title);\n button.onclick = function() {\n changeCalendarFrame(calendar.code, calendar.title);\n select.value = calendar.code; \/\/ Synchronize dropdown with the button pressed\n highlightButton(button); \/\/ Call highlightButton to activate the clicked button\n\n };\n\n option.value = calendar.code;\n option.textContent = calendar.title;\n\n buttonContainer.appendChild(button);\n select.appendChild(option);\n });\n\n \/\/ Then, add the \"All\" button and option last\n var allButton = document.createElement('button');\n allButton.textContent = 'ALL EVENTS';\n allButton.onclick = function() {\n showAllCalendars();\n select.value = 'ALL EVENTS'; \/\/ Synchronize dropdown with the \"ALL EVENTS\" button\n highlightButton(allButton); \/\/ Call highlightButton to activate the \"All\" button\n\n };\n buttonContainer.appendChild(allButton); \/\/ This adds the \"All\" button at the end of the button list\n\n var allOption = document.createElement('option');\n allOption.value = 'ALL EVENTS';\n allOption.textContent = 'All Calendars';\n select.appendChild(allOption); \/\/ This adds the \"All\" option at the end of the dropdown list\n\n \/\/ Attach onchange event to dropdown\n select.onchange = function() {\n var selectedCode = this.value;\n var selectedCalendar = calendarURLs.find(calendar => calendar.code === selectedCode);\n if (selectedCalendar) {\n changeCalendarFrame(selectedCalendar.code, selectedCalendar.title);\n } else if (selectedCode === 'all') {\n showAllCalendars();\n }\n };\n}\n\n \/\/ Function to highlight the active button and clear previous highlights\n function highlightButton(newActiveButton) {\n if (activeButton) {\n activeButton.classList.remove('active-button'); \/\/ Remove active class from previously active button\n }\n newActiveButton.classList.add('active-button'); \/\/ Add active class to the new active button\n activeButton = newActiveButton; \/\/ Update the reference to the current active button\n }\n\n\n\n\nfunction changeCalendarFrame(code, title) {\n var iframe = document.getElementById('calendar-iframe');\n var selectedCalendarHeader = document.getElementById('selected-calendar-header');\n var currentCalendarName = document.getElementById('current-calendar-name');\n \n iframe.src = \"https:\/\/calendar.google.com\/calendar\/embed?src=\" + code + \"&showTitle=0\";\n document.getElementById('calendar-title').textContent = title;\n document.getElementById('calendar-title-large-screen').textContent = title;\n\n \/\/ Update the selected calendar header text based on the selected calendar\n currentCalendarName.textContent = title;\n selectedCalendarHeader.style.display = 'block'; \/\/ Ensure the header is visible\n}\n\nfunction showAllCalendars() {\n var iframe = document.getElementById('calendar-iframe');\n var selectedCalendarHeader = document.getElementById('selected-calendar-header');\n var currentCalendarName = document.getElementById('current-calendar-name');\n\n \/\/ Base calendar URL with the first calendar included\n var combinedURL = \"https:\/\/calendar.google.com\/calendar\/embed?showTitle=0&src=\" + calendarURLs[0].code;\n calendarURLs.slice(1).forEach(function(calendar) {\n combinedURL += \"&src=\" + calendar.code;\n });\n\n console.log(combinedURL); \/\/ Check to ensure the URL is correct\n iframe.src = combinedURL;\n document.getElementById('calendar-title').textContent = \"ALL EVENTS\";\n document.getElementById('calendar-title-large-screen').textContent = \"ALL EVENTS\";\n\n \/\/ Update the selected calendar header for \"All Calendars\"\n currentCalendarName.textContent = \"All Calendars\";\n selectedCalendarHeader.style.display = 'block';\n}\n\n\n\n\/\/ Initial setup of controls and default display\nwindow.onload = function() {\n createControls();\n var firstButton = document.querySelector('#button-container button');\n highlightButton(firstButton); \/\/ Highlight the first button by default\n changeCalendarFrame(calendarURLs[0].code, calendarURLs[0].title);\n};\n\n <\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\">Want to book or update an event? Fill out this <a href=\"https:\/\/form.jotform.com\/241080959821056\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>form<\/strong><\/a> or email office@stcaths.org.au<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Check out our new Parish Calendar to keep up to date with our latest events! Embedded Google Calendar Current Calendar Displayed: Default Calendar Title Want to book or update an event? Fill out this form or email office@stcaths.org.au<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"custom_full_width.php","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/pages\/8531"}],"collection":[{"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/comments?post=8531"}],"version-history":[{"count":5,"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/pages\/8531\/revisions"}],"predecessor-version":[{"id":8648,"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/pages\/8531\/revisions\/8648"}],"wp:attachment":[{"href":"https:\/\/stcaths.org.au\/wp-json\/wp\/v2\/media?parent=8531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}