# Angus' Events Plugin 📅

**URL:** https://meta.discourse.org/t/angus-events-plugin/69776
**Category:** Plugin
**Created:** [September 11, 2017, 2:44am UTC](https://meta.discourse.org/t/angus-events-plugin/69776 "2017-09-11T02:44:59Z")
**Posts on this page:** 1
**Showing post:** 699

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 9, 2020, 9:07am UTC](https://meta.discourse.org/t/angus-events-plugin/69776/699 "2020-10-09T09:07:32Z")

</div>

How can I execute javascript after the calendar page has loaded?

* * *

edit: I explain my case.  
I was asked to have multi-colored events, like:

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/6/d615a69db457c7eae87fa7aea1a2252cacf40a44.png)

I don’t want to create a fork of the plugin, so I achieved something with the following code.  
The colors are related to event tags and replace the default category color.

I added the tag list in the event HTML this way: `data-tags="{{event.topic.tags}}"`

```handlebars
<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>

```

I generate stripped patterns:

```js
<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>

```

And I added a bit of CSS.

The result:  
2 tags event:

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/3/e3f164aba3ebce85bb38b723e2a940fc482df35a.png)

3 tags event:

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/a/0a9ef95dde725da3c007442975cdd621213b2b04.png)

The issue I encounter is that my javascript is executed at the page change and won’t apply stripped colors on previous/next months’ events since the calendar dynamically loads its content.

If I’m in October and and I click “next” twice, going for December, this is how it appears:

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/8/c84ea50e6c2b082d5a1179c1540ea61283e1cbae.png)

This is why I’d like my js to be executed when the calendar content has loaded.

---

_[View the full topic](https://meta.discourse.org/t/angus-events-plugin/69776)._