Você precisa de um calendário ao vivo com aparência profissional em seu site para informar os visitantes sobre os próximos eventos ou para agendar um compromisso? Em vez de criar algo do zero ou usar algum aplicativo de calendário personalizado^{(custom calendar app)} que pode não receber atualizações futuras, por que não usar algo que milhões de outras pessoas estão usando diariamente?

Seguindo esse caminho, você pode incorporar um Google Agenda^{(Google Calendar)} ao seu site. Também é gratuito e fácil de usar. Tudo o que você precisa para começar é uma conta do Google^{(Google account)} .

Comece^(Get) fazendo login em sua conta do Google^{(Google account)} , clique na grade de aplicativos ao lado de sua foto de perfil e clique^{(picture and click)} em Calendário^(Calendar) .

Obtenha o código de incorporação^{(Get the Embed Code)}

Abra Opções^{(Options by )} clicando nos três pontos adjacentes ao calendário que deseja incorporar.  

Clique em Configurações e compartilhamento^{(Settings and sharing)} no pop-up.

Role^(Scroll) para baixo na página de configurações do Calendário até encontrar a seção ^(Calendar)Integrar calendário^{(Integrate calendar)} .

Para tornar sua agenda visível para todos e não apenas para aqueles com quem você a compartilha, você precisará torná-la pública^{( make it public)} .

Para fazer isso, ative a caixa ao lado de Disponibilizar para o público^{(Make available to public)} em Permissões de acesso^{(Access permissions)} .

Incorpore o código na seção HTML^{(HTML section)} de uma página ou postagem^{(page or post)} da Web . Por exemplo, se você estiver usando o WordPress , crie uma nova página.

Clique em Texto^{(Text )} para mudar para o editor HTML^{(HTML editor)} . Copie o código de incorporação^{(Embed code)} do seu calendário do Google e cole^{(Google calendar and paste)} -o na página.

Clique na guia Visual para ver a aparência do calendário em sua página. Você também pode selecionar Visualizar^(Preview) para vê-lo no front-end do seu site.

Cole o código HTML do Calendário^{(Calendar HTML code)} em qualquer página da Web onde você tenha permissão para incorporar objetos.

Se você gosta das configurações de formato padrão do Google para o calendário, pronto. Para alterar a cor, o tamanho e outras opções do seu calendário, você pode personalizar suas configurações.

Personalizar as configurações do Google Agenda^{(Customize Google Calendar Settings)}

Clique no botão Personalizar^(Customize) localizado diretamente abaixo do código de incorporação. Isso abrirá uma nova janela.

Edite ou adicione um título ao seu calendário digitando-o em Título do calendário^{(Calendar title)} . Se você quiser que o título seja exibido, ative a caixa ao lado de Título^(Title) .

Especifique^(Specify) quais elementos você deseja mostrar em seu calendário verificando as seguintes configurações em Mostrar^(Show) :

• Título
• Botões de navegação
• Dados
• Ícone de impressão
• Abas
• Lista de calendários
• Fuso horário

O tamanho padrão^{(default size)} do Google Agenda^{(Google Calendar)} é 800 por 600. Altere o tamanho movendo as setas para cima e para baixo ao lado de Largura^(Width) e Altura^(Height) .

Por exemplo, se você quiser incorporar um calendário em uma barra lateral, reduza a Largura^(Width) para um tamanho menor, como 300.

Outras configurações que você pode personalizar incluem:

• Cor de fundo^{(Background color)} para combinar com a cor da sua marca^{(brand color)}
• Fuso horário e idioma
• Borda (ativada ou desativada)
• Mês padrão
• Primeiro dia da semana

Depois de personalizar as opções, visualize seu calendário^{(live calendar)} final ao vivo em sua página da web. Quando você altera um evento em seu calendário, ele é atualizado automaticamente.

Abaixo^(Below) está uma captura de tela da visualização mensal.

Você também pode visualizar seu calendário por semana.

Se você quiser fazer alguma alteração, sempre poderá voltar às configurações do Google Agenda^{(Google Calendar)} e ajustá-las.

Certifique-se de copiar e colar o novo código HTML^{(HTML code)} depois de fazer qualquer atualização de formatação para refletir as novas alterações.

Como permitir que os visitantes salvem um evento do calendário^{(How to Let Visitors Save a Calendar Event)}

Para permitir que os visitantes salvem seu evento em seu próprio Google Agenda^{(Google Calendar)} , adicione um botão ao seu site. Certifique^(Make) -se de que seu calendário seja público.

Abra seu Google Agenda^{(Google Calendar)} . Observe que as alterações só podem ser feitas a partir de um computador e não de um aplicativo móvel.

Para adicionar um evento, selecione o dia ao qual deseja adicioná-lo e clique em Criar^(Create) no canto superior esquerdo.

Preencha^(Fill) os detalhes do seu evento no pop-up e clique em ^{(popup and click)} Salvar^(Save) .

Para abrir um evento em seu calendário, clique duas vezes nele. Em seguida, clique nos três pontos no canto superior direito^{(right-hand corner)} para abrir Opções^(Options) e selecione Publicar evento^{(Publish event)} .

Incorpore o código HTML^{(HTML code)} da janela pop^{(popup window)} -up em seu site para permitir que os visitantes adicionem o evento ao próprio Google Agenda^{(Google Calendar)} .

Volte ao seu site e cole^{(website and paste)} o código da visualização de origem ou HTML^{(source or HTML)} onde você deseja que o botão^{(event button)} de evento seja exibido.

Quando um visitante clica no botão do Google Agenda^{(Google Calendar button)} , ele abre a agenda e adiciona o evento a ela. Você também pode convidar pessoas para seu evento usando o link exibido na mesma janela pop^{(popup window)} -up .

