Tarvitsetko ammattimaisen näköisen live-kalenterin verkkosivustollesi kertoaksesi vierailijoista tulevista tapahtumista tai varataksesi tapaamisen? Sen sijaan, että rakentaisit jotain tyhjästä tai käyttäisit mukautettua kalenterisovellusta, joka ei välttämättä saa tulevia päivityksiä, miksi et käyttäisi jotain, jota miljoonat muut käyttävät päivittäin?

Tällä reitillä voit upottaa Google-kalenterin^{(Google Calendar)} sivustoosi. Se on myös ilmainen ja helppokäyttöinen. Aloitaksesi tarvitset vain Google - tilin.

Aloita^(Get) kirjautumalla Google -tiliisi, napsauttamalla profiilikuvasi vieressä olevaa sovellusruudukkoa ja napsauttamalla Kalenteri^(Calendar) .

Hanki upotuskoodi^{(Get the Embed Code)}

Avaa Asetukset^{(Options by )} napsauttamalla kolmea pistettä sen kalenterin vieressä, jonka haluat upottaa.  

Napsauta ponnahdusikkunasta Asetukset ja jakaminen .^{(Settings and sharing)}

Vieritä^(Scroll) alas Kalenterin^(Calendar) asetukset -sivua, kunnes löydät Integroi kalenterin^{(Integrate calendar)} -osion.

Jotta kalenterisi näkyy kaikille, ei vain niille, joiden kanssa jaat sen, sinun on tehtävä se julkinen^{( make it public)} .

Voit tehdä tämän ottamalla käyttöön Käyttöoikeudet -kohdassa^{(Access permissions)} Aseta julkisesti^{(Make available to public)} -kohdan viereisen ruudun .

Upota koodi verkkosivun tai viestin HTML -osioon. ^(HTML)Jos käytät esimerkiksi WordPressiä^(WordPress) , luo uusi sivu.

Napsauta Teksti^{(Text )} vaihtaaksesi HTML - editoriin. Kopioi upotuskoodi^(Embed) Google - kalenteristasi^(Google) ja liitä se sivulle.

Napsauta Visual - välilehteä nähdäksesi miltä kalenteri näyttää sivullasi. Voit myös valita Esikatselun^(Preview) nähdäksesi sen verkkosivustosi etuosassa.

Liitä kalenterin HTML^{(Calendar HTML)} - koodi mille tahansa verkkosivulle, jolle voit upottaa objekteja.

Jos pidät Googlen kalenterin oletusmuotoasetuksista, olet valmis. Voit muuttaa kalenterisi väriä, kokoa ja muita asetuksia muokkaamalla sen asetuksia.

Muokkaa Google-kalenterin asetuksia^{(Customize Google Calendar Settings)}

Napsauta Mukauta^(Customize) - painiketta, joka sijaitsee suoraan upotuskoodin alla. Tämä avaa uuden ikkunan.

Muokkaa tai lisää kalenteriisi otsikko kirjoittamalla se Kalenterin otsikko^{(Calendar title)} -kohtaan . Jos haluat otsikon näkyvän, ota Otsikko^(Title) -kohdan vieressä oleva ruutu käyttöön .

Määritä^(Specify) , mitkä elementit haluat näyttää kalenterissasi tarkistamalla seuraavat asetukset kohdasta Näytä^(Show) :

• Otsikko
• Navigointipainikkeet
• Data
• Tulostuskuvake
• Välilehdet
• Kalenteriluettelo
• Aikavyöhyke

Google^{(Google Calendar)} -kalenterin oletuskoko on 800 x 600. Muuta kokoa siirtämällä ylös- ja alas-nuolia Leveys-^(Width) ja Korkeus^(Height) -kohdan vieressä .

Jos esimerkiksi haluat upottaa kalenterin sivupalkkiin, pienennä Leveyttä^(Width) pienempään kokoon, kuten 300.

Muita mukautettuja asetuksia ovat:

• Taustaväri^(Background) vastaa brändisi väriä
• Aikavyöhyke ja kieli
• Reuna (päällä tai pois päältä)
• Oletuskuukausi
• Viikon ensimmäinen päivä

Kun olet mukauttanut asetuksia, tarkastele lopullista live-kalenteriasi verkkosivullasi. Kun muutat tapahtumaa kalenterissasi, se päivittyy automaattisesti.

Alla^(Below) on kuvakaappaus kuukausinäkymästä.

