Heeft u een professioneel ogende live kalender op uw website nodig om bezoekers te informeren over aankomende evenementen of om een ​​afspraak in te plannen? In plaats van iets helemaal opnieuw te bouwen of een aangepaste agenda-app te gebruiken die mogelijk geen toekomstige updates krijgt, waarom zou u dan niet iets gebruiken dat miljoenen anderen dagelijks gebruiken?

Als u die route volgt, kunt u een Google-agenda^{(Google Calendar)} op uw site insluiten. Het is ook gratis en gemakkelijk te gebruiken. Het enige dat u nodig hebt om aan de slag te gaan, is een Google- account.

Ga^(Get) aan de slag door in te loggen op uw Google -account, klik op het apps-raster naast uw profielfoto en klik op Agenda^(Calendar) .

De insluitcode ophalen^{(Get the Embed Code)}

Open Opties door^{(Options by )} op de drie stippen te klikken naast de agenda die u wilt insluiten.  

Klik op Instellingen en delen^{(Settings and sharing)} vanuit de pop-up.

Scroll naar beneden op de pagina Agenda^(Calendar) -instellingen totdat u het gedeelte Agenda integreren^{(Integrate calendar)} vindt.

Om uw agenda voor iedereen zichtbaar te maken en niet alleen voor degenen met wie u deze deelt, moet u deze openbaar maken^{( make it public)} .

Schakel hiervoor het selectievakje naast Beschikbaar maken voor openbaar^{(Make available to public)} onder Toegangsrechten^{(Access permissions)} in .

Sluit de code in het HTML -gedeelte van een webpagina of bericht in. Als u bijvoorbeeld WordPress gebruikt , maakt u een nieuwe pagina aan.

Klik op Tekst^{(Text )} om naar de HTML- editor te gaan. Kopieer de insluitcode^(Embed) uit uw Google - agenda en plak deze in de pagina.

Klik op het tabblad Visueel^{(Visual )} om te zien hoe de kalender eruitziet op uw pagina. U kunt ook Voorbeeld^(Preview) selecteren om het aan de voorkant van uw website te zien.

Plak de HTML^{(Calendar HTML)} -code van de kalender in een webpagina waar u objecten mag insluiten.

Als je van de standaardindelingsinstellingen van Google voor de agenda houdt, ben je klaar om te gaan. Als u de kleur, grootte en andere opties van uw agenda wilt wijzigen, kunt u de instellingen aanpassen.

Google Agenda-instellingen aanpassen^{(Customize Google Calendar Settings)}

Klik op de knop Aanpassen^(Customize) die zich direct onder de insluitcode bevindt. Dit opent een nieuw venster.

Bewerk of voeg een titel toe aan je agenda door deze te typen onder Agendatitel^{(Calendar title)} . Als u wilt dat de titel wordt weergegeven, schakelt u het vakje naast Titel^(Title) in .

Geef^(Specify) aan welke elementen u in uw agenda wilt weergeven door de volgende instellingen onder Tonen^(Show) aan te vinken :

• Titel
• Navigatie knoppen
• Gegevens
• Pictogram afdrukken
• Tabbladen
• Kalenderlijst
• Tijdzone

De standaardgrootte van Google Agenda^{(Google Calendar)} is 800 bij 600. Wijzig de grootte door de pijlen omhoog en omlaag naast Breedte^(Width) en Hoogte^(Height) te verplaatsen .

Als u bijvoorbeeld een kalender in een zijbalk wilt insluiten, verkleint u de breedte^(Width) naar een kleiner formaat, zoals 300.

Andere instellingen die u kunt aanpassen, zijn onder meer:

• Achtergrondkleur^(Background) passend bij uw merkkleur
• Tijdzone en taal
• Rand (aan of uit)
• Standaard maand
• Eerste dag van de week

Nadat u de opties hebt aangepast, kunt u uw definitieve live-agenda op uw webpagina bekijken. Wanneer je een afspraak in je agenda wijzigt, wordt deze automatisch bijgewerkt.