Incorporar o Google Calendar no WordPress usando plugins^{(Embed Google Calendar into WordPress Using Plugins)}

Como na maioria das funções do WordPress , existe um plugin para isso. Incorporar um Google Calendar em um site WordPress^{(WordPress website)} não é exceção. Abaixo estão vários plugins do WordPress para você considerar usar. 

Plug-in de calendário simples^{(Simple Calendar Plugin)}

O Simple Calendar^{(Simple Calendar)} mostra seus eventos por semana, mês ou em uma lista. É fácil de configurar, responsivo a dispositivos móveis e personalizável de acordo com suas necessidades.

Outros recursos incluem: 

• Gerencie eventos no Google e atualize-os automaticamente no WordPress
• Eventos de código de cores
• Intuitivo e simples de configurar
• Funcionalidade adicional com complementos^{( add-ons)}

Este plug-in é uma excelente opção para usuários avançados do Google Agenda^{(Google Calendar power)} . Um recurso exclusivo é a capacidade de transferir eventos codificados por cores.

Dan's Embedder para o Google Agenda^{(Dan’s Embedder for Google Calendar)}

Exiba^{(Display Google)} calendários do Google em uma lista ou visualização completa com o Dan's Embedder para Google Calendar .

Não há necessidade de gerenciar ou importar eventos no WordPress . Você só precisa de um ou mais Google Agendas^{(Google Calendars)} públicos . Outros recursos incluem:

• Configurar opções com códigos de acesso
• Especifique quantos itens mostrar
• Incorporar vários calendários 

Este plugin requer uma chave de API^{(API key)} . Siga os passos abaixo para adquirir o seu:

• Visite o Google Developers Console^{(Google Developers Console)}
• No menu lateral, verifique APIs e autenticação^{(APIs and auth)} > Credencial^(Credential)
• Clique no botão Criar nova chave^{(Create new key)} na seção Acesso à API pública^{(Public API access)}
• Selecione a chave do navegador^{(Browser key)} e deixe a Limitação do referenciador^{(Referrer Limitation)} em branco
• Coloque esta chave na página de configurações do plugin

Calendário de eventos WD^{(Event Calendar WD)}

Crie^(Create) uma promoção de evento e gerencie^{(event promotion and manage)} ou adicione eventos ao seu blog WordPress^{(WordPress blog)} com o Calendário de Eventos WD^{(Event Calendar WD)} .

Forneça uma descrição detalhada de seus eventos usando o editor do WordPress^{(WordPress editor)} , anexe tags e atribua categorias a cada um. Alguns outros recursos incluem:

• Interface amigável para controle total sobre como você exibe calendários e eventos em seu site
• Personalize e gerencie facilmente seus calendários
• Um número ilimitado de calendários e eventos
• Otimize todos os eventos para melhor SEO e visibilidade do mecanismo de pesquisa^{(SEO and search engine visibility)}
• Ative os botões de compartilhamento social para divulgar seus eventos

Calendário de reservas simples do WP^{(WP Simple Booking Calendar)}

Instale e incorpore de forma rápida^(Quickly) e fácil o Google Calendars^{(Google Calendars)} em seu site.

A versão gratuita do WP Simple Booking Calendar oferece acesso aos recursos básicos de que você precisa, como acompanhar seus eventos. Os destaques da versão gratuita incluem^{(version include)} :

• Layout responsivo
• Fazer backup^(Backup) e restaurar dados e calendários
• Exiba sua disponibilidade 

Para funções de publicação e edição mais avançadas, você pode atualizar para a versão Premium^{(Premium version)} .

Os usuários que desejam gerenciar e exibir a disponibilidade de seus serviços em seu site ou anunciar^{(website or announce)} eventos futuros se beneficiarão muito com a incorporação de um Google Agenda^{(Google Calendar)} em seu site.

A integração de um calendário diretamente em seu site manterá os visitantes em seu site e aumentará as chances de eles marcarem um compromisso ou se inscreverem em um evento.

Tudo o que você precisa é de uma conexão com a Internet, um navegador da Web^{(web browser)} e uma conta do Google^{(Google account)} para criar e exibir um calendário com aparência profissional em seu site.

How To Embed Google Calendar On Your Website

Do you nеed a professional-looking live calendar on your website to let visitors know about upcoming events or to schеdule an appointment? Instеad оf building something from scratсh or using some custom calendar app that might not get future updates, why not use something that mіllions оf others are υsing on a daily basis?

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

• Como para Embed Google Forms no Your Website

• Como usar Google Calendar: 10 Pro Tips

• Como usar o Google Family Calendar para manter o seu Family no Time

• 2 atalhos da barra de endereços do Chrome para criar eventos do Google Agenda

• Métodos de pesquisa de usuários do Google Analytics para aumentar o tráfego do site

• 23 atalhos de teclado úteis do Google Agenda

• Como excluir YouTube History and Search Activity

• 9 Hidden Recursos em Google Maps Você deve verificar

• Como ver o seu Google Maps Search History

• Como transformar Google SafeSearch Off

• Qual é o Google App & How para usá-lo

• Como Unsend um Email em Gmail

• Por que o Google Agenda é o melhor serviço de calendário online

• O que é um erro Google “Traffic Unusual” e como corrigi-lo

• Como chegar a Inbox Zero em Gmail

• Como usar as notificações do Google Agenda para apoiar hábitos atômicos

• Não ficando Gmail Notifications? 10 Ways para corrigir

• Como usar Stops múltiplo em Google Maps

• Adicione as direções de condução do Google Maps ao seu site

• Como classificar ou Filter por Color em Google Sheets