Islamic Prayer Time Plugin For jQuery

A tiny jQuery plugin that gets accurate prayer times from api.aladhan.com and displays them to users based on their location.

Useful for those Muslims who live in non-Islamic countries and cannot hear adhan (or azan) - the call to prayer - 5 times a day.

Features:

• Supports both English and Arabic.
• Stores data in local storage to prevent too many requests.
• 14 prayer times calculation methods.
• 2 Asr calculation methods.
• 24-hour or 12-hour formats.
• Custom output HTML.

How to use it:

1.Include the minified version of the jQuery Prayer Times plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.prayer.times.min.js"></script>

2. Initialize the plugin on the container element in which you want to display the Prayer Times.

<div class="prayer-times-container"></div>

$(function(){
  $('.prayer-times-container').prayerTimes();
});

3. Change the language to 'Arabic'. Default: English.

$('.prayer-times-container').prayerTimes({
  arabic: true
});

4. Determine the prayer times calculation method. Default: 4.

• 1: University of Islamic Sciences, Karachi
• 2: Islamic Society of North America (ISNA)
• 3: Muslim World League
• 4: Umm Al-Qura University, Makkah
• 5: Egyptian General Authority of Survey
• 7: Institute of Geophysics, University of Tehran
• 8: Gulf Region
• 9: Kuwait
• 10: Qatar
• 11: Majlis Ugama Islam Singapura, Singapore
• 12: Union Organization islamic de France
• 13: Diyanet İşleri Başkanlığı, Turkey
• 14: Spiritual Administration of Muslims of Russia

$('.prayer-times-container').prayerTimes({
  method: 4
});

5. Determine the Asr calculation method. Default: 0.

• 0: Shafei
• 1: Hanafi

$('.prayer-times-container').prayerTimes({
  school: 1
});

6. Specify the city/country name. Default: null (auto detection).

$('.prayer-times-container').prayerTimes({
  country: 'SA',
  city: 'Mecca',
});

7. Determine whether to show the imsak, sunrise, sunset, and midnight times. Default: true.

$('.prayer-times-container').prayerTimes({
  imsak: true,
  sunrise: true,
  sunset: true,
  midnight: true,
});

8. Switch between 24-hour and 12-hour formats. Default: true.

$('.prayer-times-container').prayerTimes({
  militaryTime: false
});

9. Customize the output HTML: 'table'(default) or 'ul'.

$('.prayer-times-container').prayerTimes({
  outputEl: 'ul'
});

---

This awesome jQuery plugin is developed by MuhammadMabrouk. For more Advanced Usages, please check the demo page or visit the official website.