Hieronder^(Below) ziet u een screenshot van de maandweergave.

U kunt uw agenda ook per week bekijken.

Als je wijzigingen wilt aanbrengen, kun je altijd teruggaan naar je Google Agenda-^{(Google Calendar)} instellingen en deze aanpassen.

Zorg ervoor dat u de nieuwe HTML -code kopieert en plakt nadat u opmaakupdates hebt aangebracht om de nieuwe wijzigingen weer te geven.

Bezoekers een kalendergebeurtenis laten opslaan^{(How to Let Visitors Save a Calendar Event)}

Om bezoekers in staat te stellen uw evenement op te slaan in hun eigen Google-agenda^{(Google Calendar)} , voegt u een knop toe aan uw website. Zorg^(Make) ervoor dat je agenda openbaar is.

Open uw Google-agenda^{(Google Calendar)} . Houd er rekening mee dat wijzigingen alleen kunnen worden aangebracht vanaf een computer en niet via een mobiele app.

Om een ​​evenement toe te voegen, selecteer je de dag waaraan je het wilt toevoegen en klik je op Aanmaken^(Create) in de linkerbovenhoek.

Vul^(Fill) de details van je evenement in de pop-up in en klik op Opslaan^(Save) .

Dubbelklik erop om een ​​afspraak in uw agenda te openen. Klik vervolgens op de drie stippen in de rechterbovenhoek om Opties^(Options) te openen en selecteer Gebeurtenis publiceren^{(Publish event)} .

Sluit de HTML -code uit het pop-upvenster op uw website in, zodat bezoekers de gebeurtenis aan hun eigen Google-agenda^{(Google Calendar)} kunnen toevoegen .

Ga terug naar je website en plak de code uit de bron- of HTML - weergave waar je de evenementknop wilt weergeven.

Wanneer een bezoeker op de Google Agenda-^{(Google Calendar)} knop klikt, wordt zijn agenda geopend en wordt het evenement eraan toegevoegd. Je kunt ook mensen uitnodigen voor je evenement via de link die in hetzelfde pop-upvenster wordt weergegeven.

Sluit Google Agenda in WordPress in met behulp van plug-ins^{(Embed Google Calendar into WordPress Using Plugins)}

Zoals met de meeste functies in WordPress , is daar een plug-in voor. Het insluiten van een Google-agenda^{(Google Calendar)} in een WordPress- website is geen uitzondering. Hieronder vindt u verschillende WordPress- plug- ins die u kunt gebruiken. 

Eenvoudige Agenda-plug-in^{(Simple Calendar Plugin)}

Simple Calendar toont uw evenementen per week, maand of in een lijst. Het is eenvoudig in te stellen, mobiel responsief en aanpasbaar aan uw behoeften.

Andere kenmerken zijn onder meer: 

• Beheer evenementen in Google en laat ze automatisch bijwerken in WordPress
• Kleurcodegebeurtenissen
• Intuïtief en eenvoudig te configureren
• Extra functionaliteit met add-ons

Deze plug-in is een uitstekende keuze voor ervaren gebruikers van Google Agenda^{(Google Calendar)} . Een unieke functie is de mogelijkheid om kleurgecodeerde gebeurtenissen over te dragen.

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

Geef Google^{(Display Google)} -agenda's weer in een lijst of volledige weergave met Dan's Embedder voor Google Agenda^{(Google Calendar)} .

Het is niet nodig om gebeurtenissen in WordPress te beheren of te importeren . Je hebt slechts één of meer openbare Google-agenda^{(Google Calendars)} 's nodig . Andere kenmerken zijn onder meer:

• Opties configureren met shortcodes
• Geef op hoeveel items je wilt laten zien
• Meerdere agenda's insluiten 

Deze plug-in vereist een API - sleutel. Volg de onderstaande stappen om de jouwe te krijgen:

