Skip to content

Instantly share code, notes, and snippets.

@mjradwin

mjradwin/client-side.html

Last active May 29, 2022
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Display a Jewish Calendar on your website with Hebcal + FullCalendar.io
Raw
client-side.html
<!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>
Raw
hebcal-fullcalendar.js
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();
}
});
});
Raw
hebcal-styles.css
/*! 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);
}
Raw
index.html
<!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