Angus' Events Plugin 📅

[Canapin (Coin-coin le Canapin)]

캘린더 페이지가 로드된 후 자바스크립트를 실행하는 방법은 무엇인가요?

---

수정: 제 상황을 설명드리겠습니다.
다음과 같은 다색 이벤트가 필요하다는 요청을 받았습니다:

플러그인의 포크를 만들고 싶지 않아서, 다음 코드를 사용하여 일부 구현했습니다.
색상은 이벤트 태그와 관련되어 있으며 기본 카테고리 색상을 대체합니다.

이벤트 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) => {
    // tags colors
    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개인 이벤트:

제가 겪는 문제는 제 자바스크립트가 페이지 변경 시 실행되는데, 캘린더가 동적으로 콘텐츠를 로드하기 때문에 이전/다음 달의 이벤트에는 스트라이프 색상이 적용되지 않는다는 것입니다.

10월에 있으면서 "다음"을 두 번 클릭하여 12월로 이동하면 다음과 같이 표시됩니다:

이 때문에 캘린더 콘텐츠가 로드되었을 때 제 JS가 실행되기를 원합니다.