Jewish Calendar
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',
},
eventDisplay: 'block',
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.key === 'ArrowLeft' && !e.metaKey) {
calendar.prev();
} else if (e.key === 'ArrowRight' && !e.metaKey) {
calendar.next();
}
});
});
hebcal-styles.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
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;
}
index.html
Jewish Calendar
