Title: Hydrogen Calendar Embeds
Author: LBell
Published: <strong>2026 年 1 月 4 日</strong>
Last modified: 2026 年 1 月 8 日

---

搜索插件

![](https://ps.w.org/hydrogen-calendar-embeds/assets/icon.svg?rev=3432211)

# Hydrogen Calendar Embeds

 作者：[LBell](https://profiles.wordpress.org/lbell/)

[下载](https://downloads.wordpress.org/plugin/hydrogen-calendar-embeds.3.0.1.zip)

 * [详情](https://cn.wordpress.org/plugins/hydrogen-calendar-embeds/#description)
 * [评价](https://cn.wordpress.org/plugins/hydrogen-calendar-embeds/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/hydrogen-calendar-embeds/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/hydrogen-calendar-embeds/#developers)

 [支持](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/)

## 描述

This completely free, extremely light-weight plugin with explosive potential embeds**
ANY** iCal (.ics) calendar into your WordPress site using the beautiful, time-tested
FullCalendar library.

Nothing is hidden behind a “pro” upgrade. All features are free.

Works with any public ICS/iCal feed:
 – Google Calendar – iCloud – Outlook – Airbnb–**
Pretty much anything that can output an ICS feed**

Just add the new Hydrogen Calendar Embeds block, copy in your ical address(s), and
BAM! a modern, responsive, beautiful calendar.

 * Need two calendars in one? We got you.
 * Need multiple different calendars on the page? Easy peasy.
 * Prefer another color or style? We’ve got CSS classes for days.
 * Need different functionality? It’s developer friendly, completely extendable,
   and infinitely customizable.

**Highlights:**

 * Manage events using any external calendar of your choice
 * Combine multiple ICS feeds into one calendar
 * Embed multiple calendars on one page
 * Lots of view options (Grid, Month List, Day List, Year List)
 * Locale support
 * Lots of customization options (and ability to add more)
 * Lightweight and fast
 * Responsive design
 * Easy setup using WordPress Block or Shortcodes
 * **NO API KEYS REQUIRED**

### Contributing

Contributions are welcome! Please feel free to submit a Pull Request to the [GitHub repository](https://github.com/lbell/hydrogen-calendar-embeds).

### Support

For support, feature requests, or bug reports, please visit the [GitHub repository](https://github.com/lbell/hydrogen-calendar-embeds).

You can also sponsor development at [GitHub Sponsors](https://github.com/sponsors/lbell).

## 屏幕截图

 * [[
 * Hydrogen Calendar Embeds
 * [[
 * List View
 * [[
 * Optional Event Popover
 * [[
 * Block Editor – It’s that simple

## 区块

该插件提供了 1 个区块.

 *   Hydrogen Calendar Embeds Embed iCalendar (ICS) feeds and Google Calendars with
   a beautiful, responsive calendar interface.

## 安装

 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.

## 常见问题

### What sorcery is this?!

Hydrogen Calendar Embeds implements the excellent [Full Calendar](https://fullcalendar.io/)
for you, and tosses in a little [Tippy.js](https://atomiks.github.io/tippyjs/) and
[Popper](https://popper.js.org/) to make things… well… pop.

### Can I use this to manage a calendar?

No. All calendar events are maintained via your calendar source (Google Calendar,
iCloud, Outlook, Airbnb, Clickup, etc.). This plugin just displays them beautifully.

### How do I style multiple calendars?

Each calendar gets its own CSS selector: `hycal-event-#` where the # is the order
of the listed calendar (starting with 0). So if you have two calendars in one, you
can use `hycal-event-0` to style the first, and `hycal-event-1` to style the second
calendar.

If you use the `cal_ids` argument to set custom identifiers, those will be used 
instead of numeric indexes.

For example, if you set `cal_ids="soccer,baseball"`, you can use `.hycal-calendar-
soccer-event` and `.hycal-calendar-baseball-event` to style each calendar’s events
specifically.

Event pop-up tooltips also have calendar-specific classes: `hycal-calendar-0-event-
popup` for easier styling of event pop-ups per calendar.

### How do I theme the calendar?

Add custom CSS to your theme to tweak to your desire.

### Can this plugin do X, Y or Z?

Probably!

With the `fc_args` parameter, you can pass in any FullCalendar argument to customize
your calendar. See the FullCalendar documentation for a full list of options: https://
fullcalendar.io/docs

Contact me for requests for additional functionality, and let’s see what we can 
create together!

## 评价

![](https://secure.gravatar.com/avatar/df184b22747cb9244523a9443a2847c6dfa37660fb04562d5acdb3f1ce331b9c?
s=60&d=retro&r=g)

### 󠀁[Simple to use and just works](https://wordpress.org/support/topic/simple-to-use-and-just-works-5/)󠁿

 [revkevmonty](https://profiles.wordpress.org/revkevmonty/) 2026 年 4 月 20 日

Thank you for this plugin, I was just using a Google Calendar embed which didn’t
look great and searching for an alternative came across this. It’s slotted in perfectly
to the website, is easy to use and after a bit of reading the documentation and 
the FullCalendar docs I can customise it pretty easily. It’s a great plugin.

![](https://secure.gravatar.com/avatar/6400d61bec7cf7b741fca62fefc723eb85c32be6a87363b08082f63d25fc1795?
s=60&d=retro&r=g)

### 󠀁[Easy and lightweight](https://wordpress.org/support/topic/easy-and-lightweight-6/)󠁿

 [MTC](https://profiles.wordpress.org/magictrashcan/) 2026 年 4 月 18 日

Fantastic plugin, thanks for sharing it to generously!

![](https://secure.gravatar.com/avatar/cb6fd40021b8b398a1a1e36a49aeb3cf8decf087500de6ad66fc54fc01518361?
s=60&d=retro&r=g)

### 󠀁[Easy, lightweight, all the settings you need](https://wordpress.org/support/topic/easy-lightweight-all-the-settings-you-need/)󠁿

 [melonbots](https://profiles.wordpress.org/melonbots/) 2026 年 2 月 4 日 1 回复

Painless migration from the old Pretty Google Calendar. Easy to implement, mobile
responsive, just enough view options without including too many, and easy CSS class
implementation for extra styling. Never had any issues with PGC and don’t expect
any from Hydrogen either; it’s set and forget. Perfect solution for something like
club or charity event calendars.

 [ 阅读所有3条评价 ](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/reviews/)

## 贡献者及开发者

「Hydrogen Calendar Embeds」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ LBell ](https://profiles.wordpress.org/lbell/)

[帮助将「Hydrogen Calendar Embeds」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/hydrogen-calendar-embeds)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/hydrogen-calendar-embeds/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/hydrogen-calendar-embeds/)，或通过
[RSS](https://plugins.trac.wordpress.org/log/hydrogen-calendar-embeds/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/hydrogen-calendar-embeds/)。

## 更新日志

#### 3.0.1

 * Fixed issue with URL encoding in ICS feed proxy URL.

#### 3.0.0

 * Initial release.

#### 2.2.0

 * This plugin is an improved fork of the Pretty Google Calendar v2.2.0, which has
   been battle-tested for years. All Google Calendar API nonsense has been removed,
   and replaced with ICS feed fetching/parsing, making this plugin much more versatile!

## 额外信息

 *  版本 **3.0.1**
 *  最后更新：**4 月前**
 *  活跃安装数量 **800+**
 *  WordPress 版本 ** 5.8 或更高版本 **
 *  已测试的最高版本为 **6.9.4**
 *  PHP 版本 ** 7.4 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/hydrogen-calendar-embeds/)
 * 标签
 * [calendar](https://cn.wordpress.org/plugins/tags/calendar/)[embed](https://cn.wordpress.org/plugins/tags/embed/)
   [events](https://cn.wordpress.org/plugins/tags/events/)[google calendar](https://cn.wordpress.org/plugins/tags/google-calendar/)
   [ics](https://cn.wordpress.org/plugins/tags/ics/)
 *  [高级视图](https://cn.wordpress.org/plugins/hydrogen-calendar-embeds/advanced/)

## 评级

 5 星（最高 5 星）。

 *  [  3 条 5 星评价     ](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/reviews/?filter=5)
 *  [  0 条 4 星评价     ](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/reviews/?filter=4)
 *  [  0 条 3 星评价     ](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/reviews/?filter=3)
 *  [  0 条 2 星评价     ](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/reviews/?filter=2)
 *  [  0 条 1 星评价     ](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/reviews/)

## 贡献者

 *   [ LBell ](https://profiles.wordpress.org/lbell/)

## 支持

最近两个月解决的问题：

     总计 4，已解决 4

 [查看支持论坛](https://wordpress.org/support/plugin/hydrogen-calendar-embeds/)

## 捐助

您愿意支持这个插件的发展吗?

 [ 捐助此插件 ](https://github.com/sponsors/lbell)