Islamic Prayer Time Plugin For jQuery

Islamic Prayer Time Plugin For jQuery
File Size: 6.97 KB
Views Total: 90
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.