カレンダーページが読み込まれた後に 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 がページ切り替え時に実行されるため、カレンダーが動的にコンテンツを読み込む場合、前月や翌月のイベントにはストリップ色が適用されないことです。
10月にいて「次へ」を2回クリックして12月に行くと、以下のように表示されます：
そのため、カレンダーのコンテンツが読み込まれた時点で JavaScript が実行されるようにしたいのです。