Islamic Prayer Time Plugin For jQuery
File Size: | 6.97 KB |
---|---|
Views Total: | 1578 |
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.