Trebate li kalendar uživo profesionalnog izgleda na vašoj web stranici kako biste posjetiteljima obavijestili o nadolazećim događajima ili zakazali sastanak? Umjesto da napravite nešto od nule ili koristite neku prilagođenu aplikaciju za kalendar koja možda neće dobiti buduća ažuriranja, zašto ne upotrijebite nešto što milijuni drugih koriste na dnevnoj bazi?

Idući tim putem, možete ugraditi Google kalendar^{(Google Calendar)} na svoju web stranicu. Također je besplatan i jednostavan za korištenje. Sve što trebate za početak je Google račun.

Započnite^(Get) tako da se prijavite na svoj Google račun, kliknite na mrežu aplikacija pored svoje profilne slike i kliknite na Kalendar^(Calendar) .

Preuzmite kod za ugradnju^{(Get the Embed Code)}

Otvorite Opcije^{(Options by )} klikom na tri točke uz kalendar koji želite ugraditi.  

U skočnom prozoru kliknite Postavke i dijeljenje .^{(Settings and sharing)}

Pomičite^(Scroll) se prema dolje po stranici postavki kalendara^(Calendar) dok ne pronađete odjeljak Integriraj kalendar^{(Integrate calendar)} .

Da bi vaš kalendar bio vidljiv svima, a ne samo onima s kojima ga dijelite, morat ćete ga učiniti javnim^{( make it public)} .

Da biste to učinili, omogućite okvir pored stavke Učini dostupnim javnosti^{(Make available to public)} u okviru Dopuštenja za pristup^{(Access permissions)} .

Ugradite kôd u HTML odjeljak web stranice ili posta. Na primjer, ako koristite WordPress , napravite novu stranicu.

Kliknite na Tekst^{(Text )} za prebacivanje na HTML uređivač. Kopirajte Embed kôd iz svog Google kalendara i zalijepite ga na stranicu.

Kliknite karticu Vizualno^{(Visual )} da vidite kako kalendar izgleda na vašoj stranici. Također možete odabrati Pregled^(Preview) da biste ga vidjeli na prednjem dijelu svoje web stranice.

Zalijepite HTML kôd Kalendara^{(Calendar HTML)} na bilo koju web stranicu na koju vam je dopušteno ugraditi objekte.

Ako vam se sviđaju Googleove zadane postavke formata za kalendar, spremni ste. Da biste promijenili boju, veličinu i druge opcije svog kalendara, možete prilagoditi njegove postavke.

Prilagodite postavke Google kalendara^{(Customize Google Calendar Settings)}

Kliknite gumb Prilagodi^(Customize) koji se nalazi izravno ispod koda za ugradnju. Ovo će otvoriti novi prozor.

Uredite ili dodajte naslov svom kalendaru tako da ga upišete pod Naslov kalendara^{(Calendar title)} . Ako želite da se prikaže naslov, omogućite okvir pored Naslov^(Title) .

Odredite^(Specify) koje elemente želite prikazati u svom kalendaru tako da provjerite sljedeće postavke ispod Prikaži^(Show) :

• Titula
• Navigacijski gumbi
• Podaci
• Ikona za ispis
• Kartice
• Popis kalendara
• Vremenska zona

Zadana veličina Google kalendara^{(Google Calendar)} je 800 puta 600. Promijenite veličinu pomicanjem strelica gore i dolje pored širine^(Width) i visine^(Height) .

Na primjer, ako želite ugraditi kalendar u bočnu traku, smanjite širinu^(Width) na manju veličinu kao što je 300.

Ostale postavke koje možete prilagoditi uključuju:

• Boja pozadine^(Background) koja odgovara boji vaše robne marke
• Vremenska zona i jezik
• Obrub (uključen ili isključen)
• Zadani mjesec
• Prvi dan u tjednu

Nakon što prilagodite opcije, pogledajte svoj konačni kalendar uživo na svojoj web stranici. Kada promijenite događaj u svom kalendaru, on će se automatski ažurirati.

Ispod^(Below) je snimka zaslona mjesečnog prikaza.

