Angus 的事件插件 📅

[Canapin (Coin-coin le Canapin)]

如何在日历页面加载后执行 JavaScript？

---

编辑：我解释一下我的情况。
有人要求我实现多色事件，例如：

我不想创建该插件的分支，因此我通过以下代码实现了某种效果。
这些颜色与事件标签相关，并替换了默认的类别颜色。

我通过以下方式将标签列表添加到事件 HTML 中：data-tags="{{event.topic.tags}}"

<script type="text/x-handlebars" data-template-name="javascripts/components/events-calendar-event">
<div class="{{event.classes}}" data-tags="{{event.topic.tags}}" {{action 'selectEvent' event.topic.url}} style="{{event.listStyle}}">
  {{#unless event.allDay}}
    <span style='{{event.dotStyle}}'>{{d-icon 'circle'}}</span>
  {{/unless}}
  {{#if event.time}}
    <span class="time">{{event.time}}</span>
  {{/if}}
  {{#if event.title}}
    <span class="title" style="{{event.titleStyle}}">{{replace-emoji event.title}}</span>
  {{/if}}
</div>

{{#if showEventCard}}
  {{events-calendar-card topic=event.topic selectEvent="selectEvent"}}
{{/if}}
</script>

我生成了条纹图案：

<script type="text/discourse-plugin" version="0.8.23">
api.onPageChange((url, title) => {
    // 标签颜色
    let colors = {muni: "#91D0B5", road: "#8ABBE2", freestyle: "#CFB3D3"};

    let events = document.getElementsByClassName("event");
    for (var i = 0; i < events.length; i++) {
        let event = events[i];
        let gradient = "";
        let tags = event.getAttribute("data-tags").split(",");
        for (j = 1; j <= tags.length; j++) {
            gradient +=
                ", " +
                colors[tags[j - 1]] +
                " " +
                j * 8 +
                "px, " +
                colors[tags[j - 1]] +
                " " +
                (j * 8 + 8) +
                "px";
        }
        event.style.background = "repeating-linear-gradient(-45deg" + gradient + ")";
    }
});
</script>

我还添加了一些 CSS。

结果：
包含 2 个标签的事件：

包含 3 个标签的事件：

我遇到的问题是我的 JavaScript 仅在页面切换时执行，无法对日历动态加载的之前/之后月份的事件应用条纹颜色。

例如，如果我在十月并点击“下一月”两次跳转到十二月，显示效果如下：

因此，我希望我的 JavaScript 能在日历内容加载完成后执行。