# 在事件界面中让“添加到日历”按钮更加醒目

**URL:** <https://meta.discourse.org/t/make-the-add-to-calendar-button-more-prominent-in-the-event-ui/403204>\
**Category:** UX\
**Tags:** events\
**Created:** [2025年九月23日 02:01 UTC](https://meta.discourse.org/t/make-the-add-to-calendar-button-more-prominent-in-the-event-ui/403204 "2025-09-23T02:01:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2025年九月23日 02:01 UTC](https://meta.discourse.org/t/make-the-add-to-calendar-button-more-prominent-in-the-event-ui/403204/1 "2025-09-23T02:01:05Z")

</div>

> [@chapoi](#):
>
> 如果你指的是这个：
> 
> ![CleanShot 2025-09-19 at 09.35.57@2x](https://global.discourse-cdn.com/meta/original/4X/9/5/6/95601ab942bbdca4c9d81f737c3f99a04d042cea.png)
> 
> 我觉得那里确实是对的。

在摆弄那个上下文菜单时，我在想“添加到日历”是否更适合直接放在卡片上。

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/9/1/591bbe36285e419fc9c748a33e8de5ba4decfc80.png)

菜单里的其他选项都挺偏向管理员操作的，但“添加到日历”是面向所有用户的功能，在界面上应该更加显眼。

---

<div class="post-metadata">

**Author:** ![opcourdis](https://avatars.discourse-cdn.com/v4/letter/o/45deac/32.png) [@opcourdis](https://meta.discourse.org/u/opcourdis)\
**Post date:** [2025年九月25日 01:36 UTC](https://meta.discourse.org/t/make-the-add-to-calendar-button-more-prominent-in-the-event-ui/403204/2 "2025-09-25T01:36:12Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/c/7/8/c78b8ac859f8b267c0ebd448ef5227a7a8b62c26.png)

在活动帖子中，我将“添加到日历”选项放在显眼的位置；您可以将其添加到可从管理员外观菜单访问的主题 JavaScript 标头中：

```javascript
<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";

    // 添加内联 CSS 以在悬停时保持文本和图标为黑色
    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);

    // 辅助函数，用于等待 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>
        `;

        // 内联样式用于左对齐
        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";

        // 点击逻辑：打开菜单并触发原始的添加到日历
        button.addEventListener("click", async () => {
            const submenuButton = document.querySelector(submenuButtonSelector);
            if (!submenuButton) return;
            submenuButton.click(); // 打开菜单

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

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

        // 插入到 event-info 中
        if (eventInfo.firstElementChild) {
            eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
        } else {
            eventInfo.appendChild(button);
        }
    };

    // 观察 DOM 变化（Ember 安全）
    const observer = new MutationObserver(() => createAddToCalendarButton());
    observer.observe(document.body, { childList: true, subtree: true });

    // 首次尝试
    createAddToCalendarButton();
})();
</script>

```

---

<div class="post-metadata">

**Author:** ![gilles](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gilles/32/549022_2.png) [@gilles](https://meta.discourse.org/u/gilles)\
**Post date:** [2026年五月19日 16:14 UTC](https://meta.discourse.org/t/make-the-add-to-calendar-button-more-prominent-in-the-event-ui/403204/3 "2026-05-19T16:14:49Z")

</div>

我尝试了该脚本，但它打开了右键菜单，而不是直接添加日历事件——至少对我来说是这样。

---

<div class="post-metadata">

**Author:** ![gilles](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gilles/32/549022_2.png) [@gilles](https://meta.discourse.org/u/gilles)\
**Post date:** [2026年五月19日 16:15 UTC](https://meta.discourse.org/t/make-the-add-to-calendar-button-more-prominent-in-the-event-ui/403204/4 "2026-05-19T16:15:41Z")

</div>

我觉得你说得对，需要简化操作流程，聚焦核心功能，避免不必要的点击。