Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hebcal + FullCalendar with a function to modify JSON event feed
<!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