{"id":187,"date":"2015-06-17T06:24:41","date_gmt":"2015-06-17T06:24:41","guid":{"rendered":"http:\/\/demo.themegrill.com\/colormag\/?page_id=187"},"modified":"2026-07-15T15:05:49","modified_gmt":"2026-07-15T08:05:49","slug":"right-sidebar-2","status":"publish","type":"page","link":"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/","title":{"rendered":"Kesiswaan"},"content":{"rendered":"\n\n\n\n\n<p class=\"wp-block-paragraph\">MAN 2 Grobogan sebagai lembaga pendidikan madrasah unggulan di Kabupaten Grobogan, Jawa Tengah, memahami bahwa keberhasilan proses belajar mengajar sangat bergantung pada perencanaan yang matang dan terstruktur. Oleh karena itu, Kalender Pendidikan Tahun Ajaran 2026\/2027 disusun secara komprehensif sebagai peta jalan utama yang mengintegrasikan aspek akademik, keagamaan, kebangsaan, dan pengembangan karakter siswa.<br>Tahun ajaran ini resmi dimulai pada 13 Juli 2026 dengan kegiatan MATAMUDA (Masa Ta\u2019aruf dan Pengenalan Lingkungan) bagi siswa kelas X serta Program Ta\u2019aruf dan Transisi (PTT). Kalender ini dirancang dengan mempertimbangkan sekitar 180 hari efektif yang tersebar dalam dua semester, dengan proporsi yang seimbang antara pembelajaran reguler, asesmen, dan kegiatan pengembangan diri. Semester Ganjil berlangsung dari Juli hingga Desember 2026, sementara Semester Genap berjalan dari Januari hingga Juni 2027.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Kalender Pendidikan MAN 2 Grobogan \u2022 TA 2026\/2027<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&amp;family=Poppins:wght@500;600&amp;display=swap');\n        \n        body {\n            font-family: 'Inter', system_ui, sans-serif;\n        }\n        \n        .font-display {\n            font-family: 'Poppins', 'Inter', system_ui, sans-serif;\n            font-weight: 600;\n        }\n\n        .month-card {\n            transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);\n            border: 2px solid #B2EBF2;\n        }\n        \n        .month-card:hover {\n            transform: translateY(-6px);\n            box-shadow: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);\n            border-color: #0288D1;\n        }\n        \n        .month-card.active {\n            border-color: #0288D1;\n            box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.2);\n            transform: scale(1.01);\n        }\n\n        .agenda-item {\n            transition: all 0.2s ease;\n        }\n        \n        .agenda-item:hover {\n            background-color: #E0F7FA;\n            transform: translateX(4px);\n        }\n\n        .kokulikuler-badge {\n            background-color: #10B981;\n            color: white;\n            font-size: 0.75rem;\n            padding: 0.125rem 0.5rem;\n            border-radius: 9999px;\n            font-weight: 600;\n            display: inline-flex;\n            align-items: center;\n            gap: 0.25rem;\n        }\n\n        .event-date {\n            background-color: #0288D1;\n            color: white;\n            padding: 0.25rem 0.75rem;\n            border-radius: 6px;\n            font-weight: 600;\n            font-size: 0.875rem;\n            white-space: nowrap;\n        }\n\n        .wp-container {\n            max-width: 1200px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-[#E0F7FA] text-[#01579B] py-8\">\n\n    <!-- \n    ============================================================\n    INSTRUKSI PENTING UNTUK WORDPRESS:\n    1. Copy SELURUH isi file ini (dari <!DOCTYPE html> sampai <\/html>)\n    2. Di WordPress Page\/Post \u2192 Tambahkan blok \"Custom HTML\"\n    3. Paste semua kode ke dalam blok tersebut\n    4. Simpan dan Preview halaman\n    5. (Opsional) Enqueue Tailwind CSS & Font Awesome di theme jika ingin lebih ringan\n    ============================================================\n    -->\n\n    <div class=\"wp-container px-4 sm:px-6\">\n\n        <!-- Header \/ Title -->\n        <div class=\"flex flex-col md:flex-row md:items-end md:justify-between gap-y-4 mb-8\">\n            <div>\n                <div class=\"inline-flex items-center gap-x-2 bg-white px-4 py-1.5 rounded-3xl shadow-sm border border-[#B2EBF2] mb-3\">\n                    <div class=\"w-2.5 h-2.5 bg-emerald-500 rounded-full animate-pulse\"><\/div>\n                    <span class=\"text-sm font-semibold text-emerald-600\">Update \u2022 02 Juli 2026<\/span>\n                <\/div>\n                \n                <h1 class=\"font-display text-4xl md:text-5xl font-bold tracking-tighter text-[#01579B]\">\n                    Kalender Pendidikan<br>\n                    <span class=\"bg-gradient-to-r from-[#0288D1] to-[#01579B] bg-clip-text text-transparent\">MAN 2 Grobogan<\/span>\n                <\/h1>\n                <p class=\"mt-2 text-lg text-[#0288D1]\">Tahun Ajaran 2026\/2027 \u2022 Termasuk Kegiatan Kokulikuler<\/p>\n            <\/div>\n            \n            <div>\n                <button onclick=\"showAllEvents()\" \n                        class=\"inline-flex items-center gap-x-3 px-6 h-14 bg-white hover:bg-[#E0F7FA] border-2 border-[#0288D1] text-[#0288D1] font-semibold rounded-3xl transition-all active:scale-[0.985]\">\n                    <i class=\"fa-solid fa-list-ul\"><\/i>\n                    <span>Lihat Semua Agenda<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Quick Stats -->\n        <div class=\"grid grid-cols-2 md:grid-cols-3 gap-4 mb-10\">\n            <div class=\"bg-white rounded-3xl p-5 border border-[#B2EBF2]\">\n                <div class=\"flex items-center gap-x-4\">\n                    <i class=\"fa-solid fa-calendar-days text-3xl text-[#0288D1]\"><\/i>\n                    <div>\n                        <div class=\"text-3xl font-bold\">12<\/div>\n                        <div class=\"text-sm text-[#0288D1]\">Bulan Akademik<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"bg-white rounded-3xl p-5 border border-[#B2EBF2]\">\n                <div class=\"flex items-center gap-x-4\">\n                    <i class=\"fa-solid fa-chalkboard-teacher text-3xl text-emerald-500\"><\/i>\n                    <div>\n                        <div class=\"text-3xl font-bold\">~180<\/div>\n                        <div class=\"text-sm text-[#0288D1]\">Hari Efektif<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"bg-white rounded-3xl p-5 border border-[#B2EBF2]\">\n                <div class=\"flex items-center gap-x-4\">\n                    <i class=\"fa-solid fa-users text-3xl text-amber-500\"><\/i>\n                    <div>\n                        <div class=\"text-3xl font-bold\">2<\/div>\n                        <div class=\"text-sm text-[#0288D1]\">Kegiatan Kokulikuler<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Month Selection - WIDER CARDS -->\n        <div class=\"mb-6\">\n            <div class=\"flex items-end justify-between mb-5\">\n                <div>\n                    <h2 class=\"font-display text-3xl font-bold tracking-tight text-[#01579B]\">Pilih Bulan<\/h2>\n                    <p class=\"text-[#0288D1] mt-1\">Klik bulan untuk melihat seluruh agenda &amp; kegiatan<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Grid diubah menjadi lebih lebar (4 kolom di layar besar) -->\n            <div class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-4\" id=\"months-container\">\n                <!-- Populated by JavaScript -->\n            <\/div>\n        <\/div>\n\n        <!-- Selected Month Agenda -->\n        <div id=\"agenda-section\" class=\"hidden mb-12\">\n            <div class=\"bg-white rounded-3xl border border-[#B2EBF2] shadow-xl overflow-hidden\">\n                \n                <!-- Agenda Header -->\n                <div class=\"px-8 pt-8 pb-6 bg-gradient-to-r from-[#E0F7FA] to-white flex flex-col md:flex-row md:items-center justify-between gap-y-4 border-b border-[#B2EBF2]\">\n                    <div class=\"flex items-center gap-x-4\">\n                        <div id=\"agenda-month-icon\" \n                             class=\"w-14 h-14 flex-shrink-0 rounded-2xl bg-gradient-to-br from-[#0288D1] to-[#01579B] flex items-center justify-center text-white\">\n                            <i class=\"fa-solid fa-calendar text-3xl\"><\/i>\n                        <\/div>\n                        <div>\n                            <div id=\"agenda-month-name\" class=\"font-display text-3xl md:text-4xl font-bold tracking-tighter text-[#01579B]\"><\/div>\n                            <div id=\"agenda-month-subtitle\" class=\"text-[#0288D1] font-medium flex items-center gap-x-2 mt-0.5 text-sm md:text-base\"><\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"flex items-center gap-x-3\">\n                        <button onclick=\"printAgenda()\" \n                                class=\"flex items-center gap-x-2 px-5 h-11 bg-white border border-[#B2EBF2] hover:bg-[#E0F7FA] text-[#01579B] rounded-3xl text-sm font-semibold transition-all\">\n                            <i class=\"fa-solid fa-print\"><\/i>\n                            <span>Print<\/span>\n                        <\/button>\n                        <button onclick=\"closeAgenda()\" \n                                class=\"flex items-center gap-x-2 px-5 h-11 bg-[#01579B] hover:bg-[#0288D1] text-white rounded-3xl text-sm font-semibold transition-all\">\n                            <i class=\"fa-solid fa-times\"><\/i>\n                            <span>Tutup<\/span>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Agenda Content -->\n                <div class=\"p-8\" id=\"agenda-content\">\n                    <!-- Populated dynamically -->\n                <\/div>\n                \n                <div class=\"px-8 py-4 bg-[#E0F7FA] border-t border-[#B2EBF2] text-xs flex items-center gap-x-2 text-[#01579B]\">\n                    <i class=\"fa-solid fa-info-circle\"><\/i>\n                    <span>Data bersumber dari Kalender Pendidikan MAN 2 Grobogan TA 2026\/2027. Jadwal dapat disesuaikan.<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- All Events Modal -->\n    <div id=\"all-events-modal\" onclick=\"if (event.target.id === 'all-events-modal') hideAllEvents()\" \n         class=\"hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4\">\n        <div onclick=\"event.stopImmediatePropagation()\" \n             class=\"bg-white w-full max-w-5xl max-h-[90vh] rounded-3xl overflow-hidden shadow-2xl flex flex-col\">\n            \n            <div class=\"px-8 py-6 border-b flex items-center justify-between bg-gradient-to-r from-[#E0F7FA] to-white\">\n                <div>\n                    <h3 class=\"font-display text-3xl font-bold text-[#01579B]\">Semua Agenda Tahun Ajaran 2026\/2027<\/h3>\n                    <p class=\"text-sm text-[#0288D1]\">Daftar lengkap kegiatan dan hari libur<\/p>\n                <\/div>\n                <button onclick=\"hideAllEvents()\" class=\"text-4xl leading-none text-[#0288D1] hover:text-[#01579B] transition-colors\">&times;<\/button>\n            <\/div>\n            \n            <div class=\"overflow-auto p-8 flex-1\" style=\"max-height: calc(90vh - 140px)\">\n                <div id=\"all-events-list\" class=\"space-y-8\"><\/div>\n            <\/div>\n            \n            <div class=\"px-8 py-5 border-t bg-[#E0F7FA] flex justify-end\">\n                <button onclick=\"hideAllEvents()\" \n                        class=\"px-8 h-11 bg-[#01579B] hover:bg-[#0288D1] transition-colors text-white font-semibold rounded-3xl text-sm\">\n                    Tutup\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Data\n        const monthsData = {\n            \"Juli 2026\": {\n                icon: \"fa-calendar-check\",\n                subtitle: \"Awal Tahun Ajaran Baru\",\n                effectiveDays: \"17 hari efektif\",\n                events: [\n                    { date: \"01 \u2013 11 Juli 2026\", activity: \"Libur Semester Genap\", type: \"libur\" },\n                    { date: \"13 Juli 2026\", activity: \"Hari pertama masuk TA 2026\/2027\", type: \"masuk\" },\n                    { date: \"13 \u2013 19 Juli 2026\", activity: \"MATAMUDA Kelas X & PTT\", type: \"kegiatan\" }\n                ]\n            },\n            \"Agustus 2026\": {\n                icon: \"fa-flag\",\n                subtitle: \"Bulan Kemerdekaan & Maulid Nabi\",\n                effectiveDays: \"24 hari efektif\",\n                events: [\n                    { date: \"13 \u2013 15 Agustus 2026\", activity: \"Lomba HUT Kemerdekaan RI\", type: \"kegiatan\" },\n                    { date: \"17 Agustus 2026\", activity: \"HUT Kemerdekaan Republik Indonesia\", type: \"nasional\" },\n                    { date: \"25 Agustus 2026\", activity: \"Maulid Nabi Muhammad SAW 1447 H\", type: \"agama\" }\n                ]\n            },\n            \"September 2026\": {\n                icon: \"fa-laptop\",\n                subtitle: \"Persiapan Asesmen\",\n                effectiveDays: \"26 hari efektif\",\n                events: [\n                    { date: \"21 \u2013 26 September 2026\", activity: \"Simulasi TKA dan AN Kelas XII\", type: \"asesmen\" }\n                ]\n            },\n            \"Oktober 2026\": {\n                icon: \"fa-graduation-cap\",\n                subtitle: \"Milad MAN 2 & TKA\/AN\",\n                effectiveDays: \"27 hari efektif\",\n                events: [\n                    { date: \"1 Oktober 2026\", activity: \"Hari Kesaktian Pancasila\", type: \"nasional\" },\n                    { date: \"5 \u2013 18 Oktober 2026\", activity: \"Gladi Bersih TKA dan AN Kelas XII\", type: \"asesmen\" },\n                    { date: \"13 Oktober 2026\", activity: \"Milad MAN 2 Grobogan\", type: \"sekolah\" },\n                    { date: \"22 Oktober 2026\", activity: \"Hari Santri Nasional\", type: \"nasional\" },\n                    { date: \"26 \u2013 29 Oktober 2026\", activity: \"Pelaksanaan TKA dan AN Kelas XII\", type: \"asesmen\" },\n                    { date: \"28 Oktober 2026\", activity: \"Hari Sumpah Pemuda\", type: \"nasional\" }\n                ]\n            },\n            \"November 2026\": {\n                icon: \"fa-clipboard-check\",\n                subtitle: \"SAS Ganjil & Pahlawan\",\n                effectiveDays: \"25 hari efektif\",\n                events: [\n                    { date: \"02 \u2013 05 November 2026\", activity: \"Pelaksanaan TKA dan AN Kelas XII\", type: \"asesmen\" },\n                    { date: \"10 November 2026\", activity: \"Hari Pahlawan Nasional\", type: \"nasional\" },\n                    { date: \"23 \u2013 30 November 2026\", activity: \"Asesmen Sumatif Akhir Semester (SAS) Ganjil\", type: \"asesmen\" }\n                ]\n            },\n            \"Desember 2026\": {\n                icon: \"fa-tree\",\n                subtitle: \"Akhir Semester Ganjil\",\n                effectiveDays: \"16 hari efektif\",\n                events: [\n                    { date: \"01 \u2013 05 Desember 2026\", activity: \"Asesmen Sumatif Akhir Semester (SAS) Ganjil\", type: \"asesmen\" },\n                    { date: \"07 \u2013 12 Desember 2026\", activity: \"Kegiatan Remidial & Pengolahan Nilai\", type: \"kegiatan\" },\n                    { date: \"14 \u2013 18 Desember 2026\", activity: \"Pengolahan Nilai dan Kegiatan Pasca SAS\", type: \"kegiatan\" },\n                    { date: \"19 Desember 2026\", activity: \"Pembagian Raport Semester Ganjil\", type: \"raport\" },\n                    { date: \"25 Desember 2026\", activity: \"Hari Raya Natal\", type: \"agama\" },\n                    { date: \"22 Desember \u2013 03 Januari 2027\", activity: \"Libur Semester Ganjil\", type: \"libur\" }\n                ]\n            },\n            \"Januari 2027\": {\n                icon: \"fa-sync-alt\",\n                subtitle: \"Awal Semester Genap\",\n                effectiveDays: \"23 hari efektif\",\n                events: [\n                    { date: \"01 Januari 2027\", activity: \"Tahun Baru Masehi 2027\", type: \"nasional\" },\n                    { date: \"03 Januari 2027\", activity: \"HAB Kementerian Agama RI\", type: \"agama\" },\n                    { date: \"04 Januari 2027\", activity: \"Awal Semester Genap\", type: \"masuk\" },\n                    { date: \"05 Januari 2027\", activity: \"Peringatan Isra Mi'raj Nabi Muhammad SAW\", type: \"agama\" }\n                ]\n            },\n            \"Februari 2027\": {\n                icon: \"fa-users\",\n                subtitle: \"Ramadhan & Kokulikuler\",\n                effectiveDays: \"20 hari efektif\",\n                events: [\n                    { date: \"06 Februari 2027\", activity: \"Tahun Baru Imlek 2578\", type: \"nasional\" },\n                    { date: \"08 \u2013 10 Februari 2027\", activity: \"Libur Awal Ramadhan 1448 H\", type: \"libur\" },\n                    { date: \"15 \u2013 20 Februari 2027\", activity: \"Kegiatan Kokulikuler Tema 1\", type: \"kokulikuler\" }\n                ]\n            },\n            \"Maret 2027\": {\n                icon: \"fa-moon\",\n                subtitle: \"Idul Fitri & Libur Besar\",\n                effectiveDays: \"17 hari efektif\",\n                events: [\n                    { date: \"05 \u2013 09 Maret 2027\", activity: \"Libur Akhir Bulan Ramadhan 1448 H\", type: \"libur\" },\n                    { date: \"08 Maret 2027\", activity: \"Hari Raya Nyepi\", type: \"agama\" },\n                    { date: \"10 \u2013 11 Maret 2027\", activity: \"Hari Raya Idul Fitri 1448 H\", type: \"agama\" },\n                    { date: \"12 \u2013 15 Maret 2027\", activity: \"Libur Seputar Hari Raya Idul Fitri 1448 H\", type: \"libur\" },\n                    { date: \"28 Maret 2027\", activity: \"Kebangkitan Yesus Kristus (Paskah)\", type: \"agama\" }\n                ]\n            },\n            \"April 2027\": {\n                icon: \"fa-user-graduate\",\n                subtitle: \"Ujian Madrasah\",\n                effectiveDays: \"26 hari efektif\",\n                events: [\n                    { date: \"01 \u2013 17 April 2027\", activity: \"Rentang Waktu Ujian Madrasah\", type: \"asesmen\" },\n                    { date: \"21 April 2027\", activity: \"Hari Kartini\", type: \"nasional\" }\n                ]\n            },\n            \"Mei 2027\": {\n                icon: \"fa-tachometer-alt\",\n                subtitle: \"ASAT & Hari Besar\",\n                effectiveDays: \"22 hari efektif\",\n                events: [\n                    { date: \"01 Mei 2027\", activity: \"Hari Buruh Internasional\", type: \"nasional\" },\n                    { date: \"02 Mei 2027\", activity: \"Hari Pendidikan Nasional\", type: \"nasional\" },\n                    { date: \"06 Mei 2027\", activity: \"Kenaikan Isa Almasih\", type: \"agama\" },\n                    { date: \"08 Mei 2027\", activity: \"Akhirussanah Kelas XII\", type: \"kegiatan\" },\n                    { date: \"17 Mei 2027\", activity: \"Hari Raya Idul Adha 1448 H\", type: \"agama\" },\n                    { date: \"20 Mei 2027\", activity: \"Hari Raya Waisak\", type: \"agama\" },\n                    { date: \"24 \u2013 31 Mei 2027\", activity: \"Asesmen Sumatif Akhir Tahun (ASAT)\", type: \"asesmen\" }\n                ]\n            },\n            \"Juni 2027\": {\n                icon: \"fa-graduation-cap\",\n                subtitle: \"Penutup Tahun Ajaran & Kokulikuler\",\n                effectiveDays: \"15 hari efektif\",\n                events: [\n                    { date: \"01 Juni 2027\", activity: \"Hari Lahir Pancasila\", type: \"nasional\" },\n                    { date: \"02 \u2013 05 Juni 2027\", activity: \"Asesmen Sumatif Akhir Tahun (ASAT) Genap\", type: \"asesmen\" },\n                    { date: \"07 \u2013 12 Juni 2027\", activity: \"Kegiatan Kokulikuler Tema 2\", type: \"kokulikuler\" },\n                    { date: \"14 \u2013 18 Juni 2027\", activity: \"Pengolahan Nilai dan Kegiatan Pasca ASAT\", type: \"kegiatan\" },\n                    { date: \"19 Juni 2027\", activity: \"Pembagian Raport Semester Genap\", type: \"raport\" },\n                    { date: \"22 \u2013 30 Juni 2027\", activity: \"Libur Akhir Tahun Pelajaran\", type: \"libur\" }\n                ]\n            }\n        }\n\n        \/\/ Render month cards (WIDER - 4 columns on large screens)\n        function renderMonthCards() {\n            const container = document.getElementById('months-container');\n            container.innerHTML = '';\n            \n            const monthOrder = [\n                \"Juli 2026\", \"Agustus 2026\", \"September 2026\", \"Oktober 2026\", \n                \"November 2026\", \"Desember 2026\", \"Januari 2027\", \"Februari 2027\", \n                \"Maret 2027\", \"April 2027\", \"Mei 2027\", \"Juni 2027\"\n            ];\n            \n            monthOrder.forEach((monthName) => {\n                const data = monthsData[monthName];\n                if (!data) return;\n                \n                const card = document.createElement('div');\n                card.className = `month-card bg-white rounded-3xl p-6 cursor-pointer border-2 flex flex-col h-full`;\n                \n                card.innerHTML = `\n                    <div class=\"flex justify-between items-start mb-5\">\n                        <div class=\"flex-1 pr-3\">\n                            <div class=\"font-semibold text-xl text-[#01579B]\">${monthName}<\/div>\n                            <div class=\"text-sm text-[#0288D1] mt-1 leading-snug\">${data.subtitle}<\/div>\n                        <\/div>\n                        <div class=\"w-12 h-12 flex-shrink-0 rounded-2xl bg-[#E0F7FA] flex items-center justify-center\">\n                            <i class=\"fa-solid ${data.icon} text-[#0288D1] text-2xl\"><\/i>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"mt-auto pt-4 border-t border-[#E0F7FA]\">\n                        <div class=\"flex items-center justify-between\">\n                            <div class=\"bg-[#E0F7FA] text-[#01579B] text-xs font-bold px-4 py-1.5 rounded-2xl\">\n                                ${data.events.length} agenda\n                            <\/div>\n                            <div class=\"text-right text-xs text-[#0288D1] font-medium leading-tight\">\n                                ${data.effectiveDays}\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `;\n                \n                card.onclick = () => {\n                    document.querySelectorAll('.month-card').forEach(c => c.classList.remove('active'));\n                    card.classList.add('active');\n                    \n                    showAgenda(monthName);\n                    \n                    setTimeout(() => {\n                        document.getElementById('agenda-section').scrollIntoView({ \n                            behavior: 'smooth', \n                            block: 'start' \n                        });\n                    }, 120);\n                };\n                \n                container.appendChild(card);\n            });\n        }\n\n        \/\/ Show agenda\n        function showAgenda(monthName) {\n            const data = monthsData[monthName];\n            if (!data) return;\n            \n            const section = document.getElementById('agenda-section');\n            const content = document.getElementById('agenda-content');\n            \n            document.getElementById('agenda-month-name').innerHTML = monthName;\n            document.getElementById('agenda-month-subtitle').innerHTML = `\n                <span>${data.subtitle}<\/span> \n                <span class=\"mx-2 text-[#B2EBF2]\">\u2022<\/span> \n                <span class=\"font-semibold\">${data.effectiveDays}<\/span>\n            `;\n            \n            const iconContainer = document.getElementById('agenda-month-icon');\n            iconContainer.innerHTML = `<i class=\"fa-solid ${data.icon} text-3xl\"><\/i>`;\n            \n            let html = `<div class=\"space-y-3\">`;\n            \n            data.events.forEach((event) => {\n                let badgeHTML = '';\n                let typeLabel = '';\n                \n                switch(event.type) {\n                    case 'kokulikuler':\n                        badgeHTML = `<span class=\"kokulikuler-badge\"><i class=\"fa-solid fa-users text-xs\"><\/i> <span>KOKULIKULER<\/span><\/span>`;\n                        typeLabel = 'Kegiatan Kokulikuler';\n                        break;\n                    case 'libur':\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-red-100 text-red-600\">LIBUR<\/span>`;\n                        typeLabel = 'Hari Libur';\n                        break;\n                    case 'asesmen':\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-amber-100 text-amber-600\">ASESMEN<\/span>`;\n                        typeLabel = 'Kegiatan Asesmen';\n                        break;\n                    case 'nasional':\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-blue-100 text-blue-600\">NASIONAL<\/span>`;\n                        typeLabel = 'Hari Besar Nasional';\n                        break;\n                    case 'agama':\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-purple-100 text-purple-600\">AGAMA<\/span>`;\n                        typeLabel = 'Hari Besar Keagamaan';\n                        break;\n                    case 'raport':\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-emerald-100 text-emerald-600\">RAPORT<\/span>`;\n                        typeLabel = 'Pembagian Rapor';\n                        break;\n                    case 'masuk':\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-emerald-100 text-emerald-600\">MASUK<\/span>`;\n                        typeLabel = 'Hari Masuk';\n                        break;\n                    case 'sekolah':\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-indigo-100 text-indigo-600\">SEKOLAH<\/span>`;\n                        typeLabel = 'Kegiatan Sekolah';\n                        break;\n                    case 'kegiatan':\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-sky-100 text-sky-600\">KEGIATAN<\/span>`;\n                        typeLabel = 'Kegiatan Khusus';\n                        break;\n                    default:\n                        badgeHTML = `<span class=\"px-3 py-0.5 text-xs font-semibold rounded-2xl bg-gray-100 text-gray-600\">UMUM<\/span>`;\n                }\n                \n                html += `\n                    <div class=\"agenda-item flex flex-col md:flex-row md:items-center gap-4 p-5 rounded-2xl border border-[#E0F7FA] bg-white hover:border-[#B2EBF2]\">\n                        <div class=\"flex-shrink-0\">\n                            <div class=\"event-date\">${event.date}<\/div>\n                        <\/div>\n                        <div class=\"flex-1 min-w-0\">\n                            <div class=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n                                <span class=\"font-semibold text-lg text-[#01579B]\">${event.activity}<\/span>\n                                ${badgeHTML}\n                            <\/div>\n                            <div class=\"text-xs text-[#0288D1] mt-1\">${typeLabel}<\/div>\n                        <\/div>\n                    <\/div>\n                `;\n            });\n            \n            html += `<\/div>`;\n            \n            html += `\n                <div class=\"mt-8 pt-6 border-t border-[#B2EBF2] flex flex-col md:flex-row items-start md:items-center justify-between gap-4 text-sm\">\n                    <div>\n                        <span class=\"font-semibold text-[#01579B]\">Total agenda bulan ini:<\/span> \n                        <span class=\"font-bold text-[#0288D1]\">${data.events.length} kegiatan<\/span>\n                    <\/div>\n                    <div class=\"text-xs px-4 py-2 bg-[#E0F7FA] text-[#01579B] rounded-3xl inline-flex items-center\">\n                        <i class=\"fa-solid fa-info-circle mr-2\"><\/i>\n                        <span>Hari efektif dapat berubah sesuai kebijakan<\/span>\n                    <\/div>\n                <\/div>\n            `;\n            \n            content.innerHTML = html;\n            section.style.display = 'block';\n            section.classList.remove('hidden');\n        }\n\n        function closeAgenda() {\n            const section = document.getElementById('agenda-section');\n            section.style.display = 'none';\n            document.querySelectorAll('.month-card').forEach(c => c.classList.remove('active'));\n        }\n\n        function showAllEvents() {\n            const modal = document.getElementById('all-events-modal');\n            const listContainer = document.getElementById('all-events-list');\n            listContainer.innerHTML = '';\n            \n            const monthOrder = Object.keys(monthsData);\n            \n            monthOrder.forEach(monthName => {\n                const data = monthsData[monthName];\n                \n                let eventsHTML = '';\n                data.events.forEach(event => {\n                    let badge = '';\n                    if (event.type === 'kokulikuler') {\n                        badge = `<span class=\"kokulikuler-badge ml-3\"><i class=\"fa-solid fa-users fa-xs\"><\/i> KOKULIKULER<\/span>`;\n                    } else if (event.type === 'libur') {\n                        badge = `<span class=\"ml-3 px-2.5 py-px text-[10px] font-bold rounded bg-red-100 text-red-500\">LIBUR<\/span>`;\n                    }\n                    \n                    eventsHTML += `\n                        <div class=\"flex gap-4 py-3 border-b border-[#E0F7FA] last:border-none\">\n                            <div class=\"w-44 flex-shrink-0 text-sm font-semibold text-[#0288D1] pt-0.5\">${event.date}<\/div>\n                            <div class=\"flex-1\">\n                                <span class=\"font-medium text-[#01579B]\">${event.activity}<\/span>\n                                ${badge}\n                            <\/div>\n                        <\/div>\n                    `;\n                });\n                \n                const monthSection = document.createElement('div');\n                monthSection.innerHTML = `\n                    <div class=\"flex items-center gap-x-3 mb-3\">\n                        <div class=\"font-display text-xl font-bold text-[#01579B]\">${monthName}<\/div>\n                        <div class=\"text-xs px-3 py-1 rounded-2xl bg-[#E0F7FA] text-[#0288D1]\">${data.events.length} agenda<\/div>\n                    <\/div>\n                    <div class=\"pl-1\">${eventsHTML}<\/div>\n                `;\n                listContainer.appendChild(monthSection);\n            });\n            \n            modal.style.display = 'flex';\n        }\n\n        function hideAllEvents() {\n            document.getElementById('all-events-modal').style.display = 'none';\n        }\n\n        function printAgenda() {\n            const section = document.getElementById('agenda-section');\n            if (!section || section.style.display === 'none') {\n                alert('Silakan pilih bulan terlebih dahulu untuk mencetak.');\n                return;\n            }\n            \n            const printWindow = window.open('', '_blank');\n            const monthName = document.getElementById('agenda-month-name').innerText;\n            \n            printWindow.document.write(`\n                <html>\n                <head>\n                    <title>Agenda ${monthName} \u2022 MAN 2 Grobogan<\/title>\n                    <style>\n                        body { font-family: system-ui, sans-serif; padding: 40px; color: #01579B; max-width: 900px; margin: 0 auto; }\n                        h1 { color: #01579B; border-bottom: 3px solid #0288D1; padding-bottom: 12px; }\n                        .event { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #B2EBF2; }\n                        .date { font-weight: 700; color: #0288D1; }\n                        .activity { font-size: 1.15rem; margin-top: 6px; }\n                    <\/style>\n                <\/head>\n                <body>\n                    <h1>Agenda ${monthName}<\/h1>\n                    <p style=\"color:#0288D1; margin-bottom:30px;\">MAN 2 Grobogan \u2022 Tahun Ajaran 2026\/2027<\/p>\n                    ${section.querySelector('#agenda-content').innerHTML}\n                    <div style=\"margin-top:60px; font-size:0.9rem; color:#0288D1;\">\n                        Dicetak pada ${new Date().toLocaleDateString('id-ID', { weekday:'long', year:'numeric', month:'long', day:'numeric' })}<br>\n                        Sumber: Kalender Pendidikan MAN 2 Grobogan TA 2026\/2027\n                    <\/div>\n                <\/body>\n                <\/html>\n            `);\n            printWindow.document.close();\n            setTimeout(() => printWindow.print(), 300);\n        }\n\n        function setupKeyboardSupport() {\n            document.addEventListener('keydown', function(e) {\n                if (e.key === \"Escape\") {\n                    const agenda = document.getElementById('agenda-section');\n                    const modal = document.getElementById('all-events-modal');\n                    \n                    if (modal.style.display === 'flex') {\n                        hideAllEvents();\n                    } else if (agenda.style.display !== 'none') {\n                        closeAgenda();\n                    }\n                }\n                \n                if (e.key === \"\/\" && document.activeElement.tagName === \"BODY\") {\n                    e.preventDefault();\n                    document.getElementById('months-container').scrollIntoView({ behavior: 'smooth' });\n                }\n            });\n            \n            document.addEventListener('keypress', function(e) {\n                if (e.key === \"?\") {\n                    showAllEvents();\n                }\n            });\n        }\n\n        function initializeApp() {\n            renderMonthCards();\n            setupKeyboardSupport();\n            document.getElementById('agenda-section').style.display = 'none';\n            console.log('%c[Kalender MAN 2 Grobogan - WP Version] Siap digunakan di WordPress.', 'color:#0288D1');\n        }\n        \n        window.onload = initializeApp;\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MAN 2 Grobogan sebagai lembaga pendidikan madrasah unggulan di Kabupaten Grobogan, Jawa Tengah, memahami bahwa keberhasilan proses belajar mengajar sangat<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-187","page","type-page","status-publish","hentry"],"magazineBlocksPostFeaturedMedia":{"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"colormag-highlighted-post":false,"colormag-featured-post-medium":false,"colormag-featured-post-small":false,"colormag-featured-image":false,"colormag-default-news":false,"colormag-featured-image-large":false},"magazineBlocksPostAuthor":{"name":"Admin","avatar":"https:\/\/secure.gravatar.com\/avatar\/ea0eb64e83523895eeaf77f8ef241b64bbc25c775b221e0dc5b364cbfc10b520?s=96&d=identicon&r=g"},"magazineBlocksPostCommentsNumber":"0","magazineBlocksPostExcerpt":"MAN 2 Grobogan sebagai lembaga pendidikan madrasah unggulan di Kabupaten Grobogan, Jawa Tengah, memahami bahwa keberhasilan proses belajar mengajar sangat","magazineBlocksPostCategories":[],"magazineBlocksPostViewCount":0,"magazineBlocksPostReadTime":1,"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Kesiswaan - MAN 2 GROBOGAN<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Kesiswaan - MAN 2 GROBOGAN\" \/>\n<meta property=\"og:description\" content=\"MAN 2 Grobogan sebagai lembaga pendidikan madrasah unggulan di Kabupaten Grobogan, Jawa Tengah, memahami bahwa keberhasilan proses belajar mengajar sangat\" \/>\n<meta property=\"og:url\" content=\"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/\" \/>\n<meta property=\"og:site_name\" content=\"MAN 2 GROBOGAN\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mandagro2019\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-15T08:05:49+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/\",\"url\":\"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/\",\"name\":\"Kesiswaan - MAN 2 GROBOGAN\",\"isPartOf\":{\"@id\":\"https:\/\/man2-grobogan.sch.id\/#website\"},\"datePublished\":\"2015-06-17T06:24:41+00:00\",\"dateModified\":\"2026-07-15T08:05:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\/\/man2-grobogan.sch.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Kesiswaan\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/man2-grobogan.sch.id\/#website\",\"url\":\"https:\/\/man2-grobogan.sch.id\/\",\"name\":\"MAN 2 GROBOGAN\",\"description\":\"Madrasah Aliyah Negeri 2 Grobogan Provinsi Jawa Tengah\",\"publisher\":{\"@id\":\"https:\/\/man2-grobogan.sch.id\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/man2-grobogan.sch.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/man2-grobogan.sch.id\/#organization\",\"name\":\"MAN 2 GROBOGAN\",\"url\":\"https:\/\/man2-grobogan.sch.id\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/man2-grobogan.sch.id\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/man2-grobogan.sch.id\/wp-content\/uploads\/2025\/03\/cropped-logo2-1.png\",\"contentUrl\":\"https:\/\/man2-grobogan.sch.id\/wp-content\/uploads\/2025\/03\/cropped-logo2-1.png\",\"width\":1150,\"height\":1150,\"caption\":\"MAN 2 GROBOGAN\"},\"image\":{\"@id\":\"https:\/\/man2-grobogan.sch.id\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/mandagro2019\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Kesiswaan - MAN 2 GROBOGAN","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/","og_locale":"id_ID","og_type":"article","og_title":"Kesiswaan - MAN 2 GROBOGAN","og_description":"MAN 2 Grobogan sebagai lembaga pendidikan madrasah unggulan di Kabupaten Grobogan, Jawa Tengah, memahami bahwa keberhasilan proses belajar mengajar sangat","og_url":"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/","og_site_name":"MAN 2 GROBOGAN","article_publisher":"https:\/\/www.facebook.com\/mandagro2019","article_modified_time":"2026-07-15T08:05:49+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/","url":"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/","name":"Kesiswaan - MAN 2 GROBOGAN","isPartOf":{"@id":"https:\/\/man2-grobogan.sch.id\/#website"},"datePublished":"2015-06-17T06:24:41+00:00","dateModified":"2026-07-15T08:05:49+00:00","breadcrumb":{"@id":"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/man2-grobogan.sch.id\/index.php\/right-sidebar-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/man2-grobogan.sch.id\/"},{"@type":"ListItem","position":2,"name":"Kesiswaan"}]},{"@type":"WebSite","@id":"https:\/\/man2-grobogan.sch.id\/#website","url":"https:\/\/man2-grobogan.sch.id\/","name":"MAN 2 GROBOGAN","description":"Madrasah Aliyah Negeri 2 Grobogan Provinsi Jawa Tengah","publisher":{"@id":"https:\/\/man2-grobogan.sch.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/man2-grobogan.sch.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/man2-grobogan.sch.id\/#organization","name":"MAN 2 GROBOGAN","url":"https:\/\/man2-grobogan.sch.id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/man2-grobogan.sch.id\/#\/schema\/logo\/image\/","url":"https:\/\/man2-grobogan.sch.id\/wp-content\/uploads\/2025\/03\/cropped-logo2-1.png","contentUrl":"https:\/\/man2-grobogan.sch.id\/wp-content\/uploads\/2025\/03\/cropped-logo2-1.png","width":1150,"height":1150,"caption":"MAN 2 GROBOGAN"},"image":{"@id":"https:\/\/man2-grobogan.sch.id\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/mandagro2019"]}]}},"_links":{"self":[{"href":"https:\/\/man2-grobogan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/man2-grobogan.sch.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/man2-grobogan.sch.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/man2-grobogan.sch.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/man2-grobogan.sch.id\/index.php\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":4,"href":"https:\/\/man2-grobogan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/187\/revisions"}],"predecessor-version":[{"id":1306,"href":"https:\/\/man2-grobogan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/187\/revisions\/1306"}],"wp:attachment":[{"href":"https:\/\/man2-grobogan.sch.id\/index.php\/wp-json\/wp\/v2\/media?parent=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}