Hydrogen Calendar Embeds

Ìgbéwọlẹ̀

1. Upload the hydrogen-calendar-embeds folder to the /wp-content/plugins/ directory.
2. Activate Hydrogen Calendar Embeds through the ‘Plugins’ menu in WordPress dashboard.
3. Add the Hydrogen Calendar Embeds block to your page or post
4. Or use the shortcode directly

Shortcode Options (also available via block settings UI)

(Migrating from Pretty Google Calendar? Just replace pretty_google_calendar with hydrogen_calendar_embeds, and swap gcal=id with ics=ics_url in your shortcodes. All other options remain the same.)

Shortcode format is:

[hydrogen_calendar_embeds ics="ICS_URL, ICS_URL, ..." other_option="value" ... ]

Where the options are:

ics="https://example.com/calendar.ics"

Public ICS/iCal feed URL(s). Works with any standard ICS feed: Google Calendar, iCloud, Outlook, Nextcloud, Teamup, corporate Exchange servers, and more. Multiple ICS feeds can be comma-separated. The plugin fetches the ICS data server-side to avoid CORS issues.

cal_ids="identifier,identifier"

Optional custom CSS identifiers for each calendar. Allows using meaningful names instead of numeric indexes for styling. Example: cal_ids="soccer,baseball" generates classes like .hycal-calendar-soccer and .hycal-calendar-baseball. Identifiers should be lowercase alphanumeric with hyphens.
Defaults to numeric indexes (0, 1, 2, etc.)

locale="en"

Sets the locale for calendar. Defaults to “en”.

views="dayGridMonth, listMonth"

Sets the view types available. If only one view is provided, no view switch buttons will be shown. Defaults to “dayGridMonth, listMonth”.

Available views: dayGridMonth (monthly grid), listDay, listWeek, listMonth, listYear (list views), and listCustom (custom duration list).

Tip: listCustom allows you to set the number of days you want to display from the current date. Whereas listMonth shows all events from this month (including past events), using views="dayGridMonth, listCustom" custom_days="28" will show the next 28 days across months.

custom_days="28"

Sets the number of days to show when using listCustom view. Defaults to “28”.

custom_list_button="list"

Sets the button label for the listCustom view. Defaults to “list”.

initial_view="dayGridMonth"

Sets the default view to be displayed when opening the page. Defaults to “dayGridMonth”. Note: If only one view is specified in “views”, “initial_view” will automatically be set to that view and does not need to be specified.

enforce_listview_on_mobile="true"

Sets the change to the list view behavior on small screens. Options: “true” and “false”. Defaults to “true”. This option has no effect if there is no list view declared in the “views” option.

mobile_breakpoint="768"

Sets the screen width (in pixels) at which the calendar switches to list view on mobile. Defaults to “768”. Only used when enforce_listview_on_mobile is enabled.

show_today_button="true"

Sets the visibility of the “Today” button. Options: “true” and “false”. Defaults to “true”.

show_title="true"

Sets the visibility of the calendar title. Options: “true” and “false”. Defaults to “true”.

hide_past="false"

Hides past events from the calendar completely. Options: true and false. Defaults to false. When set to true, events before today will not be displayed in any view.

instance_id=random

Sets the ID hash for a calendar. If you have multiple calendars on a page and need to style them, you can set this to a permanent code. Otherwise, it’ll randomly generate each load. (Note: this can only be alphanumeric.)

use_tooltip="true"

Migrating from global setting for individual calendar styling. Whether the floating tooltip for event pops up on click.

no_link="true"

Migrating from global setting for individual calendar styling. Whether to disable link to calendar.google.com on click.

fc_args = JSON string ((EXPERIMENTAL))

Allows you to override or implement just about any FullCalendar argument (with some exception). For example: fc_args='{"weekNumbers":"true", "eventTextColor":"red"}'

Workaround for square brackets: WordPress shortcode parsing breaks with square brackets []. To use square brackets in your JSON, use URL-encoded brackets:
– [ becomes %5B
– ] becomes %5D

Example: fc_args='{"eventSources":%5B"url"%5D}' will be converted to {"eventSources":["url"]}

Note: this is experimental – things may break.