AddEvent code not working in Discourse

support
1

I’m trying to add some code in Discourse for an event calendar. I’ve done the four space indent but it doesn’t seem to work.

Here’s the code snippet:

image
image709×91 21.1 KB

This is what I get…

image
image764×387 64.9 KB

I’m not a regular coder, so please if you could simplify the jargon I’d be ever grateful. :pray:

1 Like
2

The cause here is that Discourse filters user input in posts as a security measure. You wouldn’t want random users to run scripts on your site, so we filter them out.

You can use a theme component to make this work. If you add something like this in a new theme component - under the header tab - and then add it to your active theme, you’ll be able to use that embed.

<script type="text/discourse-plugin" version="0.8">
  const  loadScript  = require("discourse/lib/load-script").default;
  const { next } = require("@ember/runloop");

  api.decorateCookedElement(
    post => {
      const calendars = post.querySelectorAll(`[data-wrap="addEvent"]`);
      if (!calendars.length) return;

      calendars.forEach(calendar => {
        const wrapper = document.createElement("div");
        wrapper.dataset.calendar = calendar.dataset.calendar;
        wrapper.dataset.configure = false;
        wrapper.classList.add("ae-emd-cal");
        calendar.append(wrapper);
      });

      next(() =>
        loadScript("https://addevent.com/js/cal.embed.t1.init.js")
      );
    },
    { id: "AddEvent decorator", onlyStream: true }
  );
</script>

Once you do that, you can add the addEvent calendar to a post by adding something like this in your post.

[wrap=addEvent calendar=bJ306355][/wrap]

You can change the calendar=bJ306355 attribute to add the specific identifier for the calendar you want to embed.

The last thing you need to do is whitelist the AddEvent script in your site setting (this is another security layer).

Search for the content_security_policy_script_src in the admin and add this link there

https://addevent.com

Let me know if this works for you, and I can package it as a theme component.

3 Likes
3

Hi @Johani,

Your solution works for me. Just wanted to let you know.

Thanks!

1 Like
4

So, I just created a new theme component to render an AddEvent calendar.

:link: GitHub - graydenshand/discourse_upcoming_addevent: Replace the DiscourseEvent "upcoming events" calendar with an AddEvent embed

Instead of embedding the calendar in a post, which is too narrow to display the desktop version of the embed, this theme component hijacks the DiscourseCalendar plugin’s “Upcoming Events” page.

Note, that in order to do this, I had to customize the AddEvent script (https://addevent.com/js/cal.embed.t1.init.js) to allow for re-renders between page transitions.

1 Like