praytime
Version:
A JavaScript library for calculating prayer times.
156 lines (133 loc) • 5.06 kB
HTML
<html>
<head>
<title>Monthly Prayer Timetable</title>
<meta name="author" content="Hamid Zarrabi-Zadeh">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="../src/praytime.js"></script>
</head>
<body>
<div class="header">
<form class="form" action="javascript:update();">
Latitude: <input type="text" value="43.65" id="latitude" size="4" onchange="update();">
Longitude: <input type="text" value="-79.4" id="longitude" size="4" onchange="update();">
Time Zone: <select id="timezone" onchange="update();" style="width: 140px;"></select>
Method:
<select id="method" onchange="update()">
<option value="MWL">Muslim World League (MWL)</option>
<option value="ISNA" selected="selected">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="Tehran">Institute of Geophysics, University of Tehran</option>
<option value="Jafari">Leva Research Institute, Qum</option>
<option value="France">Muslims of France</option>
<option value="Russia">Spiritual Administration of Muslims of Russia</option>
<option value="Singapore">Islamic Religious Council of Singapore</option>
</select>
</form>
</div>
<table class="caption">
<tr>
<td><a href="javascript:displayMonth(-1)" class="arrow"><</a></td>
<td id="table-title"></td>
<td><a href="javascript:displayMonth(+1)" class="arrow">></a></td>
</tr>
</table>
<table id="timetable" class="timetable">
<tbody></tbody>
</table>
<div class="footer">
Source: <a href="https://praytimes.org">PrayTimes.org</a> |
Time Format: <a id="time-format" href="javascript:switchFormat()" title="Change clock format"></a>
</div>
<script type="text/javascript">
const praytime = new PrayTime();
const currentDate = new Date();
let timeFormat = 1;
initTimeZoneList();
switchFormat();
function displayMonth(offset) {
const lat = $('#latitude').value;
const lng = $('#longitude').value;
const timezone = $('#timezone').value;
const method = $('#method').value;
const format = timeFormat ? '12H' : '24h';
// set prayer times parameters
praytime.method(method).location([lat, lng]).timezone(timezone).format(format);
currentDate.setMonth(currentDate.getMonth() + offset);
const month = currentDate.getMonth();
const year = currentDate.getFullYear();
const monthName = currentDate.toLocaleString('en-US', { year: 'numeric', month: 'long' });
$('#table-title').innerHTML = monthName;
makeTable(year, month, timezone);
}
function makeTable(year, month, timezone) {
const items = {
day: 'Day', fajr: 'Fajr', sunrise: 'Sunrise',
dhuhr: 'Dhuhr', asr: 'Asr', maghrib: 'Maghrib', isha: 'Isha'
};
const tbody = document.createElement('tbody');
tbody.appendChild(makeTableRow(items, items, 'head-row'));
const date = new Date(year, month, 1);
const endDate = new Date(year, month + 1, 1);
while (date < endDate) {
const times = praytime.getTimes(date); // get prayer times
times.day = date.getDate();
const isToday = date.toDateString() === new Date().toDateString();
const cls = isToday ? 'today-row' : '';
tbody.appendChild(makeTableRow(times, items, cls));
date.setDate(date.getDate() + 1); // next day
}
$('#timetable').replaceChildren();
$('#timetable').appendChild(tbody);
}
function makeTableRow(data, items, cls) {
const row = document.createElement('tr');
for (let i in items) {
const cell = document.createElement('td');
cell.innerHTML = data[i];
cell.style.width = i == 'day' ? '2.5em' : '3.7em';
row.appendChild(cell);
}
row.className = cls;
return row;
}
function switchFormat() {
const formats = ['24-hour', '12-hour'];
timeFormat = (timeFormat + 1) % 2;
$('#time-format').innerHTML = formats[timeFormat];
update();
}
// format Unix timestamp
function formatTime(timestamp, format) {
var date = new Date(timestamp);
return date.toLocaleTimeString('en-US', {
hour: format == '24h' ? '2-digit' : 'numeric',
minute: '2-digit',
hour12: format == '24h' ? false : true,
timeZone: getCurrentTimezone()
});
}
function initTimeZoneList() {
const defaultZone = 'America/Toronto';
const timezones = Intl.supportedValuesOf("timeZone") || [defaultZone];
const selectElement = $('#timezone');
timezones.forEach((timezone) => {
const option = document.createElement('option');
option.value = timezone;
option.textContent = timezone;
if (timezone === defaultZone) { option.selected = true; }
selectElement.appendChild(option);
});
}
function update() {
displayMonth(0);
}
function $(selector) {
return document.querySelector(selector);
}
</script>
</body>
</html>