Highlight particular day in time table

I need to highlight every Friday in this time table just like this one http://moskeebadr.nl/index.php/gebedstijden for example as you can see they have highlighted every friday

my html

<!DOCTYPE html>
    <title> Monthly Prayer Timetable </title>
        body, tr, form {font-family: tahoma; font-size: 12px; color: #404040; text-align: center; margin: 0; padding: 0}
        pre {font-family: courier, serif, size: 10pt; margin: 0px 8px;}
        input {font-size: 12px;}
        .header {background:#eef; border-bottom: 1px solid #ddd; padding: 7px;}
        .caption {font-size: 20px; color: #d95722; text-align: center; width: 10em;}
        .arrow {font-weight: bold; text-decoration: none; color: #3D3D3D; }
        .arrow:hover {text-decoration: underline;}
        .command {font-weight: bold; text-decoration: none; color: #AAAAAA; }
        .command:hover {text-decoration: underline;}
        .timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; margin: 0 auto;}
        .timetable td {border-width: 1px; border-spacing: 1px; padding: 1px; border-style: inset; border-color: #CCCCCC;}
        .head-row {color: black; background-color: #eef;}
        .today-row {background-color: #F8F7F4; color: black}


<script type="text/javascript" src="PrayTimes.js"></script>

<div class="header">
<form class="form" action="javascript:update();">
    <select id="location" size="1" style="font-size: 12px;" onchange="update();">
           <option value="52.379189:4.899431:+01" selected="selected">Amsterdam</option>
           <option value="33.4484:-112.0740:-07">Phoenix</option>
           <option value="40.748817:-73.985428:-05">New York</option>
    <select id="dst" size="1" style="font-size: 12px;" onchange="update()">
        <option value="auto" selected="selected">Auto</option>
        <option value="0">0</option>
        <option value="1">1</option>
    <select id="method" size="1" style="font-size: 12px;" onchange="update()">
        <option value="MWL" selected="selected">Muslim World League (MWL)</option>
        <option value="ISNA">Islamic Society of North America (ISNA)</option>
        <option value="Egypt">Egyptian General Authority of Survey</option>
        <option value="Makkah">Umm al-Qura University, Makkah</option>
        <option value="Karachi">University of Islamic Sciences, Karachi</option>
        <option value="Jafari">Shia Ithna-Ashari (Jafari)</option>
        <option value="Tehran">Institute of Geophysics, University of Tehran</option>
<table align="center">
    <td><a href="javascript:displayMonth(-1)" class="arrow">&lt;&lt;</a></td>
    <td id="table-title" class="caption"></td>
    <td><a href="javascript:displayMonth(+1)" class="arrow">&gt;&gt;</a></td>

<table id="timetable" class="timetable">

<div align="center" style="margin-top: 7px">
    Source: <a href="http://praytimes.org/" class="command">PrayTimes.org</a> |
    Time Format: <a id="time-format" href="javascript:switchFormat(1)" title="Change clock format" class="command"></a>

<script type="text/javascript">

    var currentDate = new Date();
    var timeFormat = 1; 

    // display monthly timetable
    function displayMonth(offset) {
        var details = [];
        var val = document.getElementById("location").value;
        details = val.split(":"); 
        var lat = details[0];
        var lng = details[1];
        var timeZone = details[2];
        var dst = $('dst').value;
        var method = $('method').value;

        currentDate.setMonth(currentDate.getMonth()+ 1* offset);
        var month = currentDate.getMonth();
        var year = currentDate.getFullYear();
        var title = monthFullName(month)+ ' '+ year;
        $('table-title').innerHTML = title;
        makeTable(year, month, lat, lng, timeZone, dst);

    // make monthly timetable
    function makeTable(year, month, lat, lng, timeZone, dst) {        
        var items = {day: 'Day', fajr: 'Fajr', sunrise: 'Sunrise', 
                    dhuhr: 'Dhuhr', asr: 'Asr', // sunset: 'Sunset', 
                    maghrib: 'Maghrib', isha: 'Isha'};
        var tbody = document.createElement('tbody');
        tbody.appendChild(makeTableRow(items, items, 'head-row'));

        var date = new Date(year, month, 1);
        var endDate = new Date(year, month+ 1, 1);
        var format = timeFormat ? '24h' : '12hNS';

        while (date < endDate) {
            var times = prayTimes.getTimes(date, [lat, lng], timeZone, dst, format);
            times.day = date.getDate();
            var today = new Date(); 
            var isToday = (date.getMonth() == today.getMonth()) && (date.getDate() == today.getDate());
            var klass = isToday ? 'today-row' : '';
            tbody.appendChild(makeTableRow(times, items, klass));
            date.setDate(date.getDate()+ 1);  // next day

    // make a table row
    function makeTableRow(data, items, klass) {
        var row = document.createElement('tr');
        for (var i in items) {
            var cell = document.createElement('td');
            cell.innerHTML = data[i];
            cell.style.width = i=='day' ? '2.5em' : '3.7em';
        row.className = klass;
        return row;        

    // remove all children of a node
    function removeAllChild(node) {
        if (node == undefined || node == null)

        while (node.firstChild)

    // switch time format
    function switchFormat(offset) {
        var formats = ['12-hour', '24-hour'];
        timeFormat = (timeFormat+ offset)% 2;
        $('time-format').innerHTML = formats[timeFormat];

    // update table
    function update() {

    // return month full name
    function monthFullName(month) {
        var monthName = new Array('January', 'February', 'March', 'April', 'May', 'June', 
                        'July', 'August', 'September', 'October', 'November', 'December');
        return monthName[month];

    function $(id) {
        return document.getElementById(id);



and the javascript that is used for the time table.

any idea what i should be editing to make this work.

That code you posted doesn’t generate any data in the table (so far as I can see). Anyhow, the one you linked to styles each Friday row with some simple CSS:

#friday-row {
    color: #000000;
    background-color: #ECECEC;

That code is invalid, though, in the sense that the id is used multiple times on the page, so it really should be a class instead.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.