praytime
Version:
A JavaScript library for calculating prayer times.
150 lines (126 loc) • 4.78 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>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.6.0/build/global/luxon.min.js"></script>
</head>
<body>
<div class="header">
<form class="form" action="javascript:update();">
Latitude: <input type="text" value="43.5" id="latitude" size="4" onchange="update();">
Longitude: <input type="text" value="-80.5" 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>
</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://praytime.info">PrayTime.info</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 DateTime = luxon.DateTime;
const currentDate = new Date();
let timeFormat = 0;
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]).format(format);
currentDate.setMonth(currentDate.getMonth() + 1 * offset);
const month = currentDate.getMonth();
const year = currentDate.getFullYear();
const monthName = currentDate.toLocaleString('en-US', { month: 'long' });
$('table-title').innerHTML = monthName + ' ' + year;
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) {
praytime.utcOffset(getOffset(timezone, date));
const times = praytime.times(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();
}
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 getOffset(timezone, date) {
return DateTime.fromJSDate(date).setZone(timezone).offset;
}
function update() {
displayMonth(0);
}
function $(id) {
return document.getElementById(id);
}
</script>
</body>
</html>