How to integrate addtocalendar with Webflow

Hi,

I’d like to integrate this service http://addtocalendar.com to my event list.
Is it possible?

Hi @Zozo

Yes of course it is. It is very easy too with dynamic embeds.

You just add the code in the dynamic item or the dynamic page of an event and replaced the sample values in the embed code with the related field in your events collection.

You can even customize the style. That will take a little more work. But it is all doable in Webflow.

Hope this was helpful.

Best of luck,
Anna K

1 Like

Thank you @Anna_Kelian, I did a test but it didn’t work well

I get an error 404 if the site is live ,here http://airtable-test.webflow.io/
here is the preview https://preview.webflow.com/preview/airtable-test?preview=6d33f63598e93214eaf69bb6187648a7

Hey @Zozo

Here’s what you need to do:

1- Add the code snippets in the right places.

Add this:

<!-- Add this Calendar Style-->
<link href="http://addtocalendar.com/atc/1.5/atc-style-blue.css" rel="stylesheet" type="text/css">

Here:

And add this:

<!-- Add to Calendar script -->
<script type="text/javascript">(function () {
        if (window.addtocalendar)if(typeof window.addtocalendar.start == "function")return;
        if (window.ifaddtocalendar == undefined) { window.ifaddtocalendar = 1;
            var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
            s.type = 'text/javascript';s.charset = 'UTF-8';s.async = true;
            s.src = ('https:' == window.location.protocol ? 'https' : 'http')+'://addtocalendar.com/atc/1.5/atc.min.js';
            var h = d[g]('body')[0];h.appendChild(s); }})();
</script>

Here:

2- Add the following fields to your events collection:

Use this as reference:

3- Fix the embed code on your page as follows:

Simply copy paste this, then replace the sample values using Add field:

<!-- Add to Calendar event data -->
<span class="addtocalendar atc-style-blue">
    <var class="atc_event">
        <var class="atc_date_start">2016-05-04 12:00:00</var>
        <var class="atc_date_end">2016-05-04 18:00:00</var>
        <var class="atc_timezone">Europe/London</var>
        <var class="atc_title">Star Wars Day Party</var>
        <var class="atc_description">May the force be with you</var>
        <var class="atc_location">Tatooine</var>
        <var class="atc_organizer">Luke Skywalker</var>
        <var class="atc_organizer_email">luke@starwars.com</var>
    </var>
</span>

Try this, and tell me how it works.

Best of Luck,
Anna K

1 Like

Wow @Anna_Kelian thank you very much

1 Like

Anytime @Zozo.

Best of Luck!

This topic was automatically closed after 60 days. New replies are no longer allowed.