Berikan kemudahan bagi pengunjung dengan Asset Jadwal Imsakiyah otomatis. Akurat, elegan, dan siap tempel di Elementor dalam hitungan detik.
tidak perlu nyusun kode sendiri, tinggal copy
Mendeteksi lokasi kota pengunjung secara real-time menggunakan IP Intelligence. Memberikan jadwal yang presisi di mana pun mereka berada.
Optimasi kode Vanilla JS tanpa library eksternal yang berat.
Kontrol penuh atas palet warna melalui CSS Variables.
Tanpa ribet, tanpa plugin tambahan, dan siap dalam hitungan menit.
Klik tombol salin pada blok kode yang telah kami sediakan di bawah.
Cari widget HTML, tarik ke halaman Anda, dan tempel kodenya.
Klik update dan jadwal imsakiyah otomatis kini aktif di website Anda.
<div id="imsakiyah-wrapper">
<div class="ramadhan-header">
<div class="header-content">
<span class="marhaban">Marhaban Ya Ramadhan</span>
<h1>Jadwal Imsakiyah 1447 H</h1>
<p class="subtitle">Berdasarkan Data Kemenag RI • Wilayah Indonesia</p>
</div>
<div class="location-badge" id="current-loc">
<i class="fas fa-map-marker-alt"></i> Mendeteksi Lokasi...
</div>
<div class="search-container">
<select id="city-selector">
<option value="">Cari Kota atau Kabupaten...</option>
</select>
</div>
</div>
<div class="table-card">
<div class="table-responsive">
<table id="imsakiyah-table">
<thead>
<tr>
<th>H</th>
<th>Tanggal</th>
<th>Imsak</th>
<th>Subuh</th>
<th>Dzuhur</th>
<th>Ashar</th>
<th class="highlight-column">Maghrib</th>
<th>Isya</th>
</tr>
</thead>
<tbody id="imsakiyah-body">
<tr><td colspan="8">Menyiapkan data keberkahan...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<style>
:root {
--primary-green: #065f46;
--accent-gold: #f59e0b;
--soft-bg: #f0fdf4;
}
#imsakiyah-wrapper {
font-family: 'Inter', sans-serif;
max-width: 1000px;
margin: 20px auto;
padding: 0 15px;
}
.ramadhan-header {
background: linear-gradient(135deg, #065f46 0%, #064e3b 100%);
border-radius: 20px 20px 0 0;
padding: 40px 20px;
text-align: center;
color: white;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.marhaban {
display: block;
font-size: 0.9rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent-gold);
margin-bottom: 10px;
font-weight: 600;
}
.ramadhan-header h1 {
margin: 0;
font-size: 2rem;
font-weight: 800;
}
.subtitle { font-size: 0.9rem; opacity: 0.8; margin-top: 5px; }
.location-badge {
display: inline-block;
background: rgba(255,255,255,0.1);
padding: 6px 15px;
border-radius: 50px;
margin-top: 20px;
font-size: 0.85rem;
border: 1px solid rgba(255,255,255,0.2);
}
.search-container { margin-top: 25px; }
#city-selector {
width: 100%;
max-width: 450px;
padding: 12px 20px;
border-radius: 12px;
border: none;
font-size: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.table-card {
background: white;
border-radius: 0 0 20px 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 700px; }
th {
background: #f8fafc;
padding: 18px 10px;
font-size: 0.75rem;
text-transform: uppercase;
color: #64748b;
border-bottom: 2px solid #edf2f7;
}
td { padding: 15px 10px; text-align: center; border-bottom: 1px solid #f1f5f9; color: #1e293b; font-size: 0.9rem; }
tr:hover { background-color: var(--soft-bg); }
.highlight-column { background: #fff1f2; color: #be123c !important; font-weight: bold; }
.today-row {
background-color: #fef3c7 !important;
border: 2px solid var(--accent-gold);
font-weight: bold;
}
.today-row td { color: #92400e; }
/* Custom Scrollbar */
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
</style>
<script>
document.addEventListener('DOMContentLoaded', async function() {
const citySelector = document.getElementById('city-selector');
const tableBody = document.getElementById('imsakiyah-body');
const locBadge = document.getElementById('current-loc');
// 1. Ambil data kota & urutkan berdasarkan lokasi
async function init() {
try {
const res = await fetch('https://api.myquran.com/v2/sholat/kota/semua');
const data = await res.json();
const cities = data.data.sort((a, b) => a.lokasi.localeCompare(b.lokasi));
cities.forEach(city => {
const opt = document.createElement('option');
opt.value = city.id;
// Menampilkan nama Kota saja (Provinsi sudah inklusif di data MyQuran)
opt.textContent = city.lokasi;
citySelector.appendChild(opt);
});
autoDetect();
} catch (e) { console.error("API Error"); }
}
// 2. Deteksi Lokasi Otomatis
async function autoDetect() {
try {
const geo = await fetch('https://ipapi.co/json/');
const geoData = await geo.json();
const userCity = geoData.city.toUpperCase();
// Cari kota yang paling mendekati
const res = await fetch('https://api.myquran.com/v2/sholat/kota/semua');
const data = await res.json();
const match = data.data.find(c => c.lokasi.includes(userCity));
const finalId = match ? match.id : "1301"; // Default Jakarta
citySelector.value = finalId;
locBadge.innerHTML = `📍 Wilayah: <b>${match ? match.lokasi : 'DKI Jakarta'}</b>`;
loadJadwal(finalId);
} catch (e) {
citySelector.value = "1301";
loadJadwal("1301");
}
}
// 3. Load & Render Jadwal
async function loadJadwal(cityId) {
tableBody.innerHTML = '<tr><td colspan="8">Memuat jadwal Ramadhan...</td></tr>';
try {
// Kita ambil data Feb dan Mar 2026
const [res1, res2] = await Promise.all([
fetch(`https://api.myquran.com/v2/sholat/jadwal/${cityId}/2026/02`),
fetch(`https://api.myquran.com/v2/sholat/jadwal/${cityId}/2026/03`)
]);
const d1 = await res1.json();
const d2 = await res2.json();
const allDays = [...d1.data.jadwal, ...d2.data.jadwal];
// Filter: Start 19 Feb 2026 s/d 30 hari kemudian
const startDate = new Date('2026-02-19');
const endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + 29); // 30 Hari Puasa
renderTable(allDays, startDate, endDate);
} catch (e) {
tableBody.innerHTML = '<tr><td colspan="8">Gagal sinkronisasi data.</td></tr>';
}
}
function renderTable(days, start, end) {
tableBody.innerHTML = '';
let hCount = 1;
const today = new Date().toISOString().split('T')[0];
days.forEach(day => {
const dObj = new Date(day.date);
if (dObj >= start && dObj <= end) {
const isToday = day.date === today ? 'class="today-row"' : '';
tableBody.insertAdjacentHTML('beforeend', `
<tr ${isToday}>
<td>${hCount++}</td>
<td>${day.tanggal}</td>
<td>${day.imsak}</td>
<td>${day.subuh}</td>
<td>${day.dzuhur}</td>
<td>${day.ashar}</td>
<td class="highlight-column">${day.maghrib}</td>
<td>${day.isya}</td>
</tr>
`);
}
});
}
citySelector.addEventListener('change', (e) => {
const text = e.target.options[e.target.selectedIndex].text;
locBadge.innerHTML = `📍 Wilayah: <b>${text}</b>`;
loadJadwal(e.target.value);
});
init();
});
</script>