Create simple custom code for a downloadable calendar event .ics in Webflow

Photo by Florian Olivo on Unsplash

Since Webflow doesn’t allow uploading custom asset files such as .ics or calendar events here’s a simple way to do it with a bit of custom code

1. Add Embed block

add embed block into Webflow

2. Add HTML embed code

<div class="ics-download-link">
  <a href="#" download="your-ics-file-name.ics" id="ics-download-btn">Download ICS file</a>
</div>

Customize:

• Change (your-ics-file-name.ics) to your preferred name
• Change (Download ICS file) to your preferred button name

Then you can customize the style of the button the same way you customize a regular button in Webflow

3. Add custom Javascript code before </body> tag

Go to a specific page setting

Scroll below until you see this

Then add this custom code

<script>
  // Replace the variables below with your event details
  var eventName = "Your Event name";
  var eventDate = "2023-03-25";
  var eventStartTime = "20:30:00";
  var eventEndTime = "21:30:00";
  var eventDescription = "Your Event Description!";

  // Create the ICS file content
  var icsFileContent = "BEGIN:VCALENDAR\n" +
    "VERSION:2.0\n" +
    "PRODID:-//My Company//NONSGML Event//EN\n" +
    "BEGIN:VEVENT\n" +
    "UID:" + eventName + "@" + eventDate + "\n" +
    "DTSTAMP:" + eventDate + "T" + eventStartTime + "Z\n" +
    "DTSTART:" + eventDate + "T" + eventStartTime + "Z\n" +
    "DTEND:" + eventDate + "T" + eventEndTime + "Z\n" +
    "SUMMARY:" + eventName + "\n" +
    "DESCRIPTION:" + eventDescription + "\n" +
    "END:VEVENT\n" +
    "END:VCALENDAR\n";

  // Create the download link
  var icsDownloadLink = document.getElementById("ics-download-btn");
  icsDownloadLink.href = "data:text/calendar;charset=utf-8," + encodeURIComponent(icsFileContent);
</script>

Customize all variable event name, date, start & end time, and Description

Finally, publish your site to test it!

Thanks for reading! I am Daris Ali Mufti a UI UX Designer based in Jakarta Indonesia. Still a lot to learn! any insights, differing opinions, or advice are always welcome. I am always open to having a dialogue with others and recognize that I am not an industry expert just yet.