d5fce890c4
### 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>
17 lines
558 B
JavaScript
17 lines
558 B
JavaScript
// 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);
|