You can use MPT jQuery plugin to display prayer times in your website. The plugin helps you to retrieve the prayer time data from the server and displays it in your own HTML element.



Shows the current prayer in Kubang Pasu. The event prayerChange is used to display the current prayer name and time.

Current Prayer in Kubang Pasu:

<div id="mpte">
    <span>Current Prayer in Kubang Pasu: </span>
    <span class="mpt-prayer"></span>
$('#mpte').bind('prayerChanged', function(e) {
  var prayerNames = ["Subuh", "Syuruk", "Zohor", "Asar", "Maghrib", "Isyak"];
  var time = e.currentPrayerTime.getHours() + ":" + e.currentPrayerTime.getMinutes();
  $('#mpte .mpt-prayer').html(prayerNames[e.currentPrayer] + ' (' + time + ')');
$('#mpte').mpt('getData', 'kdh-1');

Shows the prayer table in Kubang Pasu. Use .time in the element the time is displayed with the parent containing the class .mpt-prayer-#. The class .active is applied to parent element of the current prayer.

Subuh 88:88
Syuruk 88:88
Zohor 88:88
Asar 88:88
Maghrib 88:88
Isyak 88:88
<table id="mptf">
  <tr class="mpt-prayer-0">
    <td class="name">Subuh</td>
    <td class="time">88:88</td>
  <tr class="mpt-prayer-1">
    <td class="name">Syuruk</td>
    <td class="time">88:88</td>
  <tr class="mpt-prayer-2">
    <td class="name">Zohor</td>
    <td class="time">88:88</td>
  <tr class="mpt-prayer-3">
    <td class="name">Asar</td>
    <td class="time">88:88</td>
  <tr class="mpt-prayer-4">
    <td class="name">Maghrib</td>
    <td class="time">88:88</td>
  <tr class="mpt-prayer-5">
    <td class="name">Isyak</td>
    <td class="time">88:88</td>
$('#mptf').mpt('getData', 'kdh-1');

Shows the horizontal prayer table in Kubang Pasu. Use .mpt-prayer-#-time and .mpt-prayer-#-name in the element the time and name is displayed. The class .active is applied to the element of the current prayer containing .mpt-prayer-#-time and .mpt-prayer-#-name.

Subuh Syuruk Zohor Asar Maghrib Isyak
88:88 88:88 88:88 88:88 88:88 88:88
<table id="mptg">
    <td class="mpt-prayer-0-name">Subuh</td>
    <td class="mpt-prayer-1-name">Syuruk</td>
    <td class="mpt-prayer-2-name">Zohor</td>
    <td class="mpt-prayer-3-name">Asar</td>
    <td class="mpt-prayer-4-name">Maghrib</td>
    <td class="mpt-prayer-5-name">Isyak</td>
    <td class="mpt-prayer-0-time">88:88</td>
    <td class="mpt-prayer-1-time">88:88</td>
    <td class="mpt-prayer-2-time">88:88</td>
    <td class="mpt-prayer-3-time">88:88</td>
    <td class="mpt-prayer-4-time">88:88</td>
    <td class="mpt-prayer-5-time">88:88</td>


Options can be passed via JavaScript.

Name type default description
timeFormat function Returns the time in the format HH:MM.

The method used to format the prayer times. Accepts a single argument date which is a Date object. Returns a string of the formatted time. Example:

timeFormat: function (d) {
  var h = d.getHours();
  var m = d.getMinutes();
  return (h < 10  ? "0" + h : h)  + ":" + (m < 10  ? "0" + m : m);


$().mpt('getData', code)

Retrieves the prayer times data from the server. Requires a location code code. The event prayerChanged will be triggered when the prayer times data is successfully downloaded.

$('#mpt').mpt('getData', 'kdh-01');


Event Description
prayerChanged This event is fired when the prayer time has changed. To access the prayer index number, use event.currentPrayer or event.nextPrayer. To get the prayer time object use event.currentPrayerTime or event.nextPrayerTime
$('#mpt').bind('prayerChanged', function(e) {
  var prayerNames = ['Subuh', 'Syuruk', 'Zohor', 'Asar', 'Maghrib', 'Isyak'];
  $('#mpt .mpt-prayer-name').html(prayerNames[e.nextPrayer]); // Next prayer
  $('#mpt .mpt-prayer-time').html(e.nextPrayerTime); // Next prayer time