📅 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.

Adding zmanim (halachic times)

Set data-location-id to a US zip code to show daily zmanim from Chabad.org. 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).

<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 (the API returns a default for each). 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": "Magen Avraham",
    "Tzeis": "Rabeinu Tam"
  }'
></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 API default opinion automatically.

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 HTTPS URLs are accepted.

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": "Rabeinu Tam"}'
  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>