Također možete vidjeti svoj kalendar po tjednu.

Ako želite napraviti bilo kakve promjene, uvijek se možete vratiti na postavke Google kalendara^{(Google Calendar)} i prilagoditi ih.

Obavezno kopirajte i zalijepite novi HTML kôd nakon ažuriranja formatiranja kako bi se odrazile nove promjene.

Kako dopustiti posjetiteljima da spremaju događaj iz kalendara^{(How to Let Visitors Save a Calendar Event)}

Kako biste posjetiteljima omogućili spremanje vašeg događaja u svoj Google kalendar^{(Google Calendar)} , dodajte gumb na svoju web stranicu. Provjerite^(Make) je li vaš kalendar javan.

Otvorite svoj Google kalendar^{(Google Calendar)} . Imajte na umu da se promjene mogu izvršiti samo s računala, a ne putem mobilne aplikacije.

Da biste dodali događaj, odaberite dan na koji ga želite dodati i kliknite na Kreiraj^(Create) u gornjem lijevom kutu.

Ispunite^(Fill) pojedinosti svog događaja u skočnom prozoru i kliknite Spremi^(Save) .

Da biste otvorili događaj u svom kalendaru, dvaput ga kliknite. Zatim kliknite tri točke u gornjem desnom kutu da otvorite Opcije^(Options) i odaberite Objavi događaj^{(Publish event)} .

Ugradite HTML kôd iz skočnog prozora na svoju web stranicu kako biste posjetiteljima omogućili dodavanje događaja u svoj Google kalendar^{(Google Calendar)} .

Vratite se na svoju web stranicu i zalijepite kôd iz izvornog ili HTML prikaza gdje želite da se prikaže gumb događaja.

Kada posjetitelj klikne na gumb Google kalendar^{(Google Calendar)} , otvorit će njegov kalendar i dodati događaj u njega. Također možete pozvati ljude na svoj događaj koristeći vezu prikazanu u istom skočnom prozoru.

Ugradite Google kalendar u WordPress pomoću dodataka^{(Embed Google Calendar into WordPress Using Plugins)}

Kao i kod većine funkcija u WordPressu^(WordPress) , postoji dodatak za to. Ugradnja Google kalendara^{(Google Calendar)} u web stranicu WordPress nije iznimka. U nastavku je nekoliko WordPress dodataka koje možete koristiti. 

Jednostavan dodatak za kalendar^{(Simple Calendar Plugin)}

Jednostavni kalendar^{(Simple Calendar)} prikazuje vaše događaje po tjednu, mjesecu ili na popisu. Jednostavan je za postavljanje, mobilno reagira i prilagodljiv vašim potrebama.

Ostale značajke uključuju: 

• Upravljajte događajima u Googleu^(Google) i neka se automatski ažuriraju u WordPressu^(WordPress)
• Događaji koda boja
• Intuitivan i jednostavan za konfiguraciju
• Dodatna funkcionalnost s dodacima^{( add-ons)}

Ovaj dodatak izvrstan je izbor za napredne korisnike Google kalendara^{(Google Calendar)} . Jedna jedinstvena značajka je mogućnost prijenosa događaja označenih bojama.

Dan's Embedder za Google kalendar^{(Dan’s Embedder for Google Calendar)}

Prikažite Google^{(Display Google)} kalendare na popisu ili u cijelosti s Dan's Embedder za Google kalendar^{(Google Calendar)} .

Nema potrebe za upravljanjem ili uvozom događaja u WordPress . Potreban vam je samo jedan ili više javnih Google kalendara^{(Google Calendars)} . Ostale značajke uključuju:

• Konfigurirajte opcije s kratkim kodovima
• Odredite koliko stavki želite prikazati
• Ugradite više kalendara 

Ovaj dodatak zahtijeva API ključ. Slijedite korake u nastavku da biste dobili svoje:

