Hebcal + FullCalendar with a function to modify JSON event feed
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Jewish Calendar</title> | |
<style> | |
html, body { | |
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; | |
font-size: 14px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="calendar"></div> | |
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.0.3/index.global.min.js"></script> | |
<script> | |
document.addEventListener('DOMContentLoaded', function() { | |
var calendarEl = document.getElementById('calendar'); | |
var calendar = new FullCalendar.Calendar(calendarEl, { | |
headerToolbar: { | |
left: 'title', | |
right: 'prev,next today', | |
}, | |
eventDisplay: 'block', | |
events: function(info, successCallback, failureCallback) { | |
var url = new URL('https://www.hebcal.com/hebcal'); | |
var sp = url.searchParams; | |
sp.set('v', '1'); // Required, version 1 | |
sp.set('cfg', 'fc'); // Required, mode = FullCalendar | |
sp.set('start', info.startStr); | |
sp.set('end', info.endStr); | |
sp.set('i', 'off'); // Israel or Diaspora holiday schedule | |
sp.set('maj', 'on'); // Major holidays | |
sp.set('min', 'on'); // Minor holidays | |
sp.set('nx', 'on'); // Rosh Chodesh | |
sp.set('mf', 'on'); // Minor fasts | |
sp.set('ss', 'on'); // Special Shabbatot | |
sp.set('mod', 'on'); // Modern holidays | |
sp.set('s', 'on'); // Weekly Torah portion on Saturdays | |
sp.set('o', 'off'); // Days of the Omer | |
sp.set('D', 'off'); // Show Hebrew date for dates with some event | |
sp.set('lg', 's'); // Sephardic transliterations | |
// sp.set('geonameid', 3448439); // Candle-lighting, Havdalah, and Fast times | |
var fetchOptions = { | |
method: 'GET', | |
credentials: 'omit', | |
mode: 'cors', | |
}; | |
fetch(url.href, fetchOptions).then(function(fetchRes) { | |
if (fetchRes.ok) { | |
fetchRes.json().then(function(parsedResponse) { | |
var events = parsedResponse.map(function(ev) { | |
// Modify ev as desired | |
return ev; | |
}); | |
successCallback(events); | |
}, function(err) { | |
failureCallback(err); | |
}); | |
} else { | |
failureCallback('Request failed'); | |
} | |
}).catch(function(err) { | |
failureCallback(err); | |
}); | |
} | |
}); | |
calendar.render(); | |
// optional: bind keyboard left/right arrow keys to move calendar forward/backward by a month | |
document.addEventListener('keydown', function(e) { | |
if (e.key === 'ArrowLeft' && !e.metaKey) { | |
calendar.prev(); | |
} else if (e.key === 'ArrowRight' && !e.metaKey) { | |
calendar.next(); | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment