Add add to calendar button

Hello, would love to make it so when users click this button it automatically adds it to their calendar.

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=designer&utm_content=zocalo-food-park&preview=49d8eb327bc87891232ae8edae3d4c81&pageId=5fa32fcd4367a75ac41eca6a&mode=preview

Getting close to finishing this project and this is kinda the last piece to the puzzle before I start testing and making adjustments. So I would greatly appreciate any help!

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=designer&utm_content=zocalo-food-park&preview=49d8eb327bc87891232ae8edae3d4c81&pageId=5fa32fcd4367a75ac41eca6a&mode=preview


Here is my public share link: LINK
(how to access public share link)

@Christopher_Nelson I’m always using this. it is for free, and it works Calndr

Hi @ErikVanderlaan, thank you for the reply. So with this link once this api is setup will my client be able to just use the Webflow cms and it will automatically add events to the users calendar? or does my client need me to always update the api on the back end? Cheers

@Christopher_Nelson This can be done totally automated. Create a CMS item with a start date and time, end date and time, event title, and eventually the timezone. Create in the event template custom code a variable line this service=apple&start=START&end=END&title=TITLE&timezone=TIMEZONE where you replace START, END, TITLE and TIMEZONE with a CMS fields (top right add field +) you repeat this for each service you like to office, Apple, Outlook Outlookcom, Yahoo, Google. So now you have these variables. In the Events template, you can add now with custom code the logo of each service and the link Calndr from the custom code

So now when you create an event, and a user goes to the event, the custom code in the template will generate the variables, and when they click on the logo, they call the API, with the correct variable, and get the event in the calendar.

Hi @ErikVanderlaan I think I’m having a little trouble understanding where excatly to put the code.

I put the the html in the header area and then used the link you shared to create the event and it does not seem to be working.

@Christopher_Nelson You have to build everything after the ? in code in the cms template custom code section. Basically, you create a variable (which you can later use in javascript) when the page loads. You have to do this in the cms template custom code because there you have access to CMS record variables through the + Add field option.

So, create a variable with the content for after the ? (in the URL)

Now on the page it selve, where you want the add to calendar link, you insert custom code with some javascript and built the link, the first part of the link is always the same (from the URL) and after the ? you insert the variable created on page load in the page custom code. This creates the unique URL, which generates the file with the calendar file to add to the calendar.

@ErikVanderlaan Hey what you put in this thread really helped me but I have a question. What if I want it to give me 2 calendar downloads with 1 link is that possible?

can you please share the custom js code please