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

- Odkaz: https://tomas-shejbal.cz/wordpressito/pridani-udalosti-do-google-kalendare-z-akce-na-wordpress/
- Zveřejněno: 2025-06-02T10:05:44+02:00
- Autor: tom

# 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.

![Snímek obrazovky Google kalendáře během přidá vání nové akce do kalendáře](https://
tomas-shejbal.cz/wp-content/uploads/2025/05/wordpressito_google_cal.webp)

_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](https://calendar.google.com/calendar/render?action=TEMPLATE&text=Krest%20romanu%20Trivandrum&dates=20250605T183000/20250605T200000&details=Pro%20vice%20informaci:%20https://tomas-shejbal.cz/triva-shop/&location=Divadlo%20Exil,%20tr.%20Miru%2060,%20530%2002%20Pardubice%20I-Zelene%20Predmesti,%20Czechia)(
pro lepší čitelnost bez diakritiky), který dej “pod tlačítko”_:

    ```wp-block-code
    https://calendar.google.com/calendar/render?action=TEMPLATE&text=Krest%20romanu%20Trivandrum&dates=20250605T183000/20250605T200000&details=Pro%20vice%20informaci:%20https://tomas-shejbal.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é).

    ```wp-block-code
    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_.

    ```wp-block-code
    // 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:

    ```wp-block-code
    <?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:

    ```wp-block-code
    .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).