{"id":14969,"date":"2026-08-06T20:12:12","date_gmt":"2026-08-06T12:12:12","guid":{"rendered":"https:\/\/www.ukm.my\/alafukm\/?page_id=14969"},"modified":"2026-09-14T12:00:00","modified_gmt":"2026-09-14T04:00:00","slug":"tempahan-ruang-gunasama","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/alafukm\/tempahan-ruang-gunasama\/","title":{"rendered":"Tempahan Ruang Gunasama"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14969\" class=\"elementor elementor-14969\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c87b31 e-con-full e-flex e-con e-parent\" data-id=\"8c87b31\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-c72ad2d e-con-full e-flex e-con e-child\" data-id=\"c72ad2d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<section class=\"elementor-element elementor-element-0d7d503 e-con-full e-flex e-con e-child\" data-id=\"0d7d503\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ef3865 elementor-widget elementor-widget-heading\" data-id=\"9ef3865\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Tempahan Bilik Gunasama<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-079b15e e-con-full e-flex e-con e-parent\" data-id=\"079b15e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5eadff elementor-widget__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"f5eadff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div class=\"alaf-dashboard-wrapper\">\n        <div class=\"alaf-tabs-container\">\n            <ul id=\"alaf-room-tabs\" class=\"alaf-room-tabs\">\n                                    <li data-room-id=\"1\" \n                        data-room-location=\"Aras 2, Kompleks Penyelidikan UKM\" \n                        class=\"active\">\n                        Bilik Mesyuarat                    <\/li>\n                            <\/ul>\n        <\/div>\n\n        <div class=\"alaf-flex-layout\">\n            <div class=\"alaf-calendar-panel\">\n                <div class=\"alaf-card shadow-sm\">\n                    <div id=\"alaf-calendar\"><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"alaf-sidebar-panel\">\n                <div class=\"alaf-card sidebar-card shadow-sm\">\n                    <div class=\"sidebar-header\">\n                        <div class=\"header-main\">\n                            <h2 id=\"sd-date\">Pilih Tarikh<\/h2>\n                        <\/div>\n                        <div class=\"room-info-pill-group\">\n                            <p id=\"sd-room\" class=\"room-subtitle\">Sila klik pada tarikh<\/p>\n                            <p id=\"sd-location\" class=\"room-location-subtitle\" style=\"display: none;\">\n                                <span class=\"dashicons dashicons-location\"><\/span>\n                                <span id=\"sd-location-text\"><\/span>\n                            <\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div id=\"sd-list\" class=\"booking-list-container\">\n                        <div class=\"empty-state\">\n                            <p>Klik pada mana-mana tarikh di kalendar untuk melihat perincian tempahan.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"alaf-card action-card-separated shadow-sm\">\n                    <div class=\"action-card-header\">\n                        <div class=\"action-icon-box\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path d=\"M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z\" stroke=\"#2563eb\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                                <path d=\"M15.7 13.7H15.71M15.7 16.7H15.71M12 13.7H12.01M12 16.7H12.01M8.3 13.7H8.31M8.3 16.7H8.31\" stroke=\"#2563eb\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"action-text-box\">\n                            <h3>Buat Tempahan<\/h3>\n                            <p>Klik pada butang di bawah untuk membuat tempahan<\/p>\n                        <\/div>\n                    <\/div>\n                    <a href=\"#\" id=\"btn-dynamic-book\" class=\"btn-book-now\">\n                        Tempah Sekarang\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <script>\n\n    document.addEventListener('DOMContentLoaded', function () {\n        const calendarEl = document.getElementById('alaf-calendar');\n        const roomTabs = document.querySelectorAll('#alaf-room-tabs li');\n        const sdDate = document.getElementById('sd-date');\n        const sdRoom = document.getElementById('sd-room');\n        const sdList = document.getElementById('sd-list');\n        const btnBook = document.getElementById('btn-dynamic-book');\n        const baseBookingUrl = \"https:\/\/www.ukm.my\/alafukm\/borang-tempahan-bilik\/\";\n\n        if (!calendarEl) return;\n\n        let activeRoomId = roomTabs.length > 0 ? roomTabs[0].dataset.roomId : 0;\n        let calendar;\n\n        function updateBookingButton(roomId) {\n            btnBook.href = `${baseBookingUrl}?room_id=${roomId}`;\n        }\n\n        updateBookingButton(activeRoomId);\n\n        calendar = new FullCalendar.Calendar(calendarEl, {\n        initialView: 'dayGridMonth',\n        locale: 'ms',\n        height: 'auto',             \/* Paksa kalendar mengikut ketinggian kandungan *\/\n        contentHeight: 'auto',\n        dayMaxEventRows: 3,          \/* Maksimum 3 acara sepersatu petak, selebihnya jadi '+x lagi' *\/\n        headerToolbar: { \n            left: 'prev,next today', \n            center: 'title', \n            right: 'dayGridMonth,timeGridWeek,timeGridDay' \n        },\n        buttonText: { month: 'Bulan', week: 'Minggu', day: 'Hari', today: 'Hari Ini' },\n        slotMinTime: '08:00:00',\n        slotMaxTime: '19:00:00',\n        eventDisplay: 'block',\n        eventTimeFormat: { hour: 'numeric', minute: '2-digit', meridiem: 'short', hour12: true },\n        events: function(info, successCallback, failureCallback) {\n            fetch(`https:\/\/www.ukm.my\/alafukm\/wp-admin\/admin-ajax.php?action=alaf_get_bookings&room_id=${activeRoomId}`)\n                .then(res => res.json())\n                .then(data => successCallback(data))\n                .catch(err => failureCallback(err));\n        },\n        dateClick: function(info) {\n            const dateStr = info.dateStr.split('T')[0];\n            document.querySelectorAll('#alaf-calendar .fc-daygrid-day').forEach(el => el.classList.remove('alaf-selected-day'));\n            info.dayEl.classList.add('alaf-selected-day');\n            updateSidebar(dateStr);\n        },  \n        eventClick: function(info) {\n            const dateStr = info.event.startStr.split('T')[0];\n            document.querySelectorAll('#alaf-calendar .fc-daygrid-day').forEach(el => el.classList.remove('alaf-selected-day'));\n            const dayEl = document.querySelector(`#alaf-calendar .fc-daygrid-day[data-date=\"${dateStr}\"]`);\n            if (dayEl) dayEl.classList.add('alaf-selected-day');\n            updateSidebar(dateStr);\n        }\n    });\n\n        calendar.render();\n\n        roomTabs.forEach(tab => {\n            tab.addEventListener('click', function() {\n                roomTabs.forEach(t => t.classList.remove('active'));\n                this.classList.add('active');\n                activeRoomId = this.dataset.roomId;\n                updateBookingButton(activeRoomId);\n                calendar.refetchEvents();\n                \n                \/\/ Reset sidebar state\n                sdDate.textContent = 'Pilih Tarikh';\n                sdRoom.textContent = 'Sila klik pada tarikh';\n                document.getElementById('sd-location').style.display = 'none';\n                sdList.innerHTML = '<div class=\"empty-state\"><p>Sila pilih tarikh untuk bilik ini.<\/p><\/div>';\n            });\n        });\n\n        function updateSidebar(dateStr) {\n            const dateObj = new Date(dateStr);\n            sdDate.textContent = dateObj.toLocaleDateString('ms-MY', { weekday: 'long', day: 'numeric', month: 'long' });\n            \n            \/\/ Semak dan paparkan lokasi hanya jika ada data sah\n            const activeTab = document.querySelector('#alaf-room-tabs li.active');\n            const locPill = document.getElementById('sd-location');\n            const locTextEl = document.getElementById('sd-location-text');\n\n            if (activeTab) {\n                sdRoom.textContent = activeTab.textContent.trim();\n                const locText = activeTab.dataset.roomLocation ? activeTab.dataset.roomLocation.trim() : '';\n\n                if (locText && locText !== '-' && locText !== 'null') {\n                    locTextEl.textContent = locText;\n                    if (locPill) locPill.style.display = 'inline-flex';\n                } else {\n                    if (locPill) locPill.style.display = 'none';\n                }\n            }\n\n            const events = calendar.getEvents().filter(e => e.startStr.startsWith(dateStr));\n            if (events.length === 0) {\n                sdList.innerHTML = `\n                    <div class=\"empty-state\">\n                        <span class=\"dashicons dashicons-calendar-alt\"><\/span>\n                        <p>Tiada tempahan pada tarikh ini.<\/p>\n                    <\/div>`;\n                return;\n            }\n            sdList.innerHTML = '';\n            events.forEach(ev => {\n                const props = ev.extendedProps;\n                const timeStart = ev.start.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true }).toUpperCase();\n                const timeEnd = ev.end ? ev.end.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true }).toUpperCase() : '';\n\n                sdList.innerHTML += `\n                    <div class=\"booking-card\">\n                        <div class=\"booking-time-badge\">\n                            <span class=\"dashicons dashicons-clock\"><\/span>\n                            <span>${timeStart} \u2013 ${timeEnd}<\/span>\n                        <\/div>\n                        <div class=\"booking-details\">\n                            <h4 class=\"booking-title\">${ev.title}<\/h4>\n                            <p class=\"booking-staff\">\n                                <span class=\"dashicons dashicons-admin-users\"><\/span> ${props.staff}\n                            <\/p>\n                        <\/div>\n                    <\/div>`;\n            });\n        }\n    });\n\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9f93020 e-flex e-con-boxed e-con e-parent\" data-id=\"9f93020\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c14af36 e-con-full e-flex e-con e-child\" data-id=\"c14af36\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04f6873 elementor-widget elementor-widget-heading\" data-id=\"04f6873\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Galeri Gambar Bilik Mesyuarat <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bce0d13 gallery-spacing-custom elementor-widget elementor-widget-image-gallery\" data-id=\"bce0d13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-gallery\">\n\t\t\t<div id='gallery-1' class='gallery galleryid-14969 gallery-columns-3 gallery-size-awsm_team'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"bce0d13\" data-elementor-lightbox-title=\"mesy3\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU1MDksInVybCI6Imh0dHBzOlwvXC93d3cudWttLm15XC9hbGFmdWttXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8wOVwvbWVzeTMuanBlZyIsInNsaWRlc2hvdyI6ImJjZTBkMTMifQ%3D%3D\" href='https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy3.jpeg'><img fetchpriority=\"high\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy3-500x500.jpeg\" class=\"attachment-awsm_team size-awsm_team\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"bce0d13\" data-elementor-lightbox-title=\"mesy5\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU1MTEsInVybCI6Imh0dHBzOlwvXC93d3cudWttLm15XC9hbGFmdWttXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8wOVwvbWVzeTUuanBlZyIsInNsaWRlc2hvdyI6ImJjZTBkMTMifQ%3D%3D\" href='https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy5.jpeg'><img decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy5-500x500.jpeg\" class=\"attachment-awsm_team size-awsm_team\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"bce0d13\" data-elementor-lightbox-title=\"mesy4\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU1MTAsInVybCI6Imh0dHBzOlwvXC93d3cudWttLm15XC9hbGFmdWttXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8wOVwvbWVzeTQuanBlZyIsInNsaWRlc2hvdyI6ImJjZTBkMTMifQ%3D%3D\" href='https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy4.jpeg'><img decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy4-500x500.jpeg\" class=\"attachment-awsm_team size-awsm_team\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"bce0d13\" data-elementor-lightbox-title=\"mesy1\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU1MDcsInVybCI6Imh0dHBzOlwvXC93d3cudWttLm15XC9hbGFmdWttXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8wOVwvbWVzeTEuanBlZyIsInNsaWRlc2hvdyI6ImJjZTBkMTMifQ%3D%3D\" href='https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy1.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy1-500x500.jpeg\" class=\"attachment-awsm_team size-awsm_team\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"bce0d13\" data-elementor-lightbox-title=\"mesy2\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU1MDgsInVybCI6Imh0dHBzOlwvXC93d3cudWttLm15XC9hbGFmdWttXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8wOVwvbWVzeTIuanBlZyIsInNsaWRlc2hvdyI6ImJjZTBkMTMifQ%3D%3D\" href='https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy2.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/www.ukm.my\/alafukm\/wp-content\/uploads\/2026\/09\/mesy2-500x500.jpeg\" class=\"attachment-awsm_team size-awsm_team\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\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<\/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>Tempahan Bilik Gunasama Galeri Gambar Bilik Mesyuarat<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"cybocfi_hide_featured_image":"","footnotes":""},"class_list":["post-14969","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/alafukm\/wp-json\/wp\/v2\/pages\/14969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/alafukm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/alafukm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/alafukm\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/alafukm\/wp-json\/wp\/v2\/comments?post=14969"}],"version-history":[{"count":19,"href":"https:\/\/www.ukm.my\/alafukm\/wp-json\/wp\/v2\/pages\/14969\/revisions"}],"predecessor-version":[{"id":15514,"href":"https:\/\/www.ukm.my\/alafukm\/wp-json\/wp\/v2\/pages\/14969\/revisions\/15514"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/alafukm\/wp-json\/wp\/v2\/media?parent=14969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}