Comment puis-je exécuter du JavaScript une fois que la page du calendrier a chargé ?
edit : Je précise mon cas.
On m’a demandé d’avoir des événements multicolores, comme ceci :
Je ne souhaite pas créer de fork du plugin, j’ai donc obtenu un résultat avec le code suivant.
Les couleurs sont liées aux étiquettes des événements et remplacent la couleur de catégorie par défaut.
J’ai ajouté la liste des étiquettes dans le HTML de l’événement de cette manière : 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>
Je génère des motifs rayés :
<script type="text/discourse-plugin" version="0.8.23">
api.onPageChange((url, title) => {
// couleurs des étiquettes
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>
Et j’ai ajouté un peu de CSS.
Le résultat :
Événement avec 2 étiquettes :
Événement avec 3 étiquettes :
Le problème que je rencontre est que mon JavaScript est exécuté lors du changement de page et n’applique pas les couleurs rayées aux événements des mois précédents/suivants, car le calendrier charge son contenu dynamiquement.
Si je suis en octobre et que je clique deux fois sur “suivant” pour aller en décembre, voici comment cela apparaît :
C’est pourquoi je souhaite que mon JS soit exécuté lorsque le contenu du calendrier a été chargé.