• Bezoek de Google Developers Console
• Controleer in het zijmenu API's en auth^{(APIs and auth)} > Referentie^(Credential)
• Klik op de knop Nieuwe sleutel maken in het gedeelte ^{(Create new key)}Openbare API-^{(Public API)} toegang
• Selecteer de browsersleutel^{(Browser key)} en laat de verwijzingsbeperking^{(Referrer Limitation)} leeg
• Zet deze sleutel op de instellingenpagina van de plug-in

Evenementenkalender WD^{(Event Calendar WD)}

Maak^(Create) een evenementpromotie en beheer of voeg evenementen toe aan uw WordPress- blog met Evenementenkalender WD^{(Event Calendar WD)} .

Geef een gedetailleerde beschrijving van uw evenementen met behulp van de WordPress- editor, voeg tags toe en wijs aan elk evenement categorieën toe. Enkele andere kenmerken zijn:

• Gebruiksvriendelijke interface voor volledige controle over hoe u agenda's en evenementen op uw website weergeeft
• Pas uw agenda's eenvoudig aan en beheer ze
• Een onbeperkt aantal agenda's en evenementen
• Optimaliseer elk evenement voor betere SEO en zichtbaarheid van zoekmachines
• Schakel knoppen voor sociaal delen in om uw evenementen bekend te maken

WP Eenvoudige boekingskalender^{(WP Simple Booking Calendar)}

Snel en eenvoudig ^(Quickly)Google Agenda^{(Google Calendars)} 's installeren en insluiten op uw website.

De gratis versie van WP Simple Booking Calendar geeft je toegang tot de basisfuncties die je nodig hebt, zoals het bijhouden van je evenementen. Hoogtepunten van de gratis versie zijn onder meer:

• Responsieve lay-out
• Back^(Backup) -up en herstel van gegevens en agenda's
• Toon uw beschikbaarheid 

Voor meer geavanceerde publicatie- en bewerkingsfuncties kunt u upgraden naar de Premium- versie.

Gebruikers die hun beschikbaarheid voor hun diensten op hun website willen beheren en weergeven of aankomende evenementen willen aankondigen, zullen veel baat hebben bij het insluiten van een Google-agenda^{(Google Calendar)} op hun site.

Door een kalender rechtstreeks op uw website te integreren, houdt u bezoekers op uw site en vergroot u de kans dat ze een afspraak maken of zich aanmelden voor een evenement.

Het enige dat u nodig hebt, is een internetverbinding, een webbrowser en een Google -account om een ​​professioneel ogende agenda op uw site te maken en weer te geven.

How To Embed Google Calendar On Your Website

Dо you need a professional-looking live calendar on your website to let visitors knоw abоut upcoming events or to schedule аn appointment? Instead of building something from scratch or using ѕome custom сalendar app that might not get future υpdatеs, why not uѕe ѕоmething that millions of othеrs are using 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

• Hoe u Google-formulieren op uw website kunt insluiten

• Hoe Google Agenda te gebruiken: 10 Pro-tips

• Hoe u Google Family Calendar kunt gebruiken om uw gezin op tijd te houden

• 2 Chrome-adresbalksnelkoppelingen om Google Agenda-evenementen te maken

• Google Analytics-methoden voor gebruikersonderzoek om websiteverkeer te stimuleren

• Hoe Google Agenda-meldingen te gebruiken om atomaire gewoonten te ondersteunen

• Hoe kom je in Inbox Zero in Gmail

• De 7 beste Gmail-add-ons

• Een bedrijf claimen op Google

• Een handtekening invoegen in Google Documenten

• Een e-mail in Gmail ongedaan maken

• Wat zijn Google-blootstellingsmeldingen voor COVID-bescherming?

• Sorteren of filteren op kleur in Google Spreadsheets

• Waarom Google Agenda de beste online agendaservice is

• Vervolgkeuzelijsten van Google Spreadsheets gebruiken

• Meerdere tussenstops gebruiken in Google Maps

• Een Google-agenda delen

• Chrome-bladwijzers exporteren en importeren

• Hoe te filteren in Google Spreadsheets

• Hoe YouTube-geschiedenis en zoekactiviteit te verwijderen