Jump to content
  • 0

Integration Of Caspio Calendar With Google And Microsoft Outlook



Has anybody successfully integrated Caspio Calendar with the Google Calendar and/or Microsoft outlook.


I am building a platform for users to offer/ showcase their services to potential clients. I expect them schedule multiple appointments and register for events using calendar provided, which is Caspio super-powered weekly calendar :)


Once user enter information, I would like an automated email sent out to their personal email along with the links. - By clicking these links user can automatically add event data to calendar of their choice either Google or Microsoft or both.


I was wondering if anybody on the forum has created similar work flow, or an alternative solution to the similar problem. Please note I come from a non-techie background.


Any heads up! greatly appreciated.





Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

You would need to generate an ICS file based on your Caspio data, and store the file on a server, and link to the file. As far as I can tell, you can't do this with just a link.


This is doable with the Caspio API, but I'm still a long way from being able to get that together.


I have a some-what related feature request in my signature.

Link to comment
Share on other sites

  • 0

Sorry, I was mistaken. This is very doable. I've successfully adapted the code on this page:

click on any event here: https://london.techhub.com/events/

source code:

<a id="addToGoogle" href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=VC%20Coffee%20Morning%20with%20BGF%20Ventures&amp;dates=20160915T090000Z/20160915T110000Z&amp;details=https://london.techhub.com/events/vc-coffee-morning-with-bgf-partners-1&amp;location=TechHub%20@%20Campus%20London&amp;sprop=&amp;sprop=name:" class="btn btn-primary btn-xs"><i class="fa fa-google-plus" yv6gjb9="" hidden=""></i>&nbsp;Google</a>


<a id="addToOutlook" href="data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0AURL:https://london.techhub.com/events/vc-coffee-morning-with-bgf-partners-1%0ADTSTART:20160915T090000Z%0ADTEND:20160915T110000Z%0ASUMMARY:VC%20Coffee%20Morning%20with%20BGF%20Ventures%0ADESCRIPTION:https://london.techhub.com/events/vc-coffee-morning-with-bgf-partners-1%0ALOCATION:TechHub%20@%20Campus%20London%0AEND:VEVENT%0AEND:VCALENDAR" class="btn btn-primary btn-xs"><i class="fa fa-windows"></i>&nbsp;Outlook</a>


You can put Caspio parameters in there.

Link to comment
Share on other sites

  • 0
On 8/19/2016 at 5:50 PM, DesiLogi said:

any chance you could explain exactly how to implement the google calendar link? I would love to use this but I don't understand exactly what steps to follow. Thanks-

Insert an HTML block field, and in the source editor, do something like this:

<a id="addToGoogle" href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=[@field:YourFieldHere]&amp;dates=[@field:YourFieldHere]&amp;details=[@field:YourFieldHere]&amp;location=[@field:YourFieldHere]&amp;sprop=[@field:YourFieldHere];sprop=[@field:YourFieldHere]:" class="button">Add to Google Calendar</a>

I don't know what those sprop parameters at the end are doing.


so for example where it says text=[@field=YourFieldHere], you would select the field with the name of your event as the field for that parameter:


Link to comment
Share on other sites

  • 0

Thanks for posting this- I've tried implementing it but can't get it to work. It opens the google calendar page (if my browser is logged into gmail) but it's not adding the event. I've put in field names where the @fields are.

However I don't know what to put for the sprop at the end. Could that be a begin and end time? Maybe if it doesn't have a begin time or end time it doesn't enter it into google. I tried your linked example and it worked fine so I must be missing something- 

EDIT: it seems basically to not be exporting the caspio field values. When I put in the techhub example hard values it exports fine- but replace with caspio [@field:fieldname] and nothing goes over. So there must be some issue with the naming of the caspio field names. 

2nd EDIT: Strangely I was able to use Authenticated fields and have it work- but not regular fields in the datapage. Perhaps the field values need to be saved first before they can be exported? But If the Submit button is clicked then there's no way to send it to Google after that. Confusing... 

Link to comment
Share on other sites

  • 0

Hi @Meekeee ,

This is an amazing option for a calendar add button--really generous of you to post it--thank you. 

A couple question as I try to implement this in Caspio

--is it possible to have the buttons in the first option ("Example 1: The usual One") to show the buttons going 'Up' instead of down? The button will be at the bottom of a submission form and I lose them in the vertical down. 

--is it possible to make the buttons run a typical Caspio 'submit' at the same time as running the calendar code? Ideally, I'd like the user to be able to fill out the Caspio submission form and use the button option to simultaneously run your export to calendar code AND submit the form. I can't figure out where to do that. 

--ideally the time zone would be grabbed from the user's browser as my app is used around the globe and I try to set all date/time records as from the user's local computer. would the button you have that does this also be able to run a form submission? 

That said, I'm deploying this code "Option 2: simple (CDN). Instead of downloading the files, you can use the jsDeliver CDN." I want to do this so it stays current with any tweaks as my users are global. 

I'm really looking forward to implementing this--thanks again!

Link to comment
Share on other sites

  • 0

I've been trying to get @Meekeee's code to work in a Caspio submission form. I'm having trouble pulling the values of the Caspio fields into the calendar download code. I'd thought using variables would work but I can't figure out where to put it or how exactly to reference it.  I stopped after the StartDate because it wasn't working. Does anyone know how to incorporate the actual Caspio field values in this? 

<script type="application/javascript">

  const config = {

 var v_name = document.getElementById('InsertRecordTasksTimeline_Title').value;
var v_note = document.getElementById('InsertRecordTasksTimeline_Notes').value;
var v_begindate = document.getElementById('InsertRecordTasksTimeline_CalDate').value;
var v_category = document.getElementsByName('InsertRecordTasksTimeline_Task_Cat')[0].value;

    name: v_name,
    description: v_note,
    startDate: v_begindate,
    endDate: "2022-05-25",
  "location":"World Wide Web",
    options: ["Google", "Apple","Microsoft365"],
    timeZone: "Europe/Berlin",
    trigger: "click",
    iCalFileName: "Reminder-Event",
  const button = document.querySelector('#default-button')
  button.addEventListener('click', () => atcb_action(config, button))


Link to comment
Share on other sites

  • 0

Also, this is really odd but in Caspio's preview for the datapage the button shows up. 



But when deployed I'm not getting the normal styled 'Add to Calendar' button to show up at all. When I change the div that it's in style to "display:block" this is what I'm seeing: 


So for some reason within Caspio Bridge the button's show but when the datapage is deployed on a web page it doesn't. Totally weird... I'd love to use this solution but I'm running into some fundamental problems. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...