Skip to main content

Display a Jewish Calendar on your website with Hebcal + FullCalendar.io

Posted on by

To display a Jewish calendar on your website, you can use event data from Hebcal.com and the open source JavaScript event calendar from fullcalendar.io.

Here’s a quick template to give you an idea of how to edit the HTML on your site.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Jewish Calendar</title>
<link href="hebcal-styles.css" rel="stylesheet">
</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>
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      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: 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>

Note on line 9 we use the CDN-hosted FullCalendar JavaScript. If you want to self-host the FullCalendar, you can do so following the FullCalendar Basic Usage instructions.

Note lines 18-22 where we specify the FullCalendar events configuration. We use a url on line 20 that fetches events from Hebcal. You can make other changes such as enabling candle-lighting times, Daf Yomi, etc and changing the event display language (default Sephardic transliterations). See the Jewish calendar REST API documentation for full details on what each parameter means. Remember to use cfg=fc for the FullCalendar format.

You won’t need to specify a year=YYYY parameter, as the fullcalendar.io script automatically sends start=YYYY-MM-DD and end=YYYY-MM-DD parameters for you.

For best performance, be sure to use cache: true (line 21).

If you’d like to include candle-lighting times for Shabbat and holidays, be sure to adjust the url parameter to include c=on and one of the location fields (such as geonameid=3448439 for São Paulo, Brazil).

We recommend some specific styles to make the page look prettier:

/*! 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);
}