📅 Calendar Widget

Embed a full monthly calendar into any website (Squarespace, Wix, WordPress, plain HTML) with a single <script> tag. Shows your EasyShul events, Hebrew dates, halachic times (zmanim), and additional calendar subscriptions — all merged into one view.

🛠️ Code generator

Fill in the options below and copy the generated HTML snippet.

Generated code

Quick start

Paste this into your page's HTML:

<div id="es-calendar"></div>
<script src="{base}/embed/calendar.js"
  data-org="mercazseattle"
></script>

That's it! The widget renders a monthly calendar grid with your EasyShul events. Click any day to see event details.

Molad on Shabbat Mevarchim

Set data-show-molad="true" to show the upcoming month's molad announcement on its Shabbat Mevarchim Saturday, in the month cell and day detail. It is off by default and needs no zip code or solar times. Set data-molad-locale="en" (default) or "he" independently of data-hebrew-locale; this does not change the language of other Hebcal content. If a configured zip code cannot be resolved, announcement loading retries without location parameters. Calendar cells, day details, and molad printing do not require successful location lookup.

The weekday, hours, minutes, and chalakim are the traditional molad announcement, not a local civil-time instant or an astronomical new-moon prediction. They are not converted into the browser's or zip code's time zone. Each announcement includes a localized attribution link to Hebcal. If Shabbat Mevarchim is known but structured details are missing, the heading remains with a localized Molad details unavailable notice. An announcement-source failure is reported rather than treated as a month with no announcement.

The Today Widget instead uses the configured location's Friday sunset through Saturday havdalah window, with an explicitly marked Saturday-only fallback when no zip code is configured.

Printing the calendar

Click Print beside Today to print the month currently displayed. Choose Monthly grid for a landscape calendar, or Daily agenda for a portrait list of dates, events, and times. These two layouts include all events, including subscribed calendars, without the on-screen three-event limit. Choose Zmanim table for a landscape table with dates as rows and selected zmanim as columns, without events.

The print dialog has its own zmanim checklist with Select all and Clear all. Any supported zman can be selected, including candle lighting, Shabbat/holiday end times, and fast start/end times. Unchecked times are not automatically added back. Initially, the checklist includes the calendar's configured day-detail and month-cell zmanim plus enabled automatic times. Clear all to print without zmanim. Choices are remembered within this widget until the page is reloaded and never change the on-screen calendar.

The separate Include molad checkbox initially matches data-show-molad, then remembers your print-only choice within this widget until the page is reloaded. It can enable molad for printing even when molad is hidden on screen. Monthly grid and Daily agenda print announcements on their Saturdays, using data-molad-locale and the Hebcal attribution. No zip code, sunset, or havdalah lookup is needed. The checkbox is disabled for Zmanim table without losing its saved choice.

Printing uses the configured data-location-id, Israel/diaspora schedule, opinion overrides, and havdalah-from-Tzeis setting. You can select print zmanim even when data-hide-zmanim="true"; the checklist starts empty in that case. Without a location, zmanim selection is disabled, but calendar-only printing is still available. Hebrew dates follow the calendar's display settings in all three layouts. Parsha, holidays, and Omer follow those settings in the monthly grid and daily agenda only.

Choose Preview, then Print / Save as PDF to open the browser's print dialog. Only the calendar is printed, not the surrounding website. Large selections can span multiple pages rather than being truncated; the agenda layout is best for many zmanim or busy calendars. Changing a layout or selection requires a new preview. Close the dialog with Cancel, Escape, or a click outside it.

Zmanim table layout

The Zmanim table (landscape) layout has one row for each date in the displayed month. The first column shows the weekday, Gregorian date, and Hebrew date when enabled. Each selected zman gets a separate column, in checklist order, with English and Hebrew headings. The existing location, schedule, and opinion settings still apply.

All selected columns stay together on the page. Text becomes smaller for larger selections; columns are never split into separate groups or omitted. Date rows may continue onto additional pages, with column headings repeated. Review the preview before printing, especially when selecting many zmanim.

A dash means an occasional time, such as candle lighting or a fast start, does not apply on that date. Unavailable means data is missing, not that the time does not apply; warnings and acknowledgement are still required for incomplete data. Clear all produces a date-only table, which also works without a location. This layout does not load events or subscribed calendars, so problems with those sources cannot block it. It excludes parsha, holidays, Omer, and molad to keep the table focused on dates and the selected zmanim. It makes no extra molad requests, even if Include molad is saved as checked.

Adding zmanim (halachic times)

