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

Вам нужен профессионально выглядящий живой календарь на вашем веб-сайте, чтобы информировать посетителей о предстоящих событиях или назначать встречи? Вместо того, чтобы создавать что-то с нуля или использовать специальное приложение-календарь, которое может не получать обновлений в будущем, почему бы не использовать то, что миллионы других используют ежедневно?

Пойдя по этому пути, вы можете встроить Календарь Google на свой сайт. Он также бесплатный и простой в использовании. Все, что вам нужно для начала, — это учетная запись Google.

Для начала войдите в свою учетную запись Google, нажмите на сетку приложений рядом с изображением вашего профиля и нажмите « Календарь » .

Получить код для вставки

Откройте «Параметры», нажав на три точки рядом с календарем, который вы хотите встроить.

Нажмите « Настройки и общий доступ» во всплывающем окне.

Прокрутите страницу настроек календаря вниз, пока не найдете раздел « Интеграция календаря ».

Чтобы ваш календарь был виден всем, а не только тем, с кем вы им делитесь, вам нужно сделать его общедоступным.

Для этого установите флажок « Сделать общедоступным» в разделе «Разрешения на доступ ».

Вставьте код в HTML-раздел веб-страницы или публикации. Например, если вы используете WordPress, создайте новую страницу.

Щелкните Текст , чтобы переключиться в редактор HTML. Скопируйте код для вставки из своего календаря Google и вставьте его на страницу.

Нажмите на вкладку Визуальный , чтобы увидеть, как календарь выглядит на вашей странице. Вы также можете выбрать Предварительный просмотр, чтобы увидеть его в интерфейсе вашего веб-сайта.

Вставьте HTML-код календаря на любую веб-страницу, на которую разрешено встраивать объекты.

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

Настройте параметры Календаря Google

Нажмите кнопку « Настроить », расположенную непосредственно под кодом встраивания. Это откроет новое окно.

Отредактируйте или добавьте заголовок в свой календарь, введя его в поле Название календаря . Если вы хотите, чтобы заголовок отображался, установите флажок рядом с Заголовок .

Укажите, какие элементы вы хотите отображать в календаре, установив следующие параметры в разделе « Показать» :

• Заголовок
• Кнопки навигации
• Данные
• Значок печати
• Вкладки
• Список календарей
• Часовой пояс

Размер Календаря Google по умолчанию – 800 x 600. Измените размер, перемещая стрелки вверх и вниз рядом с параметрами " Ширина " и " Высота " .

Например, если вы хотите встроить календарь на боковую панель, уменьшите ширину до меньшего размера, например 300.

Другие параметры, которые вы можете настроить, включают:

• Цвет фона, соответствующий цвету вашего бренда
• Часовой пояс и язык
• Граница (вкл. или выкл.)
• Месяц по умолчанию
• Воскресенье

После того, как вы настроите параметры, просмотрите свой окончательный живой календарь на своей веб-странице. Когда вы изменяете событие в своем календаре, оно обновляется автоматически.

Ниже приведен скриншот месячного просмотра.

Вы также можете просматривать свой календарь по неделям.

Если вы хотите внести какие-либо изменения, вы всегда можете вернуться к настройкам Календаря Google и изменить их.

Обязательно скопируйте и вставьте новый код HTML после внесения любых обновлений форматирования, чтобы отразить новые изменения.

Как разрешить посетителям сохранять событие календаря

Чтобы посетители могли сохранять ваше мероприятие в своем собственном Календаре Google, добавьте кнопку на свой веб-сайт. Убедитесь, что ваш календарь общедоступен.

Откройте свой Календарь Google. Обратите внимание, что изменения можно вносить только с компьютера, а не с мобильного приложения.

Чтобы добавить событие, выберите день, в который вы хотите его добавить, и нажмите « Создать » в верхнем левом углу.

Заполните информацию о вашем мероприятии во всплывающем окне и нажмите Сохранить .

Чтобы открыть событие в календаре, дважды щелкните его. Затем нажмите на три точки в правом верхнем углу, чтобы открыть « Параметры ». и выберите Опубликовать событие .

Вставьте HTML-код из всплывающего окна на свой веб-сайт, чтобы посетители могли добавить событие в свой собственный Календарь Google.

Вернитесь на свой веб-сайт и вставьте код из исходного кода или HTML-представления туда, где вы хотите, чтобы кнопка события отображалась.

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

Встроить Календарь Google в WordPress с помощью плагинов

Как и для большинства функций в WordPress, для этого есть плагин. Встраивание календаря Google в веб-сайт WordPress не является исключением. Ниже приведены несколько плагинов WordPress, которые вы можете использовать.

Плагин простого календаря

Simple Calendar показывает ваши события по неделям, месяцам или в виде списка. Его легко настроить, он адаптируется к мобильным устройствам и настраивается в соответствии с вашими потребностями.

Другие функции включают в себя:

• Управляйте событиями в Google и автоматически обновляйте их в WordPress
• События цветового кода
• Интуитивно понятный и простой в настройке
• Дополнительный функционал с надстройками

Этот плагин — отличный выбор для опытных пользователей Календаря Google. Одной из уникальных особенностей является возможность передачи событий с цветовой кодировкой.

Embedder Дэна для Календаря Google

Отображение календарей Google в виде списка или полного просмотра с помощью Dan's Embedder для Google Calendar.

Нет необходимости управлять или импортировать события в WordPress. Вам нужен только один или несколько общедоступных календарей Google. Другие функции включают в себя:

• Настройка параметров с помощью коротких кодов
• Укажите, сколько элементов показывать
• Встроить несколько календарей

Для этого плагина требуется ключ API. Выполните следующие действия, чтобы получить свой:

• Посетите консоль разработчиков Google
• В боковом меню выберите API и аутентификация > Учетные данные.
• Нажмите кнопку « Создать новый ключ » в разделе «Доступ к общедоступному API».
• Выберите «Ключ браузера» и оставьте поле «Ограничение реферера» пустым.
• Поместите этот ключ на страницу настроек плагина

Календарь событий WD

Создайте рекламное мероприятие и управляйте или добавляйте события в свой блог WordPress с помощью Event Calendar WD.

Предоставьте подробное описание ваших событий с помощью редактора WordPress, прикрепите теги и назначьте категории для каждого из них. Некоторые другие функции включают в себя:

• Удобный интерфейс для полного контроля над отображением календарей и событий на вашем веб-сайте.
• Легко настраивайте и управляйте своими календарями
• Неограниченное количество календарей и событий
• Оптимизируйте каждое событие для улучшения SEO и видимости в поисковых системах
• Включите кнопки социальных сетей, чтобы распространять информацию о ваших мероприятиях.

Простой календарь бронирования WP

Быстро и легко устанавливайте и встраивайте Календари Google на свой веб-сайт.

Бесплатная версия WP Simple Booking Calendar дает вам доступ к основным функциям, которые вам нужны, например, к отслеживанию ваших событий. Особенности бесплатной версии включают в себя:

• Адаптивный макет
• Резервное копирование и восстановление данных и календарей
• Показать доступность

Для более продвинутых функций публикации и редактирования вы можете перейти на версию Premium.

Пользователи, которые хотят управлять доступностью своих услуг и отображать их на своем веб-сайте или объявлять о предстоящих событиях, получат большую пользу от встраивания календаря Google на свой сайт.

Интеграция календаря непосредственно на ваш веб-сайт удержит посетителей на вашем сайте и повысит вероятность того, что они назначат встречу или запишутся на мероприятие.

Все, что вам нужно, это подключение к Интернету, веб-браузер и учетная запись Google для создания и отображения профессионального календаря на вашем сайте.