Skip to content

Instantly share code, notes, and snippets.

@mjradwin

mjradwin/index.html

Last active October 5, 2023 04:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mjradwin/7145590367c8b88a194f8da5e9a8d325 to your computer and use it in GitHub Desktop.
Save mjradwin/7145590367c8b88a194f8da5e9a8d325 to your computer and use it in GitHub Desktop.
Download ZIP
Hebcal FullCalendar client-side. Uses the Hebcal JS API to determine holidays and candle-lighting times
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jewish Calendar</title>
<style>
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: 0.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: 0px;
color: #999;
}
.fc-event.omer a {
background-color: #fff;
border: 0px;
color: #999;
}
.fc-event.omer a:hover,
.fc-event.omer a:focus {
color: #666;
}
.fc-event.mishnayomi,
.fc-event.mishnayomi a {
background-color: #fff;
border: 0px;
color: #257e4a;
}
.fc-event.mishnayomi a:hover,
.fc-event.mishnayomi a:focus {
color: #15713b;
}
.fc-event.dafyomi,
.fc-event.dafyomi a {
background-color: #fff;
border: 0px;
color: #08c;
}
.fc-event.dafyomi a:hover,
.fc-event.dafyomi a:focus {
color: #005580;
}
.fc-event.holiday,
.fc-event.holiday.timed {
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.holiday.timed.fast {
background-color: #fff;
border: 0px;
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 {
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-time {
direction: ltr;
unicode-bidi: bidi-override;
}
.fc-event-time,
.fc-event-title {
padding: 0 1px;
white-space: normal;
}
</style>
</head>
<body>
<div id="calendar"></div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js" integrity="sha384-wv6yRjQC0TqzEnAjFQVXM2V0JrF6Nk0dh6QAGf1RwzTqPArdwU3luBZjVCi2YSVH" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@hebcal/core@4.4.0/dist/bundle.min.js" integrity="sha384-aW6F4TQ7xIZcSv+Hvsjvx5fex5D1krmHykmJrghaUNUJwR58lVg5sc4vX10cLCkC" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const location = new hebcal.Location(36.16589, -86.78444, false, "America/Chicago", "Nashville, Tennessee");
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'title',
right: 'prev,next today',
},
timeZone: 'local',
eventDisplay: 'block',
events: function(info, successCallback, failureCallback) {
const events0 = hebcal.HebrewCalendar.calendar({
start: info.start,
end: info.end,
isHebrewYear: false,
candlelighting: true, // remove if you don't want candle-lighting times
location: location, // remove if you don't want candle-lighting times
il: location.getIsrael(),
sedrot: true,
omer: true,
addHebrewDates: true,
});
const fcEvents = events0.map((ev) => {
const classes = ev.getCategories();
if (classes[0] === 'holiday' && (ev.getFlags() & hebcal.flags.CHAG)) {
classes.push('yomtov');
}
let title = ev.renderBrief('en');
const emoji = ev.getEmoji();
if (emoji) {
title += '\u00a0' + emoji;
}
const apiObj = {
title: title,
start: ev.eventTime || ev.getDate().greg(),
allDay: !ev.eventTime,
className: classes.join(' '),
};
const url = ev.url();
if (url) {
apiObj.url = url;
}
return apiObj;
});
successCallback(fcEvents);
},
});
calendar.render();
// optional: move calendar forward/backward by a month with arrow keys
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