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>
26 lines
731 B
Plaintext
26 lines
731 B
Plaintext
{% 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 %}
|