{"id":4042,"date":"2025-01-21T04:06:15","date_gmt":"2025-01-21T04:06:15","guid":{"rendered":"https:\/\/mpqua.upsi.edu.my\/index.php\/acara\/"},"modified":"2025-01-21T08:46:02","modified_gmt":"2025-01-21T08:46:02","slug":"acara","status":"publish","type":"page","link":"https:\/\/mpqua.upsi.edu.my\/index.php\/acara\/?lang=ms","title":{"rendered":"ACARA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4042\" class=\"elementor elementor-4042 elementor-3886\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b9fd78 e-grid e-con-boxed e-con e-parent\" data-id=\"8b9fd78\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7d7eda elementor-widget elementor-widget-html\" data-id=\"e7d7eda\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Link Swiper's CSS -->\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\">\n\n<div class=\"swiper-container\">\n  <div class=\"swiper-wrapper\">\n      \n    <div class=\"swiper-slide\" data-content=\"content-1\" style=\"\">\n      <!-- Tab 1 Slide -->\n        <h3 id=\"month-name\" style=\"padding-top:25px\">ACARA<\/h3>\n        <h5 id=\"month-desc\"><\/h5>\n    <\/div>\n  <\/div>\n<\/div>\n\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<div class=\"elementor-element elementor-element-a18aa2d e-flex e-con-boxed e-con e-parent\" data-id=\"a18aa2d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a085b87 elementor-widget elementor-widget-html\" data-id=\"a085b87\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Include the necessary libraries -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.js\"><\/script>\n\n  <!-- Add custom styles for the loader -->\n  <style>\n    \/* Fullscreen dimmed background *\/\n    #loading-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5); \/* Dimmed effect *\/\n      z-index: 9998;\n      display: none; \/* Initially hidden *\/\n    }\n    \/* Centered spinner *\/\n    #loading {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 9999;\n      text-align: center;\n    }\n    #loading img {\n      width: 100px;\n    }\n    #loading span {\n      font-size: 18px;\n      margin-top: 10px;\n      color: white;\n      display: block;\n    }\n  <\/style>\n  \n  <!-- Loading Overlay with Spinner -->\n  <div id=\"loading-overlay\">\n    <div id=\"loading\">\n      <img decoding=\"async\" src=\"https:\/\/i.gifer.com\/ZZ5H.gif\" alt=\"Memuatkan...\">\n      <span>Memuatkan, sila tunggu...<\/span>\n    <\/div>\n  <\/div>\n<!-- Content area below the slider -->\n<div id=\"content-area\">\n   <div class=\"eventWrapper\"><\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    \n     \/\/ Show the loading overlay and spinner\n      $('#loading-overlay').show();\n\n    const url = 'https:\/\/script.google.com\/macros\/s\/AKfycbyzSiyDoAC1xMTk9Ul2nMYTpiiLzqPitw4x_M_LaAInxm2kzz0slGj42ugFTJqWeGsk\/exec'; \/\/ Replace with your Apps Script URL\n\n    \/\/ Fetch data from the Google Sheets API\n    fetch(url)\n        .then(response => response.json())\n        .then(data => {\n            const contentArea = document.getElementById(\"content-area\");\n            const eventWrapper = contentArea.querySelector(\".eventWrapper\");\n\n            \/\/ Clear existing events (if any)\n            eventWrapper.innerHTML = '';\n\n            \/\/ Loop through each event and dynamically create the HTML\n            data.forEach(event => {\n                const eventDiv = document.createElement(\"div\");\n                eventDiv.classList.add(\"event\");\n\n                \/\/ Event Image\n\n                \/\/ Convert Google Drive link to direct link\n                let imageUrl = event.image || \"default-image.jpg\"; \/\/ Use a default image if missing\n                if (imageUrl.includes(\"drive.google.com\")) {\n                    const idMatch = imageUrl.match(\/id=([a-zA-Z0-9_-]+)\/); \/\/ Extract the file ID\n                    if (idMatch) {\n                        imageUrl = `https:\/\/drive.google.com\/uc?id=${idMatch[1]}`;\n                    }\n                }\n\n                const imgDiv = document.createElement(\"div\");\n                imgDiv.classList.add(\"event--img\");\n                const imgLink = document.createElement(\"a\");\n                imgLink.href = imageUrl || \"#\"; \/\/ Original link for the image\n                imgLink.classList.add(\"w-fancybox\"); \/\/ Fancybox class\n\n                const img = document.createElement(\"img\");\n                img.src = imageUrl; \/\/ Use the converted link\n                img.alt = \"Event Image\"; \/\/ Add an alt attribute for accessibility\n                imgLink.appendChild(img);\n                imgDiv.appendChild(imgLink);\n\n                \/\/ Event Date (formatted)\n                const dateDiv = document.createElement(\"div\");\n                dateDiv.classList.add(\"event--date\");\n\n                const date = new Date(event.date);\n                const monthNames = [\"JANUARI\", \"FEBRUARI\", \"MAC\", \"APRIL\", \"MEI\", \"JUN\", \"JULAI\", \"OGOS\", \"SEPTEMBER\", \"OKTOBER\", \"NOVEMBER\", \"DISEMBER\"];\n                const month = !isNaN(date.getMonth()) ? monthNames[date.getMonth()] : \"Invalid Date\";\n                const day = !isNaN(date.getDate()) ? date.getDate() : \"\";\n                const year = !isNaN(date.getFullYear()) ? date.getFullYear() : \"\";\n\n                const monthSpan = document.createElement(\"span\");\n                monthSpan.textContent = month;\n                dateDiv.appendChild(monthSpan);\n\n                const daySpan = document.createElement(\"span\");\n                daySpan.textContent = day;\n                dateDiv.appendChild(daySpan);\n\n                const yearSpan = document.createElement(\"span\");\n                yearSpan.textContent = year;\n                dateDiv.appendChild(yearSpan);\n                \n                const uniSpan = document.createElement(\"span\");\n                uniSpan.textContent = event.uni;\n                dateDiv.appendChild(uniSpan);\n                \n                \/\/ Event Content\n                const contentDiv = document.createElement(\"div\");\n                contentDiv.classList.add(\"event--content\");\n\n                const eventTitle = document.createElement(\"h2\");\n                const eventLink = document.createElement(\"a\");\n                eventLink.href = event.link || \"#\";\n                eventLink.textContent = event.title || \"Event Title Not Available\";\n                eventTitle.appendChild(eventLink);\n                contentDiv.appendChild(eventTitle);\n\n                const hallP = document.createElement(\"p\");\n                hallP.classList.add(\"event--content-hall\");\n                hallP.textContent = event.hall || \"Location not available\";\n                contentDiv.appendChild(hallP);\n\n                const contactP = document.createElement(\"p\");\n                contactP.classList.add(\"event--content-contact\");\n                contactP.textContent = \"Contact:\";\n                contentDiv.appendChild(contactP);\n\n                const contactList = document.createElement(\"ul\");\n                const contactListItem = document.createElement(\"li\");\n                contactListItem.style.cssText = \"font-size: 1em; margin-bottom: 10px; padding: 10px; border-radius: 5px; background-color: #f5f5f5;\";\n\n                const contactStrong = document.createElement(\"strong\");\n                contactStrong.textContent = event.contact || \"N\/A\";\n                contactListItem.appendChild(contactStrong);\n\n                if (event.phone) {\n                    const contactSpan = document.createElement(\"span\");\n                    contactSpan.style.cssText = \"font-size: 1em; color: #555;\";\n                    contactSpan.innerHTML = ` <br>${event.phone}`;\n                    contactListItem.appendChild(contactSpan);\n                }\n\n                contactList.appendChild(contactListItem);\n                contentDiv.appendChild(contactList);\n\n                \/\/ Join Button\n                const joinButton = document.createElement(\"a\");\n                joinButton.href = event.link || \"#\";\n                joinButton.classList.add(\"event--content-link\");\n                joinButton.style.cssText = \"display: inline-block; padding: 10px 20px; background-color: rgb(0 140 255); color: white; width: 150px; border-radius: 5px; text-decoration: none; margin-top: 15px;\";\n                joinButton.textContent = \"More Info >>\";\n                contentDiv.appendChild(joinButton);\n\n                \/\/ Append elements to the event wrapper\n                eventDiv.appendChild(imgDiv);\n                eventDiv.appendChild(dateDiv);\n                eventDiv.appendChild(contentDiv);\n                eventWrapper.appendChild(eventDiv);\n            });\n\n\n            \/\/ Initialize Fancybox after adding all content\n            $(\".w-fancybox\").fancybox();\n            \n            \/\/ Hide the loading overlay and spinner after data is loaded\n        $('#loading-overlay').hide();\n        })\n        .catch(error => console.error('Error fetching data: ', error));\n});\n<\/script>\n\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>ACARA Memuatkan, sila tunggu&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4042","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/pages\/4042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/comments?post=4042"}],"version-history":[{"count":3,"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/pages\/4042\/revisions"}],"predecessor-version":[{"id":4045,"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/pages\/4042\/revisions\/4045"}],"wp:attachment":[{"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/media?parent=4042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}