Build a Ramadan Countdown Widget (and an Iftar Timer)

A Ramadan countdown is one of those things every Muslim site wants and nobody wants to maintain. Hijri math, Iftar times, fasting hours, all of it. There are two ways to do this: paste a widget, or build it from scratch.

The two line version

<script src="https://ummahapi.com/widget.js"></script>
<div data-ummahapi="ramadan"
     data-lat="40.71" data-lng="-74"></div>

Behaviour:

• Before Ramadan: shows days, hours, and minutes until the first day.
• During Ramadan: switches to a live countdown to today's Maghrib (Iftar).
• At Iftar: shows a "time to break fast" message.
• After Eid: counts down to next year's Ramadan.

Theme it

<div data-ummahapi="ramadan"
     data-lat="40.71" data-lng="-74"
     data-theme="dark"></div>

Three themes: dark, light, cream.

Build it yourself

If the widget styles do not match your site, build the same thing from the API. Two endpoints do all the work.

Step 1. When does Ramadan start?

// Returns the Gregorian date of next Ramadan 1
const r = await fetch('https://ummahapi.com/api/islamic-events?event=ramadan');
const { date } = await r.json();
// e.g. "2027-02-08"

Step 2. Today's Maghrib (for Iftar)

const p = await fetch(
  'https://ummahapi.com/api/prayer-times?lat=40.71&lng=-74'
);
const { times } = await p.json();
// times.maghrib = "19:50"

Step 3. The countdown

function tick(target) {
  const ms = target.getTime() - Date.now();
  if (ms <= 0) return { done: true };
  const days = Math.floor(ms / 86400000);
  const hrs = Math.floor((ms % 86400000) / 3600000);
  const min = Math.floor((ms % 3600000) / 60000);
  const sec = Math.floor((ms % 60000) / 1000);
  return { days, hrs, min, sec, done: false };
}

setInterval(() => {
  const t = tick(new Date('2027-02-08T00:00:00'));
  document.querySelector('#countdown').textContent =
    `${t.days}d ${t.hrs}h ${t.min}m ${t.sec}s`;
}, 1000);

Suhoor (pre dawn) timer

If you want a Suhoor cutoff, count to times.fajr from the same prayer times response. Some apps use Imsak (a few minutes before Fajr) as a buffer.

// Use Imsak instead of Fajr for a 10 minute buffer
const { times } = await (await fetch(
  'https://ummahapi.com/api/prayer-times?lat=40.71&lng=-74'
)).json();

const [h, m] = times.imsak.split(':').map(Number);
const target = new Date(); target.setHours(h, m, 0, 0);

FAQ

When does Ramadan start in 2027?

Monday, February 8, 2027 (estimated, depends on moon sighting). Use the API for an always current answer.

Can I show fasting hours?

Yes. Subtract today's Fajr from today's Maghrib in the prayer times response.

Will the countdown work in WordPress?

Yes. Paste the two line widget into a Custom HTML block.