• Posjetite Google Developers Console
• Na bočnom izborniku provjerite API-ji i auth^{(APIs and auth)} > Vjerodajnica^(Credential)
• Kliknite gumb Stvori novi ključ^{(Create new key)} u odjeljku Pristup javnom API -ju^{(Public API)}
• Odaberite tipku preglednika^{(Browser key)} i ostavite Ograničenje preporuke^{(Referrer Limitation)} praznom
• Stavite ovaj ključ na stranicu postavki dodatka

Kalendar događaja WD^{(Event Calendar WD)}

Napravite^(Create) promociju događaja i upravljajte ili dodajte događaje na svoj WordPress blog pomoću Kalendara događaja WD^{(Event Calendar WD)} .

Navedite detaljan opis svojih događaja pomoću WordPress uređivača, priložite oznake i dodijelite kategorije svakom od njih. Neke druge značajke uključuju:

• Korisničko sučelje za potpunu kontrolu nad načinom na koji prikazujete kalendare i događaje na svojoj web stranici
• Jednostavno prilagodite i upravljajte svojim kalendarima
• Neograničen broj kalendara i događaja
• Optimizirajte svaki događaj za bolju vidljivost SEO i tražilice
• Omogućite gumbe za dijeljenje na društvenim mrežama kako biste proširili vijest o svojim događajima

WP jednostavan kalendar rezervacija^{(WP Simple Booking Calendar)}

Brzo^(Quickly) i jednostavno instalirajte i ugradite Google kalendare^{(Google Calendars)} na svoju web stranicu.

Besplatna verzija WP Simple Booking kalendara^{(WP Simple Booking Calendar)} daje vam pristup osnovnim značajkama koje su vam potrebne kao što je praćenje vaših događaja. Najvažnije značajke besplatne verzije uključuju:

• Responzivni izgled
• Sigurnosno kopiranje^(Backup) i vraćanje podataka i kalendara
• Prikažite svoju dostupnost 

Za naprednije funkcije objavljivanja i uređivanja možete nadograditi na Premium verziju.

Korisnici koji žele upravljati i prikazati svoju dostupnost za svoje usluge na svojoj web stranici ili najaviti nadolazeće događaje imat će velike koristi od ugradnje Google kalendara^{(Google Calendar)} na svoje web-mjesto.

Integracija kalendara izravno na vašu web stranicu zadržat će posjetitelje na vašoj web-lokaciji i povećati šanse da zakažu termin ili se prijave za događaj.

Sve što trebate je internetska veza, web preglednik i Google račun za izradu i prikaz kalendara profesionalnog izgleda na svojoj web stranici.

How To Embed Google Calendar On Your Website

Do yоu need a profеssіonal-looking liνe calendar on your website to let visіtors know about upcoming events or to schedule аn appoіntment? Instead of building something from scratch оr usіng some cuѕtom calendar aрp that might not get future updates, why not use something that millions оf others arе 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

• Kako ugraditi Google obrasce na svoju web stranicu

• Kako koristiti Google kalendar: 10 profesionalnih savjeta

• Kako koristiti Google obiteljski kalendar da svoju obitelj bude na vrijeme

• 2 prečaca u adresnoj traci Chrome za stvaranje događaja u Google kalendaru

• Metode istraživanja korisnika usluge Google Analytics za povećanje prometa na web-mjestu

• Kako izvesti i uvesti Chrome oznake

• Dodajte upute za vožnju Google Maps na svoju web stranicu

• 3 načina za stvaranje obruba u Google dokumentima

• Kako napraviti sigurnosnu kopiju povijesti Google Chromea

• Nedostaje widget trake Google pretraživanja? Kako ga vratiti na Android

• 7 najboljih dodataka za Gmail

• Kako filtrirati u Google tablicama

• Što je Software Reporter Tool u Chromeu i kako ga onemogućiti

• Kako pregledati povijest pretraživanja na Google kartama

• Kako koristiti SUMIF u Google tablicama

• Kako promijeniti zadani Google račun

• Kako popraviti Gmail kada ne prima e-poštu

• Kako napraviti linijski grafikon u Google tablicama

• Kako dijeliti Google kalendar

• Kako koristiti Google Tasks – Vodič za početak