Ramadan Countdown Widget

A live Ramadan countdown for mosque, charity and community sites. Before the month it counts down to the expected 1 Ramadan and lists the first taraweeh night and Eid al-Fitr; during Ramadan it shows which day it is and the time left until Eid.

Time & Date Clock & time Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/ramadan-countdown" title="Ramadan Countdown by A2Z Tools" width="100%" height="540" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

The widget reads the visitor's own date and converts it to the Umm al-Qura Hijri calendar built into the browser (the CLDR islamic-umalqura calendar). If the Hijri month is before Ramadan (month 9), the target is 1 Ramadan of the same Hijri year; after Ramadan, 1 Ramadan of the next year. Those Hijri dates are turned back into Gregorian days by searching the same browser mapping, so the countdown, the dates listed and the Hijri date converter always agree. The count runs to 00:00 on the expected first fasting day in the visitor's own time zone and is recomputed from the clock every second, pausing while the frame is hidden. During Ramadan the widget shows Day N of 29 or 30 and counts down to 1 Shawwal, Eid al-Fitr. The first taraweeh prayer is on the evening before 1 Ramadan, because the Islamic day begins at sunset; the widget lists that evening separately.

Method

  • Today (visitor's date) -> Umm al-Qura y/m/d via Intl.DateTimeFormat('en-u-ca-islamic-umalqura')
  • Target year = y if m <= 9, else y + 1; 1 Ramadan and 1 Shawwal found by searching the same mapping
  • Remaining = local midnight of the target day - now, split into days, hours, minutes and seconds
  • Ramadan length = 1 Shawwal - 1 Ramadan (29 or 30 days)

Worked examples

Counting down on 1 October 2026

Inputs: Visitor's date 2026-10-01

Result: Ramadan 1448 expected Monday 8 February 2027 (29 days); Eid al-Fitr Tuesday 9 March 2027

Today is 20 Rabi al-Thani 1448, so the next Ramadan is in the same Hijri year.

During Ramadan 1447

Inputs: Visitor's date 2026-02-25

Result: Day 8 of 30; countdown to Eid al-Fitr on Friday 20 March 2026

1 Ramadan 1447 was 18 February 2026.

Expected dates from the calculated Umm al-Qura calendar. Where Ramadan and Eid are announced by moon sighting they can start a day earlier or later; follow your local mosque or authority.

Limitations

  • Dates follow the calculated Umm al-Qura calendar only; announced dates in moon-sighting countries can differ.
  • The countdown ends at local midnight, not at Maghrib or Fajr for a particular city.
  • Relies on the visitor's device clock and the browser's built-in calendar data; very old browsers show a notice instead.

Where publishers use it

  • Mosque homepages counting down to the first taraweeh
  • Zakat and charity appeal pages building momentum before Ramadan
  • Halal food brands and Iftar caterers timing their seasonal menus
  • Islamic school newsletters reminding families of the dates
  • Community radio and media sites running a Ramadan daily-programme banner

Questions

When does Ramadan 2027 start?

In the Umm al-Qura calendar, 1 Ramadan 1448 AH is expected on Monday 8 February 2027, so the first taraweeh is on the evening of Sunday 7 February; Ramadan 1448 has 29 days and Eid al-Fitr is expected on Tuesday 9 March 2027. Moon-sighting announcements can shift these by a day.

Why does the countdown end at midnight and not at sunset?

Midnight in the visitor's own time zone is the same for everyone on the page and does not need a location. The widget lists the first taraweeh night - the evening before - so readers know when the month actually begins.

Does it switch automatically during Ramadan?

Yes. From 1 Ramadan it shows Day N of Ramadan and counts down to Eid al-Fitr; on Eid it moves on to the next year's Ramadan.

Can I add my own heading?

Yes: add v_label=Ramadan%20at%20our%20masjid (up to 80 characters). The dates themselves always come from the calendar so they cannot be mistyped.

Why might my community start on a different day?

Many communities begin Ramadan only after the new crescent is seen locally or nationally. That can be one day after the calculated Umm al-Qura date, occasionally two. The widget states this on every page view.

Sources

  1. The Umm al-Qura Calendar of Saudi Arabia - R.H. van Gent, Utrecht University . Month-start table and rules; confirms 1 Ramadan 1447 = 18 February 2026 and 1 Ramadan 1448 = 8 February 2027. Checked 2026-10-01.
  2. Official Umm al-Qura calendar - Umm al-Qura calendar website, Saudi Arabia . The official calendar the expected dates follow. Checked 2026-10-01.
  3. CLDR BCP 47 calendar identifiers (calendar.xml) - Unicode CLDR . The islamic-umalqura calendar exposed by browsers' Intl API. Checked 2026-10-01.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Ramadan Countdown
https://a2z.tools/embed/ramadan-countdown

Related widgets

More Time & Date widgets →

  • Hijri Date Converter

    Time & Date Converter New

    Gregorian to Hijri and back on the Umm al-Qura calendar, with today's Hijri date and month length.

    Get code

  • Prayer Times

    Time & Date Calculator

    Fajr, Sunrise, Dhuhr, Asr, Maghrib and Isha for any place, with the major calculation methods.

    Get code

  • Countdown Timer

    Time & Date Clock & time

    Live days, hours, minutes and seconds to a date you set, with an "event has started" message.

    Get code

  • Moon Phase

    Time & Date Tool

    Today's Moon phase drawn to scale, with illumination, age and the next full and new moon.

    Get code

  • Age Calculator

    Time & Date Calculator

    Exact age in years, months and days, totals in months, weeks and days, and the next birthday.

    Get code

  • Time Zone Converter

    Time & Date Converter

    Convert a date and time between any two time zones, with daylight-saving gaps and overlaps explained.

    Get code

Preview

CustomizeGet code