{"id":370,"date":"2026-02-26T07:09:38","date_gmt":"2026-02-26T07:09:38","guid":{"rendered":"https:\/\/masjid-alihsan.or.id\/?page_id=370"},"modified":"2026-02-27T07:49:24","modified_gmt":"2026-02-27T07:49:24","slug":"kalender","status":"publish","type":"page","link":"https:\/\/masjid-alihsan.or.id\/?page_id=370","title":{"rendered":"Kalender"},"content":{"rendered":"\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\n<style>\nbody{\n    background:#f4f6f8;\n}\n\n.hijri-container{\n    max-width:1100px;\n    margin:40px auto;\n    font-family:'Segoe UI',Arial,sans-serif;\n}\n\n.hijri-header{\n    display:flex;\n    justify-content:space-between;\n    align-items:center;\n    margin-bottom:25px;\n}\n\n.hijri-title{\n    font-size:26px;\n    font-weight:bold;\n    color:#00c96b;\n    letter-spacing:1px;\n}\n\n.nav-btn{\n    background:#00c96b;\n    color:white;\n    border:none;\n    width:45px;\n    height:45px;\n    border-radius:50%;\n    cursor:pointer;\n    font-size:20px;\n    font-weight:bold;\n    transition:0.3s;\n}\n\n.nav-btn:hover{\n    background:#00b45f;\n    transform:scale(1.05);\n}\n\n.nav-btn:focus{\n    outline:none;\n    box-shadow:none;\n}\n\n.calendar{\n    display:grid;\n    grid-template-columns:repeat(7,1fr);\n    gap:12px;\n}\n\n.day-name{\n    text-align:center;\n    padding:12px;\n    background:#00c96b;\n    color:white;\n    border-radius:10px;\n    font-weight:bold;\n    font-size:15px;\n}\n\n.day{\n    min-height:110px;\n    background:white;\n    border-radius:14px;\n    padding:10px;\n    box-shadow:0 6px 18px rgba(0,0,0,0.06);\n    position:relative;\n    transition:0.2s;\n}\n\n.day:hover{\n    transform:translateY(-3px);\n}\n\n.day strong{\n    font-size:20px;\n    font-weight:bold;\n    color:#222;\n    display:block;\n}\n\n.day small{\n    font-size:14px;\n    color:#777;\n    display:block;\n    margin-top:4px;\n}\n\n.friday{\n    border:2px solid #00c96b;\n}\n\n.today{\n    background:#e9fff5;\n    border:2px solid #00c96b;\n}\n\n.ayyamul{\n    background:#fff7e6;\n}\n\n.event{\n    font-size:11px;\n    color:#d35400;\n    margin-top:6px;\n    font-weight:500;\n}\n\n.event-box{\n    margin-top:35px;\n    padding:25px;\n    background:white;\n    border-radius:14px;\n    box-shadow:0 6px 18px rgba(0,0,0,0.05);\n}\n\n.event-box h3{\n    margin-top:0;\n    color:#00c96b;\n    font-size:18px;\n}\n\n.event-box ul{\n    padding-left:18px;\n    line-height:1.8;\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hijri-container\">\n\n    <div class=\"hijri-header\">\n        <button class=\"nav-btn\" onclick=\"changeMonth(-1)\">\u2039<\/button>\n        <div class=\"hijri-title\" id=\"monthTitle\"><\/div>\n        <button class=\"nav-btn\" onclick=\"changeMonth(1)\">\u203a<\/button>\n    <\/div>\n\n    <div class=\"calendar\" id=\"calendar\">\n        <div class=\"day-name\">Min<\/div>\n        <div class=\"day-name\">Sen<\/div>\n        <div class=\"day-name\">Sel<\/div>\n        <div class=\"day-name\">Rab<\/div>\n        <div class=\"day-name\">Kam<\/div>\n        <div class=\"day-name\">Jum<\/div>\n        <div class=\"day-name\">Sab<\/div>\n    <\/div>\n\n    <div class=\"event-box\">\n        <h3>\ud83c\udf19 Keterangan Ibadah<\/h3>\n        <ul>\n            <li>Puasa Ayyamul Bidh (13\u201315 Hijriyah)<\/li>\n            <li>Puasa Senin &#038; Kamis<\/li>\n            <li>Perbanyak Sholawat di Hari Jum&#8217;at<\/li>\n        <\/ul>\n    <\/div>\n\n<\/div>\n\n<script>\nlet currentDate = new Date();\n\nfunction getHijri(date){\n    return new Intl.DateTimeFormat('id-TN-u-ca-islamic',{\n        day:'numeric',\n        month:'long',\n        year:'numeric'\n    }).formatToParts(date);\n}\n\nfunction renderCalendar(){\n\n    const calendar = document.getElementById(\"calendar\");\n    calendar.innerHTML = `\n        <div class=\"day-name\">Min<\/div>\n        <div class=\"day-name\">Sen<\/div>\n        <div class=\"day-name\">Sel<\/div>\n        <div class=\"day-name\">Rab<\/div>\n        <div class=\"day-name\">Kam<\/div>\n        <div class=\"day-name\">Jum<\/div>\n        <div class=\"day-name\">Sab<\/div>\n    `;\n\n    const hijriParts = getHijri(currentDate);\n    const hijriMonth = hijriParts.find(p=>p.type===\"month\").value;\n    const hijriYear = hijriParts.find(p=>p.type===\"year\").value;\n\n    document.getElementById(\"monthTitle\").innerHTML =\n        hijriMonth + \" \" + hijriYear + \" H\";\n\n    for(let i=1;i<=30;i++){\n\n        let date = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);\n        let hijri = getHijri(date);\n        let hijriDay = parseInt(hijri.find(p=>p.type===\"day\").value);\n\n        let div = document.createElement(\"div\");\n        div.classList.add(\"day\");\n\n        if(date.getDay()===5){\n            div.classList.add(\"friday\");\n        }\n\n        let today = new Date();\n        if(date.toDateString()===today.toDateString()){\n            div.classList.add(\"today\");\n        }\n\n        if(hijriDay===13||hijriDay===14||hijriDay===15){\n            div.classList.add(\"ayyamul\");\n        }\n\n        let eventText=\"\";\n        if(hijriDay===1 && hijriMonth===\"Muharram\") eventText=\"Tahun Baru Islam\";\n        if(hijriDay===12 && hijriMonth===\"Rabiul Awal\") eventText=\"Maulid Nabi \ufdfa\";\n        if(hijriDay===1 && hijriMonth===\"Syawal\") eventText=\"Idul Fitri\";\n        if(hijriDay===10 && hijriMonth===\"Zulhijah\") eventText=\"Idul Adha\";\n\n        div.innerHTML =\n            \"<strong>\"+hijriDay+\" H<\/strong>\"+\n            \"<small>\"+i+\" M<\/small>\"+\n            (eventText ? \"<div class='event'>\"+eventText+\"<\/div>\" : \"\");\n\n        calendar.appendChild(div);\n    }\n}\n\nfunction changeMonth(step){\n    currentDate.setMonth(currentDate.getMonth()+step);\n    renderCalendar();\n}\n\nrenderCalendar();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u2039 \u203a Min Sen Sel Rab Kam Jum Sab \ud83c\udf19 Keterangan Ibadah Puasa Ayyamul Bidh (13\u201315 Hijriyah) Puasa Senin &#038;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"class_list":["post-370","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/masjid-alihsan.or.id\/index.php?rest_route=\/wp\/v2\/pages\/370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/masjid-alihsan.or.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/masjid-alihsan.or.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/masjid-alihsan.or.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/masjid-alihsan.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=370"}],"version-history":[{"count":13,"href":"https:\/\/masjid-alihsan.or.id\/index.php?rest_route=\/wp\/v2\/pages\/370\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/masjid-alihsan.or.id\/index.php?rest_route=\/wp\/v2\/pages\/370\/revisions\/533"}],"wp:attachment":[{"href":"https:\/\/masjid-alihsan.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}