Add calendar iframe and togglAdd calendar iframe and toggle buttone button (#3144)

### 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 <george.gcac@gmail.com>
Co-authored-by: dodo <349507644@qq.com>
Co-authored-by: George <31376482+george-gca@users.noreply.github.com>
Co-authored-by: George Araújo <george.gcac@gmail.com>

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):

README.md

@@ -193,7 +193,7 @@ Feel free to add your own page(s) by sending a PR.
 <a href="https://inbt.jhu.edu/epidiagnostics/" target="_blank">★</a>
 <a href="https://www.nuesl.org/" target="_blank">★</a>
 <a href="https://big-culture.github.io/" target="_blank">★</a>
-<a href="https://martinbulla.github.io/bullab/" target="_blank">★</a>  
+<a href="https://martinbulla.github.io/bullab/" target="_blank">★</a>
 <a href="https://gpforesteyes.github.io/" target="_blank">★</a>
 </td>
 </tr>
@@ -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 &amp; 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)
-  <!--te-->
 
 ## Getting started
 

_includes/calendar.liquid

@@ -0,0 +1,25 @@
+{% if include.calendar_id %}
+  <div class="post mt-4">
+    <h2 class="mb-3"><i class="fas fa-calendar-alt"></i> Upcoming Events</h2>
+
+    <button
+      class="btn btn-sm btn-outline-primary mb-3"
+      onclick="toggleCalendar()"
+      id="calendar-toggle-btn"
+    >
+      Show Calendar
+    </button>
+
+    <div class="calendar-wrapper" id="calendar-container" style="display: none;">
+      <iframe
+        id="calendar-iframe"
+        data-calendar-id="{{ include.calendar_id }}"
+        data-timezone="{{ include.timezone | default: 'UTC' }}"
+        style="{{ include.style | default: 'border:0; width:100%; height:600px;' }}"
+        frameborder="0"
+        scrolling="no"
+      >
+      </iframe>
+    </div>
+  </div>
+{% endif %}

_includes/scripts.liquid

@@ -98,6 +98,11 @@
   <script defer src="{{ '/assets/js/echarts-setup.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
 {% endif %}
 
+{% if page.calendar %}
+  <!-- Calendar setup -->
+  <script defer src="{{ '/assets/js/calendar-setup.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
+{% endif %}
+
 {% if page.chart and page.chart.plotly %}
   <!-- Plotly -->
   <script

_pages/teaching.md

@@ -5,8 +5,11 @@ title: teaching
 description: Course materials, schedules, and resources for classes taught.
 nav: true
 nav_order: 6
+calendar: true
 ---
 
 This page displays a collection of courses with detailed schedules, materials, and resources. You can organize your courses by years, terms, or topics.
 
+{% include calendar.liquid calendar_id='test@gmail.com' timezone='Asia/Shanghai' %}
+
 {% include courses.liquid %}

_sass/_base.scss

@@ -1494,6 +1494,35 @@ figure.cover {
   }
 }
 
+.calendar-toggle-btn {
+  background-color: #007acc;
+  color: white;
+  padding: 0.5em 1em;
+  border: none;
+  border-radius: 6px;
+  font-size: 1em;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.calendar-toggle-btn:hover {
+  background-color: #005fa3;
+}
+
+.google-calendar-embed {
+  width: 100%;
+  height: 600px;
+  border: none;
+
+  @media (max-width: 768px) {
+    height: 500px;
+  }
+
+  @media (max-width: 480px) {
+    height: 400px;
+  }
+}
+
 mjx-container[jax="CHTML"][display="true"] {
   overflow-x: auto;
 }

assets/js/calendar-setup.js

@@ -0,0 +1,16 @@
+// Toggle calendar visibility
+function toggleCalendar() {
+  const el = document.getElementById("calendar-container");
+  const btn = document.getElementById("calendar-toggle-btn");
+  const isHidden = el.style.display === "none";
+  el.style.display = isHidden ? "block" : "none";
+  btn.innerText = isHidden ? "Hide Calendar" : "Show Calendar";
+
+  // Update calendar URL when toggling to ensure correct theme
+  if (isHidden) {
+    updateCalendarUrl();
+  }
+}
+
+// Initialize calendar on page load
+document.addEventListener("DOMContentLoaded", updateCalendarUrl);

assets/js/theme.js

@@ -29,6 +29,7 @@ let applyTheme = () => {
   setHighlight(theme);
   setGiscusTheme(theme);
   setSearchTheme(theme);
+  updateCalendarUrl();
 
   // if mermaid is not defined, do nothing
   if (typeof mermaid !== "undefined") {
@@ -296,3 +297,33 @@ let initTheme = () => {
     applyTheme();
   });
 };
+
+// Get the appropriate background color for Google Calendar based on current theme
+let getCalendarBgColor = () => {
+  let theme = determineComputedTheme();
+  return theme === "dark" ? "333333" : "f9f9f9";
+};
+
+// Get the Google Calendar embed URL with the correct background color
+let getCalendarUrl = (calendarId, timezone = "UTC") => {
+  const baseUrl = "https://calendar.google.com/calendar/embed";
+  const params = new URLSearchParams({
+    src: calendarId,
+    ctz: timezone,
+    mode: "WEEK",
+    showTitle: "0",
+    showPrint: "0",
+    showCalendars: "0",
+    showTabs: "0",
+    bgcolor: getCalendarBgColor(),
+  });
+  return `${baseUrl}?${params.toString()}`;
+};
+
+// Update the calendar iframe src to apply theme changes
+let updateCalendarUrl = () => {
+  const iframe = document.getElementById("calendar-iframe");
+  if (iframe && iframe.dataset.calendarId) {
+    iframe.src = getCalendarUrl(iframe.dataset.calendarId, iframe.dataset.timezone || "UTC");
+  }
+};

package-lock.json

@@ -5,8 +5,8 @@
   "packages": {
     "": {
       "devDependencies": {
-        "@shopify/prettier-plugin-liquid": "1.10.0",
-        "prettier": "^3.7.4"
+        "@shopify/prettier-plugin-liquid": "^1.10.0",
+        "prettier": "^3.8.0"
       }
     },
     "node_modules/@shopify/liquid-html-parser": {

package.json

@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "@shopify/prettier-plugin-liquid": "1.10.0",
-    "prettier": "^3.7.4"
+    "@shopify/prettier-plugin-liquid": "^1.10.0",
+    "prettier": "^3.8.0"
   }
 }