Voit myös tarkastella kalenteriasi viikoittain.

Jos haluat tehdä muutoksia, voit aina palata Google-kalenterisi^{(Google Calendar)} asetuksiin ja muokata niitä.

Muista kopioida ja liittää uusi HTML - koodi uusien muutosten mukaisten muotoilupäivitysten tekemisen jälkeen.

Kuinka antaa vierailijoiden tallentaa kalenteritapahtuma^{(How to Let Visitors Save a Calendar Event)}

Lisää painike verkkosivustollesi, jotta vierailijat voivat tallentaa tapahtumasi omaan Google-kalenteriinsa^{(Google Calendar)} . Varmista^(Make) , että kalenterisi on julkinen.

Avaa Google-kalenterisi^{(Google Calendar)} . Huomaa, että muutoksia voi tehdä vain tietokoneelta, ei mobiilisovelluksesta.

Lisää tapahtuma valitsemalla päivä, jolle haluat lisätä sen, ja napsauttamalla Luo^(Create) vasemmassa yläkulmassa.

Täytä^(Fill) tapahtumasi tiedot ponnahdusikkunaan ja napsauta Tallenna^(Save) .

Avaa tapahtuma kalenterissasi kaksoisnapsauttamalla sitä. Napsauta sitten kolmea pistettä oikeassa yläkulmassa avataksesi Asetukset^(Options) ja valitse Julkaise tapahtuma^{(Publish event)} .

Upota HTML - koodi verkkosivustosi ponnahdusikkunasta, jotta vierailijat voivat lisätä tapahtuman omaan Google-kalenteriinsa^{(Google Calendar)} .

Palaa verkkosivustollesi ja liitä koodi lähde- tai HTML - näkymästä, johon haluat tapahtumapainikkeen näkyvän.

Kun vierailija napsauttaa Google-kalenteri^{(Google Calendar)} - painiketta, se avaa kalenterin ja lisää tapahtuman siihen. Voit myös kutsua ihmisiä tapahtumaasi käyttämällä samassa ponnahdusikkunassa näkyvää linkkiä.

Upota Google-kalenteri WordPressiin lisäosien avulla^{(Embed Google Calendar into WordPress Using Plugins)}

Kuten useimpien WordPressin^(WordPress) toimintojen kohdalla , sitä varten on laajennus. Google^{(Google Calendar)} -kalenterin upottaminen WordPress - verkkosivustoon ei ole poikkeus. Alla on useita WordPress -laajennuksia, joiden käyttöä voit harkita. 

Yksinkertainen kalenterilaajennus^{(Simple Calendar Plugin)}

Yksinkertainen kalenteri^{(Simple Calendar)} näyttää tapahtumasi viikoittain, kuukausittain tai luettelona. Se on helppo ottaa käyttöön, se on mobiiliresponsiivinen ja muokattavissa tarpeidesi mukaan.

Muita ominaisuuksia ovat: 

• Hallinnoi tapahtumia Googlessa^(Google) ja päivitä ne automaattisesti WordPressissä^(WordPress)
• Värikooditapahtumat
• Intuitiivinen ja helppo määrittää
• Lisätoiminnot lisäosilla^{( add-ons)}

Tämä laajennus on erinomainen valinta Google-kalenterin^{(Google Calendar)} tehokäyttäjille. Yksi ainutlaatuinen ominaisuus on kyky siirtää värikoodattuja tapahtumia.

Dan's Embedder Google-kalenteriin^{(Dan’s Embedder for Google Calendar)}

Näytä Google^{(Display Google)} -kalenterit luettelona tai koko näkymänä Dan's Embedder for Google Calendar -sovelluksella .

Tapahtumia ei tarvitse hallita tai tuoda WordPressissä^(WordPress) . Tarvitset vain yhden tai useamman julkisen Google-kalenterin^{(Google Calendars)} . Muita ominaisuuksia ovat:

• Määritä asetukset lyhytkoodeilla
• Määritä näytettävän kohteen määrä
• Upota useita kalentereita 

Tämä laajennus vaatii API - avaimen. Noudata alla olevia ohjeita saadaksesi omasi:

