Přidání události do Google Kalendáře z akce na WordPress

Jednoduché řešení, jak na WordPress webu s ACF (Advanced Custom Fields) přidat tlačítko pro export události do Google Kalendáře. Celé řešení je založené na PHP a nepotřebujeme žádný dodatečný JavaScript.

Datum poslední změny: 2. 6. 2025

☝️ Pokud nepotřebuješ data pro akci tahat z ACF, ale máš jednu dvě akce, které na web přidáváš ručně, je pro tebe tohle řešení overkill a jednoduše si uprav tenhle odkaz (pro lepší čitelnost bez diakritiky), který dej “pod tlačítko”:

https://calendar.google.com/calendar/render?action=TEMPLATE&text=Krest%20romanu%20Trivandrum&dates=20250605T183000/20250605T200000&details=Pro%20vice%20informaci:%20https://bejkuvmls.cz/triva-shop/&location=Divadlo%20Exil,%20tr.%20Miru%2060,%20530%2002%20Pardubice%20I-Zelene%20Predmesti,%20Czechia

Výchozí instalace

• WordPress
• Plugin Advanced Custom Fields (ACF)
• "Akce" custom post type vytvořený přes ACF, který má následující pole:
  • ACF pole pro datum/čas události (akce_termin)
  • ACF pole pro délku události v minutách (akce_delka-akce)
  • ACF pole pro místo konání (akce_misto)

Krok 1: PHP funkce pro přípravu dat

Nejprve vytvoříme PHP funkci, která připraví všechna potřebná data pro Google Kalendář. Jedná se o přenositelnou funkcionalitu, takže kód vložíme do custom pluginu (tak to mam radši, do tématu dávám věci, co se týkají vzhledu a nejsou obecně přenositelné).

function get_event_data_4_google_calendar($post_id = null) {
        if (empty($post_id)) {
            $post_id = get_the_ID();
        }
        
        // titulek prispevku
        $event_title = get_the_title($post_id);
        
        // data z ACF
        $event_start_date = get_field('akce_termin', $post_id);
        $event_duration = get_field('akce_delka-akce', $post_id);
        $event_location = get_field('akce_misto', $post_id);
        
        // prevod data na format pro Google Calendar
        if (empty($event_start_date)) {
            return '';
        }
        
        // ziskáni WordPress casove zony
        $wp_timezone = new DateTimeZone(get_option('timezone_string'));
        $start_datetime = new DateTime($event_start_date, $wp_timezone);
        
        // vytvoreni casu konce udalosti
        if (empty($event_duration)) {
            $event_duration = 60; // defaultni delka akce 1 hodina
        }

        $end_datetime = clone $start_datetime;
        $end_datetime->modify('+' . $event_duration . ' minutes');
        
        // formatovani pro Google Calendar URL
        $start_formatted = $start_datetime->format('Ymd\\THis');
        $end_formatted = $end_datetime->format('Ymd\\THis');
        
        // popis udalosti
        $event_description = 'Více informací na: ' . get_permalink($post_id);
        
        // Návrat dat pro Google Calendar
        return array(
            'title' => $event_title,
            'startDate' => $start_formatted,
            'endDate' => $end_formatted,
            'description' => $event_description,
            'location' => $event_location
        );
} 

☝️ Poznámka: Tu časovou zónu z kódu výše pryč fakt nedávej. Čas začátku akce pak nebude sedět. 😉

Dále vytvoříme funkci pro sestavení url pro Google kalendář. Ve funkci voláme výše zmíněnou funkci na přípravu dat: get_event_data_4_google_calendar.

// ziskani dat pro Google Calendar
function get_google_cal_url($post_id = null) {
        if (empty($post_id)) {
                $post_id = get_the_ID();
        }

        // ziskani dat pro Google Calendar
        $event_data = get_event_data_4_google_calendar($post_id);

        // sestaveni Google Calendar URL
        $google_url = "<https://calendar.google.com/calendar/render?action=TEMPLATE>";
        $google_url .= "&text=" . urlencode($event_data['title']);
        $google_url .= "&dates=" . $event_data['startDate'] . "/" . $event_data['endDate'];
        $google_url .= "&details=" . urlencode($event_data['description']);
        if (!empty($event_data['location'])) {
                $google_url .= "&location=" . urlencode($event_data['location']);
        }

        return $google_url;
}  

Krok 2: Vytvoření tlačítka pro Google Kalendář

Nyní můžeme vytvořit tlačítko (bo cokoliv jiného), které bude využívat data z naší funkce. Tento kód můžeš umístit přímo do (child) šablony pro daný typ příspěvku (post type). Pokud používáš nějaký builder, který umí vkládat php, můžeš vložit kód přímo do stránky. Případně je možné vytvořit shortcode, který umí vložit i WordPress sám.

V případě php kódu:

<?php

$post_id = get_the_ID();
$google_url = get_google_cal_url($post_id);
        
echo '<button 
    class="akce-button" 
    onclick="window.open(\\'' . esc_url($google_url) . '\\', \\'_blank\\')" 
    aria-label="Přidat událost do Google kalendáře"
    type="button"
    title="Kliknutím přidáte událost do svého Google kalendáře v novém okně">
    Přidat do Google kalendáře
</button>';

?>

Tlačítko můžeme ještě trochu stylovat:

.akce-button {
  background: black;
  color: white;
  font-size: 1rem;
  border: solid 1px black;
  border-radius: 0.5rem;
  padding: 0.25rempx 1rem 0.25rem 1rem;
  cursor: pointer;
}

.akce-button:hover {
  background: white;
  color: black;
  border: solid 1px white;
}

Závěr

Toto řešení je jednoduché, rychlé a nevyžaduje žádný JavaScript. Využívá nativní integraci Google Kalendáře pomocí URL parametrů. Uživatel klikne na tlačítko, je přesměrován na Google Kalendář s předvyplněnými údaji, a může událost snadno přidat do svého kalendáře.

Hlavní výhody tohoto řešení:

• Jednoduchost implementace.
• Spolehlivost (funguje ve všech moderních prohlížečích).
• Rychlost načítání stránky (bez dodatečného JavaScriptu).