Angus' Events Plugin 📅

[Canapin (Coin-coin le Canapin)]

Wie kann ich JavaScript ausführen, nachdem die Kalenderseite geladen wurde?

---

Edit: Ich erkläre meinen Fall.
Mir wurde aufgetragen, mehrfarbige Ereignisse darzustellen, wie zum Beispiel:

Ich möchte keinen Fork des Plugins erstellen, daher habe ich mit dem folgenden Code eine Lösung gefunden.
Die Farben beziehen sich auf Ereignistags und ersetzen die Standardkategorienfarbe.

Ich habe die Tag-Liste auf diese Weise in das Ereignis-HTML eingefügt: 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>

Ich generiere gestreifte Muster:

<script type="text/discourse-plugin" version="0.8.23">
api.onPageChange((url, title) => {
    // Tag-Farben
    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>

Und ich habe ein wenig CSS hinzugefügt.

Das Ergebnis:
Ereignis mit 2 Tags:

Ereignis mit 3 Tags:

Das Problem, das ich habe, ist, dass mein JavaScript bei der Seitenänderung ausgeführt wird und die gestreiften Farben nicht auf Ereignisse der vorherigen/nächsten Monate anwendet, da der Kalender seinen Inhalt dynamisch lädt.

Wenn ich im Oktober bin und zweimal auf „weiter“ klicke, um nach Dezember zu gelangen, sieht es so aus:

Deshalb möchte ich, dass mein JS ausgeführt wird, sobald der Kalenderinhalt geladen wurde.