Как встроить Google Календарь на сайт

Быстрые ссылки

• Получить код встраивания Google Календаря
• Настроить код

Вы можете иметь сайт для площадки, благотворительной организации, местной спортивной команды или другого проекта, где нужно показывать расписание событий. Если вы внесёте события в Google Календарь, легко получить код для встраивания календаря и показать его всем посетителям.

Связанные материалы: Как поделиться статическим снимком Google Календаря

Получение кода встраивания Google Календаря

1. Откройте Google Календарь в браузере и войдите в аккаунт.
2. Нажмите значок шестерёнки в правом верхнем углу, затем выберите «Настройки».

3. В панели слева под Заголовком «Настройки для моих календарей» выберите тот календарь, который хотите встроить. Если у вас несколько календарей, убедитесь, что вы выбрали нужный.
4. Нажмите «Интеграция календаря» или прокрутите страницу до этого раздела в правой панели.

5. В блоке «Код для встраивания» вы увидите HTML-код (iframe). Выделите и скопируйте этот код, чтобы вставить его на страницу вашего сайта.

Если хотите изменить внешний вид, показ календарей, цвета или размеры — нажмите «Настроить», чтобы получить изменённый код.

Настройка кода встраивания

После нажатия «Настроить» откроется новая вкладка с предпросмотром и тем же кодом вверху. Слева будут параметры настройки, справа — превью календаря.

Параметры и их смысл:

• Заголовок календаря: заменяет имя календаря в шапке виджета.
• Показать: включите или выключите элементы интерфейса — заголовок, навигационные кнопки, значок печати, дату и т. п.
• Размер: укажите ширину и высоту в пикселях; можно ввести значения вручную или изменить стрелками.
• Цвет фона: задайте цвет верхней панели или фона, чтобы виджет лучше вписался в дизайн сайта.
• Рамка: включите, если хотите обвести календарь границей.
• Настройки календаря: по умолчанию вид (неделя, месяц, повестка), первый день недели, язык и часовой пояс.
• Календарь для отображения: можно отобразить один или несколько календарей (например, Семья и Дни рождения).

При каждом изменении код вверху обновляется автоматически. Подождите пару секунд, чтобы изменения применились.

Когда всё готово, нажмите иконку копирования справа в боксе с кодом. Код окажется в буфере обмена — вставьте его в HTML вашей страницы.

Важно: как именно вставить код зависит от платформы сайта (CMS, конструктор или собственная разработка). Обратитесь к документации вашей платформы для инструкции по вставке iframe в страницу.

Пошаговая методология внедрения

1. Подготовьте календарь: создайте события и убедитесь, что они находятся в нужном календаре.
2. Проверьте права доступа: календарь должен быть доступен «Для всех в сети», если вы хотите показывать его публично.
3. Получите код встраивания через Настройки → Интеграция календаря.
4. Настройте вид через «Настроить» (заголовок, размеры, вид по умолчанию).
5. Скопируйте код и вставьте в HTML страницы или в блок для пользовательского HTML в вашей CMS.
6. Проверьте отображение на десктопе и мобильных устройствах, подкорректируйте размеры при необходимости.

Проверка и критерии приёмки

• Виджет отображается на целевой странице без разрывов верстки.
• События из выбранного календаря видны и соответствуют источнику.
• При изменении событий в Google Календаре обновления отражаются на сайте в разумные сроки.
• Настройки часового пояса и язык совпадают с ожиданиями пользователей.

Роль‑ориентированные чек-листы

Владелец сайта:

• Убедиться, что календарь публичен или доступен нужным людям.
• Проверить соответствие событий политике конфиденциальности.

Контент‑редактор:

• Настроить заголовок, показывать ли навигацию и дату.
• Проверить читаемость текста и цвета на сайте.

Веб‑разработчик:

• Вставить iframe в корректное место разметки.
• Добавить адаптивные правила CSS при необходимости (max-width: 100%).
• Проверить скорость загрузки и блокировку скриптов.

Советы по совместимости с популярными платформами

• WordPress: используйте блок «HTML» в редакторе Gutenberg или виджет «Текст/HTML» в классическом редакторе. Для сайтов на Elementor/Beaver Builder добавьте HTML-элемент.
• Wix / Squarespace: применяйте блок «Embed» или «Custom HTML» и вставьте iframe-код.
• GitHub Pages / статические сайты: вставьте код в шаблон страницы.

Совет: если платформа автоматически экранирует iframe, используйте встроенные инструменты платформы для вставки внешнего кода.

Безопасность и конфиденциальность

• Публичный календарь делает события доступными всем, кто видит страницу. Не публикуйте чувствительные личные данные в публичных событиях.
• Для частного доступа используйте совместный доступ по почте, но учтите, что встраиваемый iframe работает только с публичным доступом.
• Проверьте соответствие требованиям GDPR и локальным законам: при необходимости уведомите пользователей о передаче данных третьим лицам (Google).

Когда встраивание не подходит (ограничения)

• Если вам нужно точное аудиторное разграничение доступа к событиям (по пользователям), встроенный публичный iframe не подойдёт.
• Сложные кастомные интерфейсы для событий требуют API Google Calendar и собственной реализации, а не простого iframe.

Три способа альтернативной интеграции

1. Простое встраивание iframe (быстро, минимум кода).
2. Использование Google Calendar API для выборки событий и собственной визуализации (полный контроль).
3. Экспорт событий в формате ICS и импорт в сторонние виджеты (ограниченный функционал, офлайн-копия).

Техническое руководство: тестовые сценарии

• Откройте страницу на десктопе и мобильном: календарь корректно адаптируется.
• Создайте новое событие в календаре: оно появляется на сайте после обновления страницы.
• Измените часовой пояс в настройках календаря: отображение времени корректно смещается.
• Установите календарь в приватный режим и проверьте, что виджет перестаёт показывать события.

Отладка и распространённые проблемы

• Пустой виджет: проверьте публичность календаря и правильность вставленного iframe.
• Верстка ломается: ограничьте ширину iframe стилем max-width:100% и задайте box-sizing.
• Медленная загрузка: проверьте, не блокируют ли сторонние скрипты запросы к Google.

Итог

Встраивание Google Календаря — быстрый способ показать расписание событий на сайте. Если вам нужен простой публичный просмотр — используйте iframe из раздела «Интеграция календаря». Для гибкой авторизации, кастомного внешнего вида или сложной логики интегрируйте Google Calendar API.

Важно: всегда проверяйте права доступа и соответствие требованиям приватности перед публикацией событий.