”Lisää kalenteriin”-painikkeiden lisääminen sähköpostiin (Google, Outlook, iCal)
Last modified on 24. heinäkuuta 2026 • 3 min read • 628 words
Tämä vaatii enemmän työtä kuin sen pitäisi vuonna 2026. Nämä olivat ensimmäiset ohjeet, jotka toimivat minulla: https://www.litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails/ . Ohjeissa käytetään pääasiassa käsin kirjoitettua koodia (sekä Amit Agarwalin Calendar Links -työkalulla ( https://www.labnol.org/apps/calendar.html ) luotua koodia).
Mutta eikö tähän pitäisi olla olemassa Chrome-laajennus? Tai JavaScript? Ohjeissa käytetään yhdistelmää erilaisia verkkotyökaluja, mikä tekee prosessista työlästä… Valitettavasti, jos kaikki lukemani on totta, hyvää ilmaista ratkaisua ei ole (ota yhteyttä, jos tiedät toisin!). Vielä pahempaa on, että tapahtumaa ei voi lisätä automaattisesti Applen iCloud-kalenteriin muuten kuin tuomalla iCal-tiedoston (mikä vaatii paljon manuaalista klikkailua).
Mutta sekä Google että Outlook hyväksyvät kalenteritapahtumatiedot suoraan pyynnön URL-osoitteen GET-kyselyparametreissa (eli yksinkertaisen HTML-linkin tai painikkeen kautta, jota voi klikata). On suhteellisen helppoa lisätä sähköpostiin painikkeita, jotka avaavat Google-kalenterin tai Outlookin ja täyttävät kyseiset kalenterikentät. Kuten jo mainittiin, ainoastaan Applen iCal ei vieläkään tue tätä ominaisuutta, ja yksi kiertotapa on tarjota iCal-tiedosto ladattavaksi iCaliin tuontia varten, vaikka tämä edellyttääkin, että tiedosto on jollain palvelimella (Gdrive, OneDrive tai DropBox toimisivat myös).
Mutta miten voin luoda painikkeet ja tarvittavan koodin helposti sähköpostiin muutamassa sekunnissa sähköpostia kirjoittaessani? Vastaukseni on: Espanson avulla! Espanso ( https://espanso.org/ ) seuraa kaikkia näppäinpainalluksiasi ja laukaisee tiettyjä tapahtumia, kun se havaitsee tiettyjä yhdistelmiä, jotka voit määrittää vapaasti. Olen määrittänyt kirjainyhdistelmän ”\cal” skriptille, joka avaa valintaikkunan, jossa on kentät ”tapahtuma”, ”paikka”, ”alkamispäivä/aika” ja ”päättymispäivä/aika”, ja lisää sitten sähköpostiohjelmaani painikkeen, jossa on oikeat tiedot. Jälleen kerran Apple-käyttäjien on ladattava .ical-tiedosto ja tuotava se iCalendariin. Valitettavasti iCal-tiedoston luominen ja sen lataaminen palvelimelle on paljon työläämpää kuin sen pitäisi olla. Voit käyttää Amit Agarwalin verkkotyökalua tiedoston luomiseen ( https://www.labnol.org/apps/calendar.html ), ladata sen sitten valitsemallesi palvelimelle tai tiedostojen jakelupalveluun ja kirjoittaa muistiin URL-osoitteen, joka lisätään Espanso-lomakkeeseen. Myös suhteellisen helppoa – Linuxissa tai Macissa – on ladata lennossa luotu iCal-tiedosto scp:n avulla valitsemallesi palvelimelle, kuten alla olevassa Espanson YAML-määrityskohdassa on tehty. Huomaa, että scp-komento käyttää salasanatonta todennusta, joka sinun on määritettävä!
- trigger: "/cal"
vars:
- name: form
type: form
params:
layout: |
Tapahtuman otsikko (käytä %20 välilyönneille): [[title]]
Paikka (käytä %20 välilyönneille): [[loc]]
Päivämäärä (VVVV-KK-PP): [[date]]
Aloitusaika (HH:MM): [[start]]
Lopetusaika (HH:MM): [[end]]
- name: gdate
type: shell
params:
cmd: "echo '{{form.date}}' | tr -d '-'"
- name: gstart
type: shell
params:
cmd: "echo '{{form.start}}' | tr -d ':'"
- nimi: gend
tyyppi: shell
parametrit:
cmd: "echo '{{form.end}}' | tr -d ':'"
- nimi: ics_filename
tyyppi: shell
parametrit:
komento: |
FILENAME="event_{{gdate}}_{{gstart}}.ics"
TITLE_CLEAN=$(echo '{{form.title}}' | sed 's/%20/ /g')
LOC_CLEAN=$(echo '{{form.loc}}' | sed 's/%20/ /g')
# Luo iCal-tiedosto paikallisesti
cat <<EOF > "/tmp/$FILENAME"
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//mjlab.fi//Espanso//EN
BEGIN:VEVENT
SUMMARY:$TITLE_CLEAN
DTSTART:{{gdate}}T{{gstart}}00
DTEND:{{gdate}}T{{gend}}00
LOCATION:$LOC_CLEAN
END:VEVENT
END:VCALENDAR
EOF
# Lataa palvelimellesi (poista kommenttimerkit ja muokkaa polku/käyttäjä palvelimesi mukaiseksi)
scp /tmp/$FILENAME user@mjlab.fi:/var/www/mjlab.fi/iCal/$FILENAME > /dev/null 2>&1
echo "$FILENAME"
html: |
<html>
<body>
<style>
.addToCalendar_google { background-color: #bf3f3f; border-radius: 28px; border: 1px solid #8f0e0e; display: inline-block; cursor: pointer; color: #ffffff; font-family: Arial, sans-serif; font-size: 16px; padding: 6px 12px; text-decoration: none; text-shadow: 0px 1px 0px #441515; margin: 5px; }
.addToCalendar_windows { background-color: #4981c1; border-radius: 28px; reunus: 1px kiinteä #100f4e; näyttö: inline-block; osoitin: osoitin; väri: #ffffff; fonttiperhe: Arial, sans-serif; fonttikoko: 16px; sisäväli: 6px 12px; text-decoration: none; text-shadow: 0px 1px 0px #273066; margin: 5px; }
.addToCalendar_apple { background-color: #8f8f8f; border-radius: 28px; reunus: 1px kiinteä #2c302c; näyttö: inline-block; osoitin: osoitin; väri: #ffffff; fonttiperhe: Arial, sans-serif; fonttikoko: 16px; padding: 6px 12px; text-decoration: none; text-shadow: 0px 1px 0px #080c07; margin: 5px; }
.addToCalendar_google img, .addToCalendar_windows img, .addToCalendar_apple img { width: 20px; height: 20px; vertical-align: middle; border: none; }
.addToCalendar_google span, .addToCalendar_windows span, .addToCalendar_apple span { vertical-align: middle; padding-left: 12px; }
</style>
<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text={{form.title}}&dates={{gdate}}T{{gstart}}00/{{gdate}}T{{gend}}00&location={{form.loc}}" class="addToCalendar_google">
<img src="https://mjlab.fi/iCal/google.png" alt="Google" width="20" height="20" style="margin-right: 6px; vertical-align: middle; border: none;" />
<span>Lisää Google-kalenteriin</span>
</a>
<a href="https://outlook.office.com/calendar/0/action/compose?allday=false&subject={{form.title}}&startdt={{form.date}}T{{form.start}}:00&enddt={{form.date}}T{{form.end}}:00&location={{form.loc}}&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent" class="addToCalendar_windows">
<img src="https://mjlab.fi/iCal/windows.png" alt="Outlook" width="20" height="20" style="margin-right: 6px; vertical-align: middle; border: none;" />
<span>Lisää MS Outlookiin</span>
</a>
<a href="https://mjlab.fi/iCal/{{ics_filename}}" class="addToCalendar_apple">
<img src="https://mjlab.fi/iCal/apple.png" alt="Apple" width="20" height="20" style="margin-right: 6px; vertical-align: middle; border: none;" />
<span>Lisää Appleen (iCal-tiedosto)</span>
</a>
</body>
</html>