- Upload the
hydrogen-calendar-embeds folder to the /wp-content/plugins/ directory.
- Activate
Hydrogen Calendar Embeds through the ‘Plugins’ menu in WordPress dashboard.
- Add the Hydrogen Calendar Embeds block to your page or post
- 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.