Set data-location-id to a US zip code to show daily zmanim from Hebcal. The day detail panel will include sunrise, sunset, and other times.

<div id="es-calendar"></div>
<script src="{base}/embed/calendar.js"
  data-org="mercazseattle"
  data-location-id="98115"
></script>

Selecting which zmanim to show

No zmanim are shown by default. Use data-zmanim to choose which ones to display. Set it to "all" to show all 13 zmanim types. Candle lighting, Shabbat/holiday end times, and fast start/end times are auto-included when present (controlled by data-auto-candles, data-auto-havdalah, and data-auto-fasts). Setting these attributes to false disables implicit inclusion even when data-zmanim is omitted. Explicit selections, including "all", still include the selected types.

<script src="{base}/embed/calendar.js"
  data-org="mercazseattle"
  data-location-id="98115"
  data-zmanim='["AlosHashachar","NetzHachamah","LatestShema","Chatzos","MinchahGedolah","Shkiah","Tzeis"]'
></script>

Available ZmanTypes

Choosing a halachic opinion

Each zman can have multiple halachic opinions (Hebcal provides a default for each — the Baal HaTanya / Alter Rebbe variant where available). Use data-zmanim-opinions to override which opinion is shown per zman type. The value is a JSON object mapping ZmanType to the opinion name.

<script src="{base}/embed/calendar.js"
  data-org="mercazseattle"
  data-location-id="98115"
  data-zmanim-opinions='{
    "LatestShema": "MGA",
    "Tzeis": "Rabbeinu Tam (72 min)"
  }'
></script>

Common opinion names

If a specified opinion is not found for a given day (e.g. edge cases), the widget falls back to the default opinion automatically.

Migrating from the old Chabad opinion names

Earlier versions of the widget sourced zmanim from Chabad.org and used different data-zmanim-opinions strings. The ZmanType keys are unchanged, but the opinion values are different now. Use this table to translate an existing configuration. Rows marked ≈ are close but not identical (see the note).

The Baal HaTanya / Gra / Rabbeinu Tam and degree-based Tzeis mappings match the old Chabad times to within ±1 minute year-round (verified summer & winter for Seattle). ≈ Magen Avraham: Chabad's Magen Avraham used a ~16.1° depression, while Hebcal's MGA label uses its 90-minute/deeper-angle definition, so MGA-based Shema/Tefillah/Mincha times differ by roughly 30+ minutes — pick deliberately. Single-time zmanim (Sunrise, Chatzos, Sunset, Midnight) take no opinion.

External calendar subscriptions

Merge events from other iCal calendars (Google Calendar, Outlook, etc.) into the same view. Each subscription needs a name, URL, and color.

<script src="{base}/embed/calendar.js"
  data-org="mercazseattle"
  data-subscriptions='[
    {"name": "Google", "url": "https://calendar.google.com/calendar/ical/.../basic.ics", "color": "#e67c73"},
    {"name": "Outlook", "url": "https://outlook.office365.com/owa/calendar/.../calendar.ics", "color": "#0078d4"}
  ]'
></script>

External calendars are fetched via the server's /api/ical-proxy endpoint to avoid CORS issues. Only public HTTPS destinations without URL credentials are accepted, including every redirect destination. Private and reserved IP addresses are blocked. Requests have a 15-second total timeout and allow up to 20 redirects.

Full example

<div id="es-calendar"></div>
<script src="{base}/embed/calendar.js"
  data-org="mercazseattle"
  data-location-id="98115"
  data-zmanim='["NetzHachamah","LatestShema","Chatzos","PlagHaminchah","Shkiah","Tzeis"]'
  data-zmanim-opinions='{"Tzeis": "Rabbeinu Tam (72 min)"}'
  data-subscriptions='[{"name": "Community", "url": "https://example.com/community.ics", "color": "#43a047"}]'
  data-accent-color="#2555ef"
  data-max-width="800px"
  data-hebrew-locale="he"
></script>

Customization reference

Squarespace integration

1. In your Squarespace editor, click + → Code to add a Code Block.
2. Switch the display to HTML.
3. Paste the code snippet above (with your org key and zip code).
4. Click Apply and Save.

The calendar renders inline inside the code block — no iframe needed.

CSS overrides

All widget elements are scoped under the .es-calendar class. You can add custom CSS in your page to tweak any aspect:

<style>
/* Wider cells on desktop */
.es-cal-day { min-height: 100px; }

/* Larger Hebrew dates */
.es-cal-hdate { font-size: 0.85em; }

/* Always show Hebrew on mobile */
@media(max-width:600px) {
  .es-cal-hdate { display: block !important; }
}
</style>