</script> <script" /> </script> <script" />

Get Middle East prayer timing using JavaScript Code

I have created a simple webpart to get QATAR local paryer timing using JavaScript code in SharePoint.

Get timing using JavaScript Code in SharePoint

Step 1: Open the SharePoint Online site where you want to display the time. and then add a script editor web part into the web part page.

Step 2: Add the below JavaScript code in your project.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<script>  
    var canvas;  
    var ctx;  
    var radius;  
    $(document).ready(function () {  
        canvas = document.getElementById("canvas");  
        ctx = canvas.getContext("2d");  
        radius = canvas.height / 2;  
        ctx.translate(radius, radius);  
        radius = radius * 0.90  
        setInterval(drawClock, 1000);          
    });  
  
    function drawClock() {  
        drawFace(ctx, radius);  
        drawNumbers(ctx, radius);  
        drawTime(ctx, radius);  
    }  
  
    function drawFace(ctx, radius) {  
        var grad;  
        ctx.beginPath();  
        ctx.arc(0, 0, radius, 0, 2 * Math.PI);  
        ctx.fillStyle = 'white';  
        ctx.fill();  
        grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);  
        grad.addColorStop(0, '#333');  
        grad.addColorStop(0.5, 'white');  
        grad.addColorStop(1, '#333');  
        ctx.strokeStyle = grad;  
        ctx.lineWidth = radius * 0.1;  
        ctx.stroke();  
        ctx.beginPath();  
        ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);  
        ctx.fillStyle = '#333';  
        ctx.fill();  
    }  
  
    function drawNumbers(ctx, radius) {  
        var ang;  
        var num;  
        ctx.font = radius * 0.15 + "px arial";  
        ctx.textBaseline = "middle";  
        ctx.textAlign = "center";  
        for (num = 1; num < 13; num++) {  
            ang = num * Math.PI / 6;  
            ctx.rotate(ang);  
            ctx.translate(0, -radius * 0.85);  
            ctx.rotate(-ang);  
            ctx.fillText(num.toString(), 0, 0);  
            ctx.rotate(ang);  
            ctx.translate(0, radius * 0.85);  
            ctx.rotate(-ang);  
        }  
    }  
  
    function drawTime(ctx, radius) {  
        var now = new Date();  
        var hour = now.getHours();  
        var minute = now.getMinutes();  
        var second = now.getSeconds();  
        //hour  
        hour = hour % 12;  
        hour = (hour * Math.PI / 6) +  
            (minute * Math.PI / (6 * 60)) +  
            (second * Math.PI / (360 * 60));  
        drawHand(ctx, hour, radius * 0.5, radius * 0.07);  
        //minute  
        minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));  
        drawHand(ctx, minute, radius * 0.8, radius * 0.07);  
        // second  
        second = (second * Math.PI / 30);  
        drawHand(ctx, second, radius * 0.9, radius * 0.02);  
    }  
  
    function drawHand(ctx, pos, length, width) {  
        ctx.beginPath();  
        ctx.lineWidth = width;  
        ctx.lineCap = "round";  
        ctx.moveTo(0, 0);  
        ctx.rotate(pos);  
        ctx.lineTo(0, -length);  
        ctx.stroke();  
        ctx.rotate(-pos);  
    }  
</script>  
  
<script>  
  
    $(document).ready(function () {  
        var settings = {  
            "async": true,  
            "crossDomain": true,  
            "url": "https://aladhan.p.mashape.com/timingsByCity?city=Doha&country=Qatar",  
            "method": "GET",  
            "headers": {  
                "x-mashape-key": "4seB9mx5g0mshrkpLviV9IsQKRYNp1cZ9n8jsn70KjeMIgrBxm"  
            }  
        }  
  
        $.ajax(settings).done(function (response) {  
            console.log(response);  
            //var responseObj = JSON.parse(response);  
            var d = new Date();  
            var n = d.getHours();  
            var m = d.getMinutes();  
            m = m / 60;  
            n = n+m;  
            if (n < 6) {  
                $('.prayer_laber ').text("Fajr");  
                $('.prayer_timing').text(response.data.timings.Fajr);  
            }  
            else if (n < 11 && n > 6) {  
                $('.prayer_laber').text("Dhuhr");  
                $('.prayer_timing').text(response.data.timings.Dhuhr);  
            }  
            else if (n < 14 && n > 11) {  
                $('.prayer_laber').text("Asr");  
                $('.prayer_timing').text(response.data.timings.Asr);  
            }  
            else if (n < 16 && n > 14) {  
                $('.prayer_laber').text("Maghrib");  
                $('.prayer_timing').text(response.data.timings.Maghrib);  
            }  
            else if (n < 20 && n > 16) {  
                $('.prayer_laber').text("Isha");  
                $('.prayer_timing').text(response.data.timings.Isha);  
            }  
        });  
    });  
</script>  

The output will appear like below:

get middle east prayer timing JavaScript

get middle east prayer timing JavaScript

You may like following JavaScript tutorials:

I hope this JavaScript tutorial explains how to get middle east prayer timing JavaScript code.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>