Hijri Calendar Widget Generator

Create a beautiful, auto-updating Islamic date widget to embed on your mosque website or personal blog.

Webmaster Tool

Customize Your Widget

Widget Theme Color

Text Color

Widget Width

Live Preview

Embed Code

Copy and paste this code snippet into your website's HTML body where you want the widget to appear.

<!-- Quran411 Hijri Widget -->
<div id="q411-hijri-widget" style="width:100%; max-width:300px;"></div>
<script>
(function(){
  var color = "#0891b2";
  var text = "#ffffff";
  // The actual implementation fetches from Aladhan API and renders the box
  fetch('https://api.aladhan.com/v1/gToH?date=' + new Date().toLocaleDateString('en-GB').replace(/\//g,'-'))
  .then(res => res.json())
  .then(data => {
      var h = data.data.hijri;
      document.getElementById('q411-hijri-widget').innerHTML = 
      '<div style="background:'+color+'; color:'+text+'; padding:20px; border-radius:12px; text-align:center; font-family:sans-serif;">' +
        '<div style="font-size:12px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;">Islamic Date</div>' +
        '<div style="font-size:56px; font-weight:800; line-height:1;">'+h.day+'</div>' +
        '<div style="font-size:20px; font-weight:700;">'+h.month.en+'</div>' +
        '<div style="font-size:16px; opacity:0.8;">'+h.year+' AH</div>' +
      '</div>';
  });
})();
</script>