Display a Jewish Calendar on your website with Hebcal + FullCalendar.io
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> | |
<head> | |
<title>Jewish Calendar</title> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css"> | |
<link href="hebcal-styles.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div id="calendar"></div> | |
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script> | |
<script src="https://unpkg.com/@popperjs/core@2"></script> | |
<script src="https://unpkg.com/tippy.js@6"></script> | |
<script src='https://unpkg.com/@hebcal/core@3.33.3/dist/bundle.min.js'></script> | |
<script src='https://unpkg.com/@hebcal/leyning@4.12.1/dist/bundle.min.js'></script> | |
<script src='https://unpkg.com/@hebcal/rest-api@3.13.0/dist/bundle.min.js'></script> | |
<script> | |
document.addEventListener('DOMContentLoaded', function() { | |
const location = hebcal.Location.lookup('Tel Aviv'); | |
const calendarEl = document.getElementById('calendar'); | |
const calendar = new FullCalendar.Calendar(calendarEl, { | |
headerToolbar: { | |
left: 'title', | |
right: 'prev,next today', | |
}, | |
timeZone: location.getTzid(), | |
events: function(info, successCallback, failureCallback) { | |
const options = { | |
start: info.start, | |
end: info.end, | |
isHebrewYear: false, | |
candlelighting: true, | |
location: location, | |
il: false, | |
sedrot: true, | |
dafyomi: true, | |
omer: true, | |
locale: 'ashkenazi', | |
addHebrewDates: true, | |
}; | |
const events = hebcal.HebrewCalendar.calendar(options); | |
const fcEvents = events.map((ev) => { | |
const apiObj = hebcal__rest_api.eventToFullCalendar(ev, location.tzid); | |
if (ev.getFlags() & hebcal.flags.PARSHA_HASHAVUA) { | |
const reading = hebcal__leyning.getLeyningForParshaHaShavua(ev, options.il); | |
if (reading.summary) { | |
apiObj.description = `Torah: ${reading.summary}`; | |
} | |
if (reading.haftara) { | |
apiObj.description += `<br>Haftara: ${reading.haftara}`; | |
} | |
} | |
return apiObj; | |
}); | |
successCallback(fcEvents); | |
}, | |
eventDidMount: function(info) { | |
if (info.event.extendedProps.description) { | |
tippy(info.el, { | |
content: info.event.extendedProps.description, | |
allowHTML: true, | |
}); | |
} | |
}, | |
}); | |
calendar.render(); | |
// optional: move calendar forward/backward by a month with arrow keys | |
document.addEventListener('keydown', function(e) { | |
if (e.keyCode == 37) { | |
calendar.prev(); | |
} else if (e.keyCode == 39) { | |
calendar.next(); | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
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
document.addEventListener('DOMContentLoaded', function() { | |
var calendarEl = document.getElementById('calendar'); | |
var calendar = new FullCalendar.Calendar(calendarEl, { | |
headerToolbar: { | |
left: 'title', | |
right: 'prev,next today', | |
}, | |
events: { | |
// add &c=on&geonameid=[locationID] for candle-lighting times | |
url: "https://www.hebcal.com/hebcal?cfg=fc&v=1&i=off&maj=on&min=on&nx=on&mf=on&ss=on&mod=on&lg=s&s=on", | |
cache: true | |
} | |
}); | |
calendar.render(); | |
// optional: move calendar forward/backward by a month with arrow keys | |
document.addEventListener('keydown', function(e) { | |
if (e.keyCode == 37) { | |
calendar.prev(); | |
} else if (e.keyCode == 39) { | |
calendar.next(); | |
} | |
}); | |
}); |
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
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ | |
html, body { | |
margin: 0; | |
padding: 0; | |
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; | |
font-size: 14px; | |
} | |
#calendar { | |
max-width: 1000px; | |
margin: 40px auto; | |
} | |
a:hover .fc-event-title { | |
text-decoration: underline; | |
} | |
a:not([href]):hover .fc-event-title { | |
text-decoration: none; | |
} | |
.fc-event { | |
display: block; /* make the <a> tag block */ | |
font-size: .85em; | |
line-height: 1.3; | |
border-radius: 3px; | |
color: #fff; | |
border: 1px solid #3a87ad; /* default BORDER color */ | |
background-color: #3a87ad; /* default BACKGROUND color */ | |
margin: 1px 2px 0; /* spacing between events and edges */ | |
padding: 0 1px; | |
} | |
.fc-time { | |
font-weight: bold; | |
} | |
.fc-event a { | |
color: #fff; | |
} | |
.fc-event a:hover, | |
.fc-event a:focus { | |
color: #fff; | |
} | |
.fc-event.hebdate, .fc-event.hebdate .fc-event-title, | |
.fc-event.omer, .fc-event.omer .fc-event-title { | |
background-color:#FFF; | |
border: 1px solid #FFF; | |
color:#999; | |
} | |
.fc-event.dafyomi, | |
.fc-event.dafyomi a, | |
.fc-event.dafyomi .fc-event-title { | |
background-color:#FFF; | |
border: 1px solid #FFF; | |
color:#08c; | |
} | |
.fc-event.dafyomi a:hover, | |
.fc-event.dafyomi a:focus { | |
color: #005580; | |
} | |
.fc-event.mishnayomi, | |
.fc-event.mishnayomi a, | |
.fc-event.mishnayomi .fc-event-title { | |
background-color:#FFF; | |
border: 1px solid #FFF; | |
color:#257e4a; | |
} | |
.fc-event.mishnayomi a:hover, | |
.fc-event.mishnayomi a:focus { | |
color: #15713b; | |
} | |
.fc-event.holiday, | |
.fc-event.holiday .fc-event-title, | |
.fc-event.holiday.timed, | |
.fc-event.holiday.timed .fc-event-title { | |
background-color:#3a87ad; | |
border: 1px solid #3a87ad; | |
color:#FFF; | |
} | |
.fc-event.fast { | |
background-color:#fd7e14; | |
border: 1px solid #fd7e14; | |
color:#FFF; | |
} | |
.fc-event.timed, | |
.fc-event.timed .fc-event-title, | |
.fc-event.holiday.timed.fast, | |
.fc-event.holiday.timed.fast .fc-event-title { | |
background-color:#FFF; | |
border: 1px solid #FFF; | |
color:#333; | |
} | |
.fc-event.holiday.yomtov, | |
.fc-event.holiday.yomtov a, | |
.fc-event.holiday.yomtov .fc-event-title { | |
background-color:#ffd446; | |
border: 1px solid #ffd446; | |
color:#333; | |
} | |
.fc-event.parashat, | |
.fc-event.parashat .fc-event-title { | |
background-color:#257e4a; | |
border: 1px solid #257e4a; | |
color:#FFF; | |
} | |
.fc-event.roshchodesh { | |
background-color:#6f42c1; | |
border: 1px solid #6f42c1; | |
color:#FFF; | |
} | |
.fc-event.hebrew .fc-title { | |
font-family:'SBL Hebrew',David; | |
font-size:115%; | |
font-weight:normal; | |
direction:rtl; | |
} | |
.fc-event.hebrew .fc-time { | |
direction:ltr; | |
unicode-bidi: bidi-override; | |
} | |
.fc-event-time, .fc-event-title { | |
padding: 0 1px; | |
white-space: normal; | |
} | |
.fc .fc-event.fc-event-today .fc-event-title { | |
background-color: rgba(255,220,40,0.15); | |
} |
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> | |
<head> | |
<title>Jewish Calendar</title> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css"> | |
<link href="hebcal-styles.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div id="calendar"></div> | |
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.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', | |
}, | |
events: { | |
// add &c=on&geonameid=[locationID] for candle-lighting times | |
url: "https://www.hebcal.com/hebcal?cfg=fc&v=1&i=off&maj=on&min=on&nx=on&mf=on&ss=on&mod=on&lg=s&s=on", | |
cache: true | |
} | |
}); | |
calendar.render(); | |
// optional: bind keyboard left/right arrow keys to move calendar forward/backward by a month | |
document.addEventListener('keydown', function(e) { | |
if (e.keyCode === 37) { | |
calendar.prev(); | |
} else if (e.keyCode === 39) { | |
calendar.next(); | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment