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

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

Для^(Get) начала войдите в свою учетную запись Google^{(Google account)} , нажмите на сетку приложений рядом с изображением вашего профиля и выберите «^{(picture and click)} Календарь »^(Calendar) .

Получить код для вставки^{(Get the Embed Code)}

Откройте «Параметры»,^{(Options by )} нажав на три точки рядом с календарем, который вы хотите встроить.  

Нажмите « Настройки и общий^{(Settings and sharing)} доступ» во всплывающем окне.

Прокрутите^(Scroll) страницу настроек календаря^(Calendar) вниз , пока не найдете раздел « Интеграция календаря^{(Integrate calendar)} ».

Чтобы ваш календарь был виден всем, а не только тем, с кем вы им делитесь, вам нужно сделать его общедоступным^{( make it public)} .

Для этого установите флажок « Сделать общедоступным» в^{(Make available to public)} разделе «Разрешения на доступ^{(Access permissions)} » .

Вставьте код в раздел HTML^{(HTML section)} веб- страницы или публикации^{(page or post)} . Например, если вы используете WordPress , создайте новую страницу.

Щелкните Текст^{(Text )} , чтобы переключиться в редактор HTML^{(HTML editor)} . Скопируйте код^{(Embed code)} для вставки из своего календаря Google и вставьте^{(Google calendar and paste)} его на страницу.

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

Вставьте HTML-код календаря^{(Calendar HTML code)} на любую веб-страницу, на которую разрешено встраивать объекты.

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

Настройте параметры Календаря Google^{(Customize Google Calendar Settings)}

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

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

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

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

Размер Календаря Google^{(Google Calendar)} по умолчанию^{(default size)} – 800 x 600. Измените размер, перемещая стрелки вверх и вниз рядом с параметрами " Ширина^(Width) " и " Высота^(Height) " .

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

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

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

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

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

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

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

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

Как разрешить посетителям сохранять событие календаря^{(How to Let Visitors Save a Calendar Event)}

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

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

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

Заполните^(Fill) информацию о вашем мероприятии во всплывающем окне и нажмите ^{(popup and click)} Сохранить^(Save) .

Чтобы открыть событие в календаре, дважды щелкните его. Затем нажмите на три точки в правом верхнем углу^{(right-hand corner)} , чтобы открыть « Параметры^(Options) », и выберите « Опубликовать событие»^{(Publish event)} .

Вставьте код HTML^{(HTML code)} из всплывающего окна^{(popup window)} на свой веб-сайт, чтобы посетители могли добавить событие в свой собственный Календарь Google^{(Google Calendar)} .

Вернитесь на свой веб-сайт и вставьте^{(website and paste)} код из исходного кода или HTML^{(source or HTML)} - представления туда, где вы хотите , чтобы кнопка события^{(event button)} отображалась.

Когда посетитель нажимает кнопку Календаря Google^{(Google Calendar button)} , он открывает свой календарь и добавляет в него событие. Вы также можете пригласить людей на свое мероприятие, используя ссылку, отображаемую в том же всплывающем окне^{(popup window)} .

Встроить Календарь Google в WordPress с помощью плагинов^{(Embed Google Calendar into WordPress Using Plugins)}

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

Плагин простого календаря^{(Simple Calendar Plugin)}

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

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

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

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

Embedder Дэна для Календаря Google^{(Dan’s Embedder for Google Calendar)}

Отображение^{(Display Google)} календарей Google в виде списка или полного просмотра с помощью Dan's Embedder for Google Calendar .

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

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

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

• Посетите консоль разработчиков Google^{(Google Developers Console)}
• В боковом меню выберите API и аутентификация^{(APIs and auth)} > Учетные данные.^(Credential)
• Нажмите кнопку « Создать новый ключ^{(Create new key)} » в разделе «Доступ к общедоступному API ».^{(Public API access)}
• Выберите «Ключ браузера»^{(Browser key)} и оставьте поле «Ограничение реферера»^{(Referrer Limitation)} пустым.
• Поместите этот ключ на страницу настроек плагина

Календарь событий WD^{(Event Calendar WD)}

Создайте^(Create) рекламное мероприятие и управляйте^{(event promotion and manage)} или добавляйте события в свой блог WordPress^{(WordPress blog)} с помощью Event Calendar WD .

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

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

Простой календарь бронирования WP^{(WP Simple Booking Calendar)}

Быстро^(Quickly) и легко устанавливайте и встраивайте Календари Google^{(Google Calendars)} на свой веб-сайт.

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

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

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

Пользователи, которые хотят управлять доступностью своих услуг и отображать их на своем веб-сайте или объявлять о^{(website or announce)} предстоящих событиях, получат большую пользу от встраивания календаря Google^{(Google Calendar)} на свой сайт.

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

Все, что вам нужно, — это подключение к Интернету, веб-браузер^{(web browser)} и учетная запись Google,^{(Google account)} чтобы создать и отобразить профессионально выглядящий календарь на вашем сайте.

How To Embed Google Calendar On Your Website

Do you need a profesѕional-looking live calendar on уoυr website to let visitors know about upcoming events or to schedυle an appointment? Instead of building something from scratch or using some custom calendar app that might not get future updates, why not uѕe something that mіllions of others are using on a daily basiѕ?

Going that route, you can embed a Google Calendar onto your site. It’s also free and easy to use. All you need to get started is a Google account.

Get started by logging into your Google account, click on the apps grid next to your profile picture and click on Calendar.

Get the Embed Code

Open Options by clicking on the three dots adjacent to the calendar you want to embed.  

Click on Settings and sharing from the popup.

Scroll down the Calendar settings page until you find the Integrate calendar section.

To make your calendar visible to everyone and not only those you share it with, you will need to make it public.

To do this, enable the box next to Make available to public under Access permissions.

Embed the code into the HTML section of a web page or post. For example, if you are using WordPress, create a new page.

Click on Text to switch to the HTML editor. Copy the Embed code from your Google calendar and paste it into the page.

Click on the Visual tab to see what the calendar looks like on your page. You can also select Preview to see it on the front end of your website.

Paste the Calendar HTML code into any web page where you’re allowed tto embed objects.

If you like Google’s default format settings for the calendar, you’re good to go. To change the color, size, and other options of your calendar, you can customize its settings.

Customize Google Calendar Settings

Click the Customize button located directly under the embed code. This will open a new window.

Edit or add a title to your calendar by typing it under Calendar title. If you want the title to show, enable the box next to Title.

Specify which elements you want to show on your calendar by checking the following settings under Show:

• Title
• Navigation buttons
• Data
• Print icon
• Tabs
• Calendar list
• Time Zone

The default size of the Google Calendar is 800 by 600. Change the size by moving the up and down arrows next to Width and Height.

For example, if you want to embed a calendar on a sidebar, reduce the Width to a smaller size such as 300.

Other settings you can customize include:

• Background color to match your brand color
• Time zone and language
• Border (on or off)
• Default month
• First day of the week

After you customize the options, view your final live calendar on your web page. When you change an event on your calendar, it will update automatically.

Below is a screenshot of the monthly view.

You can also view your calendar by week.

If you want to make any changes, you can always go back to your Google Calendar settings and adjust them..

Be sure to copy and paste the new HTML code after making any formatting updates  to reflect the new changes.

How to Let Visitors Save a Calendar Event

To enable visitors to save your event on their own Google Calendar, add a button to your website. Make sure your calendar is public.

Open your Google Calendar. Note that changes can only be made from a computer and not a mobile app.

To add an event, select the day you want to add it to and click on Create in the top left-hand corner.

Fill in the details of your event in the popup and click Save.

To open an event in your calendar, double-click it. Then click the three dots in the upper right-hand corner to open Options, and select Publish event.

Embed the HTML code from the popup window on your website to enable visitors to add the event to their own Google Calendar.

Go back to your website and paste the code from the source or HTML view where you want the event button to display.

When a visitor clicks on the Google Calendar button, it will open their calendar and add the event to it. You can also invite people to your event using the link displayed in the same popup window.

Embed Google Calendar into WordPress Using Plugins

As with most functions in WordPress, there is a plugin for that. Embedding a Google Calendar into a WordPress website is no exception. Below are several WordPress plugins for you to consider using. 

Simple Calendar Plugin

Simple Calendar shows your events by week, month, or in a list. It’s easy to set up, mobile responsive, and customizable to your needs.

Other features include: 

• Manage events in Google and have them updated automatically in WordPress
• Color code events
• Intuitive and straightforward to configure
• Additional functionality with add-ons

This plugin is an excellent choice for Google Calendar power users. One unique feature is the ability to transfer color-coded events.

Dan’s Embedder for Google Calendar

Display Google calendars in a list or full view with Dan’s Embedder for Google Calendar.

There is no need to manage or import events in WordPress. You only need one or more public Google Calendars. Other features include:

• Configure options with shortcodes
• Specify how many items to show
• Embed multiple calendars 

This plugin requires an API key. Follow the steps below to get yours:

• Visit Google Developers Console
• From the side menu, check APIs and auth > Credential
• Click the Create new key button from the Public API access section
• Select Browser key and leave Referrer Limitation blank
• Put this key on the plugin settings page

Event Calendar WD

Create an event promotion and manage or add events to your WordPress blog with Event Calendar WD.

Provide a detailed description of your events using the WordPress editor, attach tags, and assign categories to each one. Some other features include:

• User-friendly interface for full control over how you display calendars and events on your website
• Easily customize and manage your calendars
• An unlimited number of calendars and events
• Optimize every event for better SEO and search engine visibility
• Enable social sharing buttons to spread the word about your events

WP Simple Booking Calendar

Quickly and easily install and embed Google Calendars on your website.

The free version of WP Simple Booking Calendar gives you access to the basic features you need such as keeping track of your events. Highlights of the free version include:

• Responsive layout
• Backup and restore data and calendars
• Display your availability 

For more advanced publishing and editing functions, you can upgrade to the Premium version.

Users who want to manage and display their availability for their services on their website or announce upcoming events will benefit greatly from embedding a Google Calendar on their site.

Integrating a calendar directly on your website will keep visitors on your site and increase the chances they’ll make an appointment or sign up for an event.

All you need is an internet connection, a web browser, and a Google account to create and display a professional-looking calendar on your site.

Related posts

• Как Embed Google Forms на Your Website

• Как использовать Google Calendar: 10 Pro Tips

• Как использовать Google Family Calendar, чтобы сохранить ваш Family на Time

• 2 ярлыка адресной строки Chrome для создания событий календаря Google

• Google Analytics User Research Methods to Boost Website Traffic

• Как использовать задачи Google - Начало работы Руководство

• Как Backup Google Chrome History

• Как Filter в листах Google

• 9 Особенности Hidden в Google Maps Вы должны проверить

• Как отправить Private Emails в Gmail

• Что расширено Protection в Google Chrome and How, чтобы включить его

• Как Export and Import Chrome Bookmarks

• Как сортировать или Filter по Color в Google Sheets

• Что такое Google App & How для его использования

• Google My Activity: почему вы должны заботиться

• 23 удобных сочетания клавиш Google Календаря

• Почему Календарь Google — лучший сервис онлайн-календарей

• 8 Google Search Tips: Всегда найдите то, что Looking для

• Как включить Google SafeSearch Off

• Как просмотреть свой Google Maps Search History