إضافة أحداث أنغوس 📅

[Canapin (Coin-coin le Canapin)]

كيف يمكنني تنفيذ JavaScript بعد تحميل صفحة التقويم؟

---

تعديل: سأوضح حالتي.
طُلب مني إنشاء أحداث متعددة الألوان، مثل:

لا أريد إنشاء نسخة مشتقة (fork) من الإضافة، لذا حققت شيئًا مشابهًا باستخدام الكود التالي.
الألوان مرتبطة بوسوم الأحداث وتستبدل لون الفئة الافتراضي.

أضفت قائمة الوسوم في 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.

النتيجة:
حدث بوسمين:

حدث بثلاثة وسوم:

المشكلة التي أواجهها هي أن جافا سكريبت الخاص بي يُنفذ عند تغيير الصفحة، ولا يطبق الألوان المخططة على أحداث الأشهر السابقة/التالية لأن التقويم يحمل محتواه ديناميكيًا.

إذا كنت في أكتوبر ونقرت مرتين على “التالي” للذهاب إلى ديسمبر، يظهر الأمر بهذا الشكل:

ولهذا السبب أود تنفيذ جافا سكريبت الخاص بي عند تحميل محتوى التقويم.