Symfony UX Calendar Links

As a big Symfony UX fan, I was excited to explore the new components included in the latest Symfony UX release. Previously, I've blogged about Twig Components and Live Components, but there's more to discover.

The latest Sylius UX release introduces the Calendar Link component, which allows users to add events to their calendar of choice with a single click.

While it may not sound like a revolutionary feature, it's incredibly useful when building a ticket booking site, such as the unKonf ticket shop, which we're currently upgrading to Sylius 2.

How does it work?

To get started, install the new component using Composer:

composer require symfony/ux-calendar-link

Next, I decided to create a Twig Component to generate the CalendarEvent object required to render the links:

<?php

declare(strict_types=1);

namespace App\Twig\Components;

use DateTimeInterface;
use Sylius\TwigHooks\Twig\Component\HookableComponentTrait;
use Symfony\UX\CalendarLink\CalendarEvent;
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;

#[AsTwigComponent]
final class CalenderLink
{
    use HookableComponentTrait;

    #[ExposeInTemplate('event')]
    public function event(): CalendarEvent
    {
        $timezone = new \DateTimeZone('Europe/Berlin');
    
        return new CalendarEvent(
            title: 'unKonf 2026',
            start: new \DateTimeImmutable('2026-10-10 09:00', $timezone),
            end: new \DateTimeImmutable('2026-10-10 18:00', $timezone),
            description: 'unKonf 2026 - Your barcamp for web and software development!',
            location: 'bitExpert AG, Rudolf-Diesel Str. 40 - 46, 68169 Mannheim, Germany',
        );
    }
}

Then, in my Twig template, I use the following logic to render the links:

{% set providers = {
    google: {icon: 'logos:google-calendar', class: 'text-calendar-google border-calendar-google hover:bg-calendar-google hover:text-white'},
    outlook: {icon: 'file-icons:microsoft-outlook', class: 'text-calendar-outlook border-calendar-outlook hover:bg-calendar-outlook hover:text-white'},
    ics: {icon: 'lucide:calendar', class: 'text-calendar-ics border-calendar-ics hover:bg-calendar-ics hover:text-white'},
} %}

<div class="flex flex-wrap gap-2 justify-center sm:justify-start mt-2">
    {% for link in ux_calendar_links(event)|filter(link => providers[link.provider] is defined) %}
        {% set p = providers[link.provider] %}
        <a href="{{ link.url }}"
           target="_blank"
           rel="noopener"
           class="inline-flex items-center gap-2 px-2 py-1 me-3 rounded border text-sm no-underline transition-colors {{ p.class }}"
           title="Add to {{ link.label }} calendar"
        >
            <twig:ux:icon name="{{ p.icon }}" class="size-4"/>
            {{ link.label }}
        </a>
    {% endfor %}
</div>

With these simple steps, you can have the Calendar Link component up and running in little time.

Conclusion

The Calendar Link component is a valuable addition to the Symfony UX ecosystem, providing an easy way to integrate calendar functionality into your applications.