{"id":21430,"date":"2025-08-26T15:52:02","date_gmt":"2025-08-26T08:52:02","guid":{"rendered":"https:\/\/bba.rmutsv.ac.th\/ruts\/?page_id=21430"},"modified":"2025-09-04T12:55:28","modified_gmt":"2025-09-04T05:55:28","slug":"ap","status":"publish","type":"page","link":"https:\/\/bba.rmutsv.ac.th\/ruts\/ap\/","title":{"rendered":"\u0e1b\u0e0e\u0e34\u0e17\u0e34\u0e19\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\/\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23"},"content":{"rendered":"<div class=\"gb-container gb-container-354becbc\">\n<div class=\"gb-container gb-container-2df033f0\">\n<div class=\"gb-container gb-container-c51fa2aa\">\n<div class=\"gb-container gb-container-8f18cafe\">\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');\n\n\/* Reset \u0e41\u0e25\u0e30 Base Styles *\/\n.wp-calendar-container * {\n    box-sizing: border-box;\n}\n\n.wp-calendar-container {\n    font-family: 'Sarabun', sans-serif;\n    width: 100%;\n    max-width: 100%;\n    margin: 0;\n    padding: 0;\n    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);\n    min-height: 80vh;\n    overflow-x: hidden;\n}\n\n\/* Header Styles *\/\n.wp-header {\n    background: white;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    border-bottom: 4px solid #2563eb;\n    border-radius: 12px;\n    margin-bottom: 2rem;\n    padding: 1.5rem;\n}\n\n.wp-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 1rem;\n}\n\n.wp-logo {\n    width: 48px;\n    height: 48px;\n    background: #2563eb;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n}\n\n.wp-title h1 {\n    font-size: 1.5rem;\n    font-weight: bold;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n}\n\n.wp-title p {\n    color: #6b7280;\n    margin: 0;\n    font-size: 0.875rem;\n}\n\n.wp-sync-btn {\n    background: #7c3aed;\n    color: white;\n    padding: 0.5rem 1rem;\n    border-radius: 8px;\n    border: none;\n    cursor: pointer;\n    font-size: 0.875rem;\n    transition: background-color 0.2s;\n}\n\n.wp-sync-btn:hover {\n    background: #6d28d9;\n}\n\n\/* Main Grid *\/\n.wp-main-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 2rem;\n    padding: 0 1rem;\n}\n\n@media (min-width: 1024px) {\n    .wp-main-grid {\n        grid-template-columns: 2fr 1fr;\n        padding: 0;\n    }\n}\n\n\/* Calendar Section *\/\n.wp-calendar-section {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    padding: 1.5rem;\n}\n\n.wp-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 1.5rem;\n    flex-wrap: wrap;\n    gap: 1rem;\n}\n\n.wp-calendar-nav {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n}\n\n.wp-nav-btn {\n    padding: 0.5rem;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-radius: 8px;\n    transition: background-color 0.2s;\n}\n\n.wp-nav-btn:hover {\n    background: #f3f4f6;\n}\n\n\/* Calendar Grid *\/\n.wp-calendar-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 1px;\n    margin-bottom: 1rem;\n}\n\n.wp-day-header {\n    text-align: center;\n    font-weight: 600;\n    color: #6b7280;\n    padding: 0.5rem;\n    font-size: 0.875rem;\n}\n\n.wp-calendar-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 1px;\n    background: #e5e7eb;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.wp-calendar-day {\n    background: white;\n    padding: 0.5rem;\n    min-height: 80px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    position: relative;\n}\n\n.wp-calendar-day:hover {\n    background: #eff6ff;\n    transform: scale(1.02);\n}\n\n.wp-calendar-day.today {\n    background: #dbeafe;\n    border: 2px solid #3b82f6;\n}\n\n.wp-calendar-day.other-month {\n    background: #f9fafb;\n    color: #9ca3af;\n}\n\n.wp-event-item {\n    font-size: 0.75rem;\n    background: #3b82f6;\n    color: white;\n    padding: 0.125rem 0.25rem;\n    border-radius: 4px;\n    margin-top: 0.25rem;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.wp-event-item:hover {\n    background: #2563eb;\n}\n\n\/* Statistics *\/\n.wp-stats-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 1rem;\n    margin-top: 1.5rem;\n}\n\n.wp-stat-card {\n    background: white;\n    border-radius: 8px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    padding: 1rem;\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n}\n\n.wp-stat-icon {\n    padding: 0.5rem;\n    border-radius: 8px;\n    font-size: 1.25rem;\n}\n\n.wp-stat-icon.blue { background: #dbeafe; }\n.wp-stat-icon.green { background: #dcfce7; }\n.wp-stat-icon.orange { background: #fed7aa; }\n\n.wp-stat-number {\n    font-size: 1.5rem;\n    font-weight: bold;\n    color: #1f2937;\n    margin: 0;\n}\n\n.wp-stat-label {\n    font-size: 0.875rem;\n    color: #6b7280;\n    margin: 0;\n}\n\n\/* Events List *\/\n.wp-events-section {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    padding: 1.5rem;\n}\n\n.wp-events-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 1.5rem;\n    flex-wrap: wrap;\n    gap: 1rem;\n}\n\n.wp-filter-buttons {\n    display: flex;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n}\n\n.wp-filter-btn {\n    padding: 0.25rem 0.75rem;\n    font-size: 0.875rem;\n    border-radius: 8px;\n    border: none;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.wp-filter-btn.active {\n    background: #2563eb;\n    color: white;\n}\n\n.wp-filter-btn:not(.active) {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.wp-filter-btn:not(.active):hover {\n    background: #d1d5db;\n}\n\n.wp-events-list {\n    max-height: 400px;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.wp-event-card {\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    padding: 1rem;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.wp-event-card:hover {\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    transform: translateY(-1px);\n}\n\n.wp-event-card.today {\n    border-color: #3b82f6;\n    background: #eff6ff;\n}\n\n.wp-event-title {\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n}\n\n.wp-event-date {\n    font-size: 0.875rem;\n    color: #6b7280;\n    margin: 0 0 0.5rem 0;\n}\n\n.wp-event-description {\n    font-size: 0.875rem;\n    color: #6b7280;\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n\/* Modal *\/\n.wp-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: none;\n    align-items: center;\n    justify-content: center;\n    z-index: 9999;\n    padding: 1rem;\n}\n\n.wp-modal.show {\n    display: flex;\n}\n\n.wp-modal-content {\n    background: white;\n    border-radius: 12px;\n    padding: 2rem;\n    max-width: 500px;\n    width: 100%;\n    max-height: 80vh;\n    overflow-y: auto;\n}\n\n.wp-modal-title {\n    font-size: 1.5rem;\n    font-weight: bold;\n    color: #1f2937;\n    margin: 0 0 1.5rem 0;\n    text-align: center;\n}\n\n.wp-modal-close {\n    background: #6b7280;\n    color: white;\n    border: none;\n    padding: 0.75rem 1.5rem;\n    border-radius: 8px;\n    cursor: pointer;\n    width: 100%;\n    margin-top: 1.5rem;\n    transition: background-color 0.2s;\n}\n\n.wp-modal-close:hover {\n    background: #4b5563;\n}\n\n\/* Responsive *\/\n@media (max-width: 768px) {\n    .wp-calendar-container {\n        padding: 0.5rem;\n    }\n    \n    .wp-header {\n        padding: 1rem;\n    }\n    \n    .wp-header-content {\n        flex-direction: column;\n        text-align: center;\n    }\n    \n    .wp-calendar-day {\n        min-height: 60px;\n        padding: 0.25rem;\n    }\n    \n    .wp-main-grid {\n        gap: 1rem;\n    }\n    \n    .wp-stats-grid {\n        grid-template-columns: 1fr;\n    }\n}\n\n\/* Loading Animation *\/\n.wp-loading {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    border: 3px solid #f3f3f3;\n    border-top: 3px solid #3498db;\n    border-radius: 50%;\n    animation: wp-spin 1s linear infinite;\n}\n\n@keyframes wp-spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n<\/style>\n\n<div class=\"wp-calendar-container\">\n    <!-- Header -->\n    <header class=\"wp-header\">\n        <div class=\"wp-header-content\">\n            <div style=\"display: flex; align-items: center; gap: 1rem;\">\n                <div class=\"wp-logo\">\ud83d\udcc5<\/div>\n                <div class=\"wp-title\">\n                    <h1>\u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\/\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/h1>\n                    <p>\u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e23\u0e32\u0e0a\u0e21\u0e07\u0e04\u0e25\u0e28\u0e23\u0e35\u0e27\u0e34\u0e0a\u0e31\u0e22<\/p>\n                <\/div>\n            <\/div>\n            <div style=\"display: flex; align-items: center; gap: 1rem;\">\n                <button onclick=\"wpSyncData()\" class=\"wp-sync-btn\">\n                    \ud83d\udd04 \u0e0b\u0e34\u0e07\u0e04\u0e4c\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\n                <\/button>\n                <div style=\"font-size: 0.875rem; color: #6b7280;\">\n                    \ud83d\udcca \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 Google Sheets\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- Main Content -->\n    <div class=\"wp-main-grid\">\n        <!-- Calendar Section -->\n        <div class=\"wp-calendar-section\">\n            <div class=\"wp-calendar-header\">\n                <h2 style=\"font-size: 1.25rem; font-weight: bold; color: #1f2937; margin: 0;\">\u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19<\/h2>\n                <div class=\"wp-calendar-nav\">\n                    <button onclick=\"wpPreviousMonth()\" class=\"wp-nav-btn\">\u2190<\/button>\n                    <span id=\"wpCurrentMonth\" style=\"font-weight: 600; font-size: 1.125rem; color: #1f2937;\"><\/span>\n                    <button onclick=\"wpNextMonth()\" class=\"wp-nav-btn\">\u2192<\/button>\n                <\/div>\n            <\/div>\n            \n            <!-- Calendar Grid -->\n            <div class=\"wp-calendar-days\">\n                <div class=\"wp-day-header\">\u0e2d\u0e32<\/div>\n                <div class=\"wp-day-header\">\u0e08<\/div>\n                <div class=\"wp-day-header\">\u0e2d<\/div>\n                <div class=\"wp-day-header\">\u0e1e<\/div>\n                <div class=\"wp-day-header\">\u0e1e\u0e24<\/div>\n                <div class=\"wp-day-header\">\u0e28<\/div>\n                <div class=\"wp-day-header\">\u0e2a<\/div>\n            <\/div>\n            <div id=\"wpCalendarGrid\" class=\"wp-calendar-grid\"><\/div>\n\n            <!-- Statistics -->\n            <div class=\"wp-stats-grid\">\n                <div class=\"wp-stat-card\">\n                    <div class=\"wp-stat-icon blue\">\ud83d\udcc5<\/div>\n                    <div>\n                        <p class=\"wp-stat-label\">\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\n                        <p id=\"wpTotalEvents\" class=\"wp-stat-number\">0<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"wp-stat-card\">\n                    <div class=\"wp-stat-icon green\">\ud83d\udcca<\/div>\n                    <div>\n                        <p class=\"wp-stat-label\">\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e19\u0e35\u0e49<\/p>\n                        <p id=\"wpThisMonthEvents\" class=\"wp-stat-number\">0<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"wp-stat-card\">\n                    <div class=\"wp-stat-icon orange\">\u23f0<\/div>\n                    <div>\n                        <p class=\"wp-stat-label\">\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49<\/p>\n                        <p id=\"wpTodayEvents\" class=\"wp-stat-number\">0<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Events List Section -->\n        <div class=\"wp-events-section\">\n            <div class=\"wp-events-header\">\n                <h2 style=\"font-size: 1.25rem; font-weight: bold; color: #1f2937; margin: 0;\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/h2>\n                <div class=\"wp-filter-buttons\">\n                    <button onclick=\"wpFilterEvents('all')\" id=\"wpFilterAll\" class=\"wp-filter-btn active\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\n                    <button onclick=\"wpFilterEvents('today')\" id=\"wpFilterToday\" class=\"wp-filter-btn\">\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49<\/button>\n                    <button onclick=\"wpFilterEvents('upcoming')\" id=\"wpFilterUpcoming\" class=\"wp-filter-btn\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e21\u0e32<\/button>\n                <\/div>\n            <\/div>\n            <div id=\"wpEventsList\" class=\"wp-events-list\">\n                <!-- Events will be populated here -->\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Event Detail Modal -->\n<div id=\"wpEventModal\" class=\"wp-modal\">\n    <div class=\"wp-modal-content\">\n        <h3 class=\"wp-modal-title\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/h3>\n        <div id=\"wpEventModalContent\">\n            <!-- Event details will be populated here -->\n        <\/div>\n        <button onclick=\"wpHideEventModal()\" class=\"wp-modal-close\">\u0e1b\u0e34\u0e14<\/button>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ WordPress Calendar App\n(function() {\n    \/\/ Configuration\n    const WP_CONFIG = {\n        SCRIPT_URL: 'https:\/\/script.google.com\/macros\/s\/AKfycbzqjdlqEjPE4cmVIP_ZZa4RnWs0nn9cMs6m8i9GW0dpenhpAhK0gnRhR4LPfxO67tWw\/exec'\n    };\n\n    \/\/ Global variables\n    let wpEvents = JSON.parse(localStorage.getItem('wp_events_cache') || '[]');\n    let wpCurrentDate = new Date();\n    let wpCurrentFilter = 'all';\n\n    \/\/ Sample data\n    if (wpEvents.length === 0) {\n        wpEvents = [\n            {\n                id: 1704067200,\n                title: '\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23',\n                date: '2024-01-15',\n                time: '09:00',\n                description: '\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e21\u0e01\u0e23\u0e32\u0e04\u0e21',\n                createdBy: 'somchai@rmutsv.ac.th'\n            },\n            {\n                id: 1704326400,\n                title: '\u0e07\u0e32\u0e19\u0e27\u0e31\u0e19\u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08',\n                date: '2024-01-18',\n                time: '08:00',\n                description: '\u0e07\u0e32\u0e19\u0e09\u0e25\u0e2d\u0e07\u0e27\u0e31\u0e19\u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2567',\n                createdBy: 'suda@rmutsv.ac.th'\n            },\n            {\n                id: 1704412800,\n                title: '\u0e2a\u0e31\u0e21\u0e21\u0e19\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 \"\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\"',\n                date: '2024-01-22',\n                time: '13:00',\n                description: '\u0e2a\u0e31\u0e21\u0e21\u0e19\u0e32\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e22\u0e38\u0e04\u0e43\u0e2b\u0e21\u0e48',\n                createdBy: 'wichai@rmutsv.ac.th'\n            }\n        ];\n        localStorage.setItem('wp_events_cache', JSON.stringify(wpEvents));\n    }\n\n    \/\/ Utility functions\n    function wpShowNotification(message, type = 'info') {\n        const notification = document.createElement('div');\n        notification.style.cssText = `\n            position: fixed;\n            top: 20px;\n            right: 20px;\n            padding: 1rem;\n            border-radius: 8px;\n            color: white;\n            z-index: 10000;\n            max-width: 300px;\n            font-family: 'Sarabun', sans-serif;\n            ${type === 'success' ? 'background: #10b981;' : \n              type === 'error' ? 'background: #ef4444;' : \n              type === 'warning' ? 'background: #f59e0b;' : \n              'background: #3b82f6;'}\n        `;\n        notification.textContent = message;\n        document.body.appendChild(notification);\n        \n        setTimeout(() => {\n            notification.remove();\n        }, 5000);\n    }\n\n    \/\/ Data loading\n    async function wpLoadDataFromScript() {\n        try {\n            const response = await fetch(WP_CONFIG.SCRIPT_URL + '?action=getEvents');\n            if (response.ok) {\n                const result = await response.json();\n                if (result.success && result.data) {\n                    wpEvents = result.data;\n                    localStorage.setItem('wp_events_cache', JSON.stringify(wpEvents));\n                    wpShowNotification('\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 Google Sheets \u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!', 'success');\n                    return true;\n                }\n            }\n        } catch (error) {\n            console.error('Error loading data:', error);\n            wpShowNotification('\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49 \u0e43\u0e0a\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e04\u0e0a\u0e41\u0e17\u0e19', 'warning');\n        }\n        return false;\n    }\n\n    \/\/ Calendar rendering\n    function wpRenderCalendar() {\n        const monthNames = [\n            '\u0e21\u0e01\u0e23\u0e32\u0e04\u0e21', '\u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c', '\u0e21\u0e35\u0e19\u0e32\u0e04\u0e21', '\u0e40\u0e21\u0e29\u0e32\u0e22\u0e19', '\u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21', '\u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19',\n            '\u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21', '\u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21', '\u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19', '\u0e15\u0e38\u0e25\u0e32\u0e04\u0e21', '\u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19', '\u0e18\u0e31\u0e19\u0e27\u0e32\u0e04\u0e21'\n        ];\n\n        document.getElementById('wpCurrentMonth').textContent = \n            `${monthNames[wpCurrentDate.getMonth()]} ${wpCurrentDate.getFullYear() + 543}`;\n\n        const firstDay = new Date(wpCurrentDate.getFullYear(), wpCurrentDate.getMonth(), 1);\n        const lastDay = new Date(wpCurrentDate.getFullYear(), wpCurrentDate.getMonth() + 1, 0);\n        const startDate = new Date(firstDay);\n        startDate.setDate(startDate.getDate() - firstDay.getDay());\n\n        const calendarGrid = document.getElementById('wpCalendarGrid');\n        calendarGrid.innerHTML = '';\n\n        for (let i = 0; i < 42; i++) {\n            const cellDate = new Date(startDate);\n            cellDate.setDate(startDate.getDate() + i);\n            \n            const dayEvents = wpEvents.filter(event => {\n                const eventDate = new Date(event.date);\n                return eventDate.toDateString() === cellDate.toDateString();\n            });\n\n            const isCurrentMonth = cellDate.getMonth() === wpCurrentDate.getMonth();\n            const isToday = cellDate.toDateString() === new Date().toDateString();\n\n            const dayElement = document.createElement('div');\n            dayElement.className = `wp-calendar-day ${\n                isCurrentMonth ? '' : 'other-month'\n            } ${isToday ? 'today' : ''}`;\n\n            dayElement.innerHTML = `\n                <div style=\"font-weight: 500; font-size: 0.875rem;\">${cellDate.getDate()}<\/div>\n                <div style=\"margin-top: 0.25rem;\">\n                    ${dayEvents.slice(0, 2).map(event => `\n                        <div class=\"wp-event-item\" onclick=\"wpShowEventDetail(${event.id})\">\n                            ${event.title}\n                        <\/div>\n                    `).join('')}\n                    ${dayEvents.length > 2 ? `<div style=\"font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;\">+${dayEvents.length - 2} \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<\/div>` : ''}\n                <\/div>\n            `;\n\n            calendarGrid.appendChild(dayElement);\n        }\n    }\n\n    \/\/ Events list rendering\n    function wpRenderEventsList() {\n        const eventsList = document.getElementById('wpEventsList');\n        let filteredEvents = [...wpEvents];\n        const today = new Date();\n\n        \/\/ Apply filter\n        switch (wpCurrentFilter) {\n            case 'today':\n                filteredEvents = wpEvents.filter(event => {\n                    const eventDate = new Date(event.date);\n                    return eventDate.toDateString() === today.toDateString();\n                });\n                break;\n            case 'upcoming':\n                filteredEvents = wpEvents.filter(event => {\n                    const eventDate = new Date(event.date);\n                    return eventDate >= today;\n                });\n                break;\n        }\n\n        const sortedEvents = filteredEvents.sort((a, b) => new Date(a.date) - new Date(b.date));\n        \n        if (sortedEvents.length === 0) {\n            eventsList.innerHTML = '<p style=\"text-align: center; color: #6b7280;\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e43\u0e19\u0e2b\u0e21\u0e27\u0e14\u0e19\u0e35\u0e49<\/p>';\n            return;\n        }\n\n        eventsList.innerHTML = sortedEvents.map(event => {\n            const eventDate = new Date(event.date);\n            const isToday = eventDate.toDateString() === today.toDateString();\n            \n            return `\n                <div class=\"wp-event-card ${isToday ? 'today' : ''}\" onclick=\"wpShowEventDetail(${event.id})\">\n                    <h3 class=\"wp-event-title\">${event.title}<\/h3>\n                    <p class=\"wp-event-date\">\n                        \ud83d\udcc5 ${eventDate.toLocaleDateString('th-TH')} \u0e40\u0e27\u0e25\u0e32 ${event.time} \u0e19.\n                        ${isToday ? '<span style=\"margin-left: 0.5rem; color: #3b82f6; font-weight: 500;\">\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49<\/span>' : ''}\n                    <\/p>\n                    ${event.description ? `<p class=\"wp-event-description\">${event.description}<\/p>` : ''}\n                <\/div>\n            `;\n        }).join('');\n    }\n\n    \/\/ Statistics update\n    function wpUpdateStatistics() {\n        const today = new Date();\n        const currentMonth = today.getMonth();\n        const currentYear = today.getFullYear();\n        \n        const totalEvents = wpEvents.length;\n        const thisMonthEvents = wpEvents.filter(event => {\n            const eventDate = new Date(event.date);\n            return eventDate.getMonth() === currentMonth && eventDate.getFullYear() === currentYear;\n        }).length;\n        \n        const todayEvents = wpEvents.filter(event => {\n            const eventDate = new Date(event.date);\n            return eventDate.toDateString() === today.toDateString();\n        }).length;\n\n        document.getElementById('wpTotalEvents').textContent = totalEvents;\n        document.getElementById('wpThisMonthEvents').textContent = thisMonthEvents;\n        document.getElementById('wpTodayEvents').textContent = todayEvents;\n    }\n\n    \/\/ Global functions for WordPress\n    window.wpSyncData = async function() {\n        const success = await wpLoadDataFromScript();\n        if (success) {\n            wpRenderCalendar();\n            wpRenderEventsList();\n            wpUpdateStatistics();\n        }\n    };\n\n    window.wpPreviousMonth = function() {\n        wpCurrentDate.setMonth(wpCurrentDate.getMonth() - 1);\n        wpRenderCalendar();\n    };\n\n    window.wpNextMonth = function() {\n        wpCurrentDate.setMonth(wpCurrentDate.getMonth() + 1);\n        wpRenderCalendar();\n    };\n\n    window.wpFilterEvents = function(type) {\n        wpCurrentFilter = type;\n        \n        \/\/ Update filter buttons\n        document.querySelectorAll('.wp-filter-btn').forEach(btn => {\n            btn.classList.remove('active');\n        });\n        document.getElementById(`wpFilter${type.charAt(0).toUpperCase() + type.slice(1)}`).classList.add('active');\n        \n        wpRenderEventsList();\n    };\n\n    window.wpShowEventDetail = function(eventId) {\n        const event = wpEvents.find(e => e.id == eventId);\n        if (!event) return;\n\n        const eventDate = new Date(event.date);\n        const content = `\n            <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n                <div>\n                    <h4 style=\"font-weight: 600; color: #1f2937; margin: 0 0 0.5rem 0;\">\u0e0a\u0e37\u0e48\u0e2d\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/h4>\n                    <p style=\"color: #6b7280; margin: 0;\">${event.title}<\/p>\n                <\/div>\n                <div>\n                    <h4 style=\"font-weight: 600; color: #1f2937; margin: 0 0 0.5rem 0;\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e41\u0e25\u0e30\u0e40\u0e27\u0e25\u0e32<\/h4>\n                    <p style=\"color: #6b7280; margin: 0;\">\ud83d\udcc5 ${eventDate.toLocaleDateString('th-TH')} \u0e40\u0e27\u0e25\u0e32 ${event.time} \u0e19.<\/p>\n                <\/div>\n                ${event.description ? `\n                    <div>\n                        <h4 style=\"font-weight: 600; color: #1f2937; margin: 0 0 0.5rem 0;\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14<\/h4>\n                        <p style=\"color: #6b7280; margin: 0;\">${event.description}<\/p>\n                    <\/div>\n                ` : ''}\n                ${event.createdBy ? `\n                    <div>\n                        <h4 style=\"font-weight: 600; color: #1f2937; margin: 0 0 0.5rem 0;\">\u0e1c\u0e39\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07<\/h4>\n                        <p style=\"color: #6b7280; margin: 0;\">${event.createdBy}<\/p>\n                    <\/div>\n                ` : ''}\n            <\/div>\n        `;\n\n        document.getElementById('wpEventModalContent').innerHTML = content;\n        document.getElementById('wpEventModal').classList.add('show');\n    };\n\n    window.wpHideEventModal = function() {\n        document.getElementById('wpEventModal').classList.remove('show');\n    };\n\n    \/\/ Initialize\n    document.addEventListener('DOMContentLoaded', function() {\n        wpRenderCalendar();\n        wpRenderEventsList();\n        wpUpdateStatistics();\n    });\n\n    \/\/ Initialize immediately if DOM is already loaded\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', function() {\n            wpRenderCalendar();\n            wpRenderEventsList();\n            wpUpdateStatistics();\n        });\n    } else {\n        wpRenderCalendar();\n        wpRenderEventsList();\n        wpUpdateStatistics();\n    }\n})();\n<\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'979b318e74a5a1b1',t:'MTc1Njk2NDg2MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\"><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcc5 \u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\/\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21 \u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e42 [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-21430","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/bba.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/21430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bba.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bba.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bba.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/bba.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/comments?post=21430"}],"version-history":[{"count":23,"href":"https:\/\/bba.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/21430\/revisions"}],"predecessor-version":[{"id":22291,"href":"https:\/\/bba.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/21430\/revisions\/22291"}],"wp:attachment":[{"href":"https:\/\/bba.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/media?parent=21430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}