Siirry pääsisältöön

Kuinka upottaa aikataulu verkkosivullesi JavaScriptin avulla?

Päivitetty yli kuukausi sitten

Zenamu tarjoaa upotettavan skriptin, jonka avulla voit näyttää tuntiaikataulusi omalla verkkosivustollasi. Sivullasi näytetään seuraavan 30 päivän tunnit. Lista on täysin responsiivinen (mukautuu automaattisesti eri laitteiden ja näyttöjen leveyteen) ja toimii saumattomasti muiden sisältöjen kanssa.

Integrointi on yksinkertainen ja vie alle 5 minuuttia. Riittää, että kopioit pienen koodinpätkän ja liität sen verkkosivullesi.

Perustiedot HTML:stä ja JavaScriptistä riittävät (suosittelemme toteutusta yhdessä webmasterin kanssa).

Jos käytät verkkosivustollasi sisällönhallintajärjestelmää (CMS), aikataulun lisääminen onnistuu myös sen kautta. Katso ohjeemme Webnode-, WordPress- ja Wix.com-alustoille.

Aikataulun lisääminen verkkosivulle – vaihe vaiheelta

1. Lisää skripti

Skriptin voi lisätä kahdella tavalla:

a. Sivun <head>-osioon

Lisää seuraava rivi <head>-tagien väliin. Jos lisäät skriptin tähän kohtaan, muista lisätä myös defer, muuten aikataulu ei lataudu oikein.

Tuntiaikataulu

<script defer src="https://zenamu.com/calendar/list.js" crossorigin></script>

Workshopit

<script defer src="https://zenamu.com/calendar/workshops.js" crossorigin></script>

Kurssit

<script defer src="https://zenamu.com/calendar/courses.js" crossorigin></script>

b. Sivun <body>-osaan (ennen </body>)

Voit myös lisätä skriptin aivan sivun loppuun ennen </body>-tagia:

Tuntiaikataulu

<script src="https://zenamu.com/calendar/list.js" crossorigin></script>

Workshopit

<script src="https://zenamu.com/calendar/workshops.js" crossorigin></script>

Kurssit

<script src="https://zenamu.com/calendar/courses.js" crossorigin></script>

2. Lisää elementti

Lisää seuraava <div> siihen kohtaan sivustollasi, mihin haluat aikataulun näkyvän:

Tuntiaikataulu

<div id="zenamu-calendar" calendar-id="[your calendar ID]"></div>

Workshopit

<div id="zenamu-workshops" calendar-id="[your calendar ID]"></div>

Kurssit

<div id="zenamu-courses" calendar-id="[your calendar ID]"></div>

Korvaa [your calendar ID] omalla Zenamu-kalenteritunnuksellasi (löydät sen kohdasta Asetukset > Julkinen kalenteri > Integrointi verkkosivulle).

3. Valmista!

Aikataulu näyttää sivustollasi suunnilleen tältä 😏:

Workshops

Courses

Vastasiko tämä kysymykseesi?