• Käy Google Developers Consolessa^{(Google Developers Console)}
• Valitse sivuvalikosta API ja todennus^{(APIs and auth)} > Tunnistetiedot^(Credential)
• Napsauta Luo uusi avain^{(Create new key)} -painiketta Julkinen API^{(Public API)} -käyttö -osiossa
• Valitse Selainavain^{(Browser key)} ja jätä Viittausrajoitus^{(Referrer Limitation)} tyhjäksi
• Laita tämä avain laajennuksen asetussivulle

Tapahtumakalenteri WD^{(Event Calendar WD)}

Luo^(Create) tapahtumapromootio ja hallinnoi tai lisää tapahtumia WordPress - blogiisi Event Calendar WD :n avulla .

Anna yksityiskohtainen kuvaus tapahtumistasi WordPress - editorin avulla, liitä tunnisteet ja luokittele kullekin tapahtumalle. Joitakin muita ominaisuuksia ovat:

• Käyttäjäystävällinen käyttöliittymä, jolla voit hallita täysin sitä, kuinka näytät kalentereita ja tapahtumia verkkosivustollasi
• Mukauta ja hallinnoi kalentereitasi helposti
• Rajaton määrä kalentereita ja tapahtumia
• Optimoi jokainen tapahtuma parantaaksesi hakukoneoptimointia^(SEO) ja hakukonenäkyvyyttä
• Ota sosiaalisen median jakamispainikkeet käyttöön levittääksesi sanaa tapahtumistasi

WP yksinkertainen varauskalenteri^{(WP Simple Booking Calendar)}

^(Quickly)Asenna ja upota Google-kalenterit^{(Google Calendars)} verkkosivustollesi nopeasti ja helposti.

WP Simple Booking Calendar -kalenterin^{(WP Simple Booking Calendar)} ilmainen versio antaa sinulle pääsyn tarvitsemiisi perusominaisuuksiin, kuten tapahtumien seuraamiseen. Ilmaisen version kohokohtia ovat:

• Responsiivinen asettelu
• Varmuuskopioi^(Backup) ja palauta tiedot ja kalenterit
• Näytä saatavuus 

Voit päivittää Premium - versioon edistyneempiä julkaisu- ja muokkaustoimintoja varten.

Käyttäjät, jotka haluavat hallita ja näyttää palvelujensa saatavuutta verkkosivustollaan tai ilmoittaa tulevista tapahtumista, hyötyvät suuresti Google-kalenterin^{(Google Calendar)} upottamisesta sivustoonsa.

Kalenterin integroiminen suoraan verkkosivustollesi pitää vierailijat sivustollasi ja lisää mahdollisuuksia sopia tapaamisesta tai ilmoittautua tapahtumaan.

Tarvitset vain Internet-yhteyden, verkkoselaimen ja Google -tilin ammattimaisen kalenterin luomiseen ja näyttämiseen sivustossasi.

How To Embed Google Calendar On Your Website

Do you need a professional-looking live calendar on your website to let visitors know about upcoming еvents or to schedule an appointmеnt? Instead of building something from scratch or using somе custom calendar app that might not get future updates, why not use something that millions of others 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

• Kuinka upottaa Google Forms sivustollesi

• Google-kalenterin käyttäminen: 10 ammattilaisvinkkiä

• Kuinka käyttää Googlen perhekalenteria perheesi pitämiseen ajoissa

• 2 Chromen osoitepalkin pikakuvaketta Google-kalenterin tapahtumien luomiseen

• Google Analyticsin käyttäjätutkimusmenetelmät verkkosivuston liikenteen lisäämiseksi

• Kuinka varmuuskopioida Google Chrome -historia

• Google Sheets -pudotusluetteloiden käyttäminen

• 9 Google Mapsin piilotettua ominaisuutta, jotka kannattaa tarkistaa

• 23 käteviä Google-kalenterin pikanäppäimiä

• Mikä on Software Reporter Tool Chromessa ja kuinka se poistetaan käytöstä

• Google SafeSearchin kytkeminen pois päältä

• Kuinka YouTube-algoritmi toimii?

• Google-lomakkeen tekeminen: Täydellinen opas

• Kuinka päästä Inbox Zeroan Gmailissa

• Google-kalenterin jakaminen

• Mikä on tehostettu suojaus Google Chromessa ja kuinka se otetaan käyttöön

• SUMIFin käyttäminen Google Sheetsissa

• Kuinka tarkastella Google Maps -hakuhistoriaasi

• Google-kalenterin ilmoitusten käyttäminen atomin tottumusten tukemiseen

• 8 Google-hakuvinkkiä: Löydä aina etsimäsi