From d5fce890c45548f3d6406a9a904c587db4dd85e9 Mon Sep 17 00:00:00 2001 From: LucasLiu6 <122558175+LucasLiu6@users.noreply.github.com> Date: Sun, 18 Jan 2026 07:36:16 +0800 Subject: [PATCH] Add calendar iframe and togglAdd calendar iframe and toggle buttone button (#3144) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Description This PR adds a Google Calendar integration feature as described in issue #872. Users can embed their own calendar using an iframe configured via `_config.yml`, and the calendar is toggleable through a responsive button. This component is styled to visually blend into the theme and supports responsive display across desktop and mobile. ### Changes - Added `calendar.liquid` in `_includes` - Modified `about.md` to include the toggleable calendar block - Introduced `calendar` config section in `_config.yml` - Appended calendar-related styles in `_sass/_base.scss` ### Configuration To enable this feature, add the following to `_config.yml`: ```yaml calendar: enabled: true calendar_id: your_calendar_id@group.calendar.google.com timezone: UTC style: "border:0; width:100%; height:600px;" --------- Signed-off-by: George Araújo Co-authored-by: dodo <349507644@qq.com> Co-authored-by: George <31376482+george-gca@users.noreply.github.com> Co-authored-by: George Araújo --- CUSTOMIZE.md | 43 +++++++++++++++++++++++++++++++++++++ README.md | 7 +++--- _includes/calendar.liquid | 25 +++++++++++++++++++++ _includes/scripts.liquid | 5 +++++ _pages/teaching.md | 3 +++ _sass/_base.scss | 29 +++++++++++++++++++++++++ assets/js/calendar-setup.js | 16 ++++++++++++++ assets/js/theme.js | 31 ++++++++++++++++++++++++++ package-lock.json | 4 ++-- package.json | 4 ++-- 10 files changed, 160 insertions(+), 7 deletions(-) create mode 100644 _includes/calendar.liquid create mode 100644 assets/js/calendar-setup.js diff --git a/CUSTOMIZE.md b/CUSTOMIZE.md index a41bf0d..55526e8 100644 --- a/CUSTOMIZE.md +++ b/CUSTOMIZE.md @@ -46,6 +46,10 @@ Here we will give you some tips on how to customize the website. One important t - [Adding a newsletter](#adding-a-newsletter) - [Configuring search features](#configuring-search-features) - [Managing publication display](#managing-publication-display) + - [Adding a Google Calendar](#adding-a-google-calendar) + - [Basic usage](#basic-usage) + - [Enable the calendar script for your page](#enable-the-calendar-script-for-your-page) + - [Optional: Customize the calendar style](#optional-customize-the-calendar-style) - [Updating third-party libraries](#updating-third-party-libraries) - [Removing content](#removing-content) - [Removing the blog page](#removing-the-blog-page) @@ -619,6 +623,45 @@ To add a thumbnail to a publication, include a `preview` field in your BibTeX en Place the image file in `assets/img/publication_preview/`. +## Adding a Google Calendar + +You can embed a Google Calendar on any page by using the `calendar.liquid` include. The calendar will automatically adapt to light and dark themes. + +### Basic usage + +Add the following to your page's Markdown file (for example, in `_pages/teaching.md`): + +```liquid +{% include calendar.liquid calendar_id='your-calendar-id@group.calendar.google.com' timezone='Your/Timezone' %} +``` + +Replace: + +- `your-calendar-id@group.calendar.google.com` with your actual Google Calendar ID (found in Google Calendar Settings → Integrate calendar → Calendar ID) +- `Your/Timezone` with your timezone (e.g., `UTC`, `Asia/Shanghai`, `America/New_York`). The default is `UTC`. + +### Enable the calendar script for your page + +To prevent unnecessary script loading, add `calendar: true` to the frontmatter of any page that displays a calendar: + +```yaml +--- +layout: page +title: teaching +calendar: true +--- +``` + +### Optional: Customize the calendar style + +You can optionally customize the iframe styling using the `style` parameter: + +```liquid +{% include calendar.liquid calendar_id='your-calendar-id@group.calendar.google.com' timezone='UTC' style='border:0; width:100%; height:800px;' %} +``` + +The default style is `border:0; width:100%; height:600px;`. + ## Updating third-party libraries The theme uses various third-party JavaScript and CSS libraries. You can manage these in the `third_party_libraries` section of [\_config.yml](_config.yml): diff --git a/README.md b/README.md index 25793a9..e577bdc 100644 --- a/README.md +++ b/README.md @@ -193,7 +193,7 @@ Feel free to add your own page(s) by sending a PR. ★ ★ ★ -★ +★ ★ @@ -254,6 +254,8 @@ Run the test yourself: [Google Lighthouse PageSpeed Insights](https://pagespeed. - [Installing and Deploying](#installing-and-deploying) - [Customizing](#customizing) - [GitHub Copilot Agents](#github-copilot-agents) + - [Customization Agent](#customization-agent) + - [Documentation Agent](#documentation-agent) - [Features](#features) - [Light/Dark Mode](#lightdark-mode) - [CV](#cv) @@ -262,7 +264,7 @@ Run the test yourself: [Google Lighthouse PageSpeed Insights](https://pagespeed. - [Collections](#collections) - [Layouts](#layouts) - [The iconic style of Distill](#the-iconic-style-of-distill) - - [Full support for math & code](#full-support-for-math--code) + - [Full support for math \& code](#full-support-for-math--code) - [Photos, Audio, Video and more](#photos-audio-video-and-more) - [Other features](#other-features) - [GitHub's repositories and user stats](#githubs-repositories-and-user-stats) @@ -277,7 +279,6 @@ Run the test yourself: [Google Lighthouse PageSpeed Insights](https://pagespeed. - [All Contributors](#all-contributors) - [Star History](#star-history) - [License](#license) - ## Getting started diff --git a/_includes/calendar.liquid b/_includes/calendar.liquid new file mode 100644 index 0000000..fab192d --- /dev/null +++ b/_includes/calendar.liquid @@ -0,0 +1,25 @@ +{% if include.calendar_id %} +
+

Upcoming Events

+ + + + +
+{% endif %} diff --git a/_includes/scripts.liquid b/_includes/scripts.liquid index acfef4b..a8f99c6 100644 --- a/_includes/scripts.liquid +++ b/_includes/scripts.liquid @@ -98,6 +98,11 @@ {% endif %} +{% if page.calendar %} + + +{% endif %} + {% if page.chart and page.chart.plotly %}