Make the add-to-calendar button more prominent in the Event UI

Contribute UX
1

Tijdens het experimenteren met dat contextmenu vraag ik me af of ‘Toevoegen aan agenda’ niet beter direct op de kaart geplaatst kan worden. Alle andere opties zijn nogal beheerdersgericht, maar deze is bedoeld voor alle gebruikers en zou prominent in de gebruikersinterface goed tot zijn recht komen.

2 likes
Include date and time (and maybe location and description) in Oneboxes for Events
2

image
image1249×288 23.3 KB

In events posts I place the “add to calendar” option in an obvious spot; you may add this to the theme javascript header reachable from the admin appearance menu :

<script>
(() => {
    const eventInfoSelector = ".event-header .event-info";
    const submenuButtonSelector = "button.fk-d-menu__trigger.discourse-post-event-more-menu-trigger";
    const menuContentSelector = ".fk-d-menu__inner-content";
    const addToCalendarSelector = "li.add-to-calendar > button";

    // Add inline CSS to keep text and icon black on hover
    const style = document.createElement("style");
    style.innerHTML = `
    .btn.btn-icon-text.custom-add-to-calendar-btn,
    .btn.btn-icon-text.custom-add-to-calendar-btn:hover {
        color: black !important;
    }
    .btn.btn-icon-text.custom-add-to-calendar-btn svg,
    .btn.btn-icon-text.custom-add-to-calendar-btn:hover svg {
        fill: black !important;
    }
    `;
    document.head.appendChild(style);

    // Helper to wait for an element in the DOM
    const waitForElement = (selector, timeout = 3000) => {
        return new Promise((resolve, reject) => {
            const el = document.querySelector(selector);
            if (el) return resolve(el);

            const observer = new MutationObserver(() => {
                const found = document.querySelector(selector);
                if (found) {
                    observer.disconnect();
                    resolve(found);
                }
            });
            observer.observe(document.body, { childList: true, subtree: true });
            setTimeout(() => {
                observer.disconnect();
                reject();
            }, timeout);
        });
    };

    const createAddToCalendarButton = async () => {
        const eventInfo = document.querySelector(eventInfoSelector);
        if (!eventInfo || eventInfo.querySelector(".custom-add-to-calendar-btn")) return;

        const button = document.createElement("button");
        button.className = "btn btn-icon-text custom-add-to-calendar-btn";
        button.title = "Add to calendar";
        button.innerHTML = `
            <svg class="fa d-icon d-icon-file svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                <use href="#file"></use>
            </svg>
            <span class="d-button-label">Add to calendar</span>
        `;

        // Inline styles for left alignment
        button.style.display = "inline-flex";
        button.style.justifyContent = "flex-start";
        button.style.marginLeft = "0";
        button.style.marginBottom = "4px";
        button.style.backgroundColor = "#f0f0f0";
        button.style.borderRadius = "6px";
        button.style.transition = "transform 0.2s";
        button.style.cursor = "pointer";

        // Click logic: open menu and trigger original Add to Calendar
        button.addEventListener("click", async () => {
            const submenuButton = document.querySelector(submenuButtonSelector);
            if (!submenuButton) return;
            submenuButton.click(); // open menu

            let menuContent;
            try {
                menuContent = await waitForElement(menuContentSelector, 2000);
            } catch {
                return;
            }

            const originalButton = menuContent.querySelector(addToCalendarSelector);
            originalButton?.click();
        });

        // Insert into event-info
        if (eventInfo.firstElementChild) {
            eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
        } else {
            eventInfo.appendChild(button);
        }
    };

    // Observe DOM changes (Ember-safe)
    const observer = new MutationObserver(() => createAddToCalendarButton());
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial attempt
    createAddToCalendarButton();
})();
</script>
1 like
3

I tried the script, but it opens the context menu instead of the “Add to Calendar” function, at least for me.

4

I think you’re right; we need to simplify the user experience and focus on the core features to avoid unnecessary clicks.

1 like