Integration Of Caspio Calendar With Google And Microsoft Outlook

[skauntey]

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.

 

Best,

 

 

[aam82]

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.

[aam82]

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.

[DesiLogi]

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-

[aam82]

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:

text=[@field=EventName]

[DesiLogi]

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... 

[Kurumi]

Hi everyone - Just wanted to share this solution. If you want to save the date in your Calendar or download it as a .ics file. You may use an external JS library called Add-to-Calendar Button:
https://jekuer.github.io/add-to-calendar-button/
https://github.com/jekuer/add-to-calendar-button

[DesiLogi]

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!

[DesiLogi]

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",
    "startTime":"12:15",
    "endTime":"14:30",
  "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))
</script>

 

[DesiLogi]

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. 

[Kurumi]

Hi @DesiLogi - I replied to your post here: 

For the button, do you have a custom button?

[Kurumi]

Hi - Good news! Caspio has a new Tech tip called Downloading Appointments to Calendars Using ICS Files. To know more on how to implement it in the DataPage, you can check it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/download-appointments-to-calendars-using-ics-files/

[Aether]

Hello there! Caspio releases a new feature called "integrations"! Refer below: 

Caspio Extensions is a new plug-and-play capability that connects your Caspio account to third-party services, enabling various functionalities. We are very excited about the roadmap of Extensions and in future releases, we will open it up for our partners and even customers to create their extensions.

Source: https://howto.caspio.com/release-notes/caspio-52-0/#:~:text=Introducing Caspio Extensions

[NailDyanC]

Just want to add in the previous comment above,  you may check the article for integration: https://howto.caspio.com/integration/extensions/

[ianGPT]

Hello,

I just wanted to share that Ned has released a new video tutorial on integrating OpenAI with Caspio. You can check it out here: https://www.youtube.com/watch?v=kAhSaNlD79I&t=3s.

[DesiLogi]

@ianGPT, thanks for posting this link. One question is, how accurate is the information ChatGPT creates in the new field? Meaning, if someone submits a company name in a field, and the ChatGPT prompt is to get a description of that company and put it in another field, what if there are several, or many companies out there with the same or similar names? Accuracy is absolutely crucial, if you have a business facing app, where your clients are the users and you won't be able to verify info accuracy yourself. 

[PotatoMato]

Yes, that may happen. What I can suggest is to add an approval workflow on your app so you can check the information yourself before it is shown to the users.

 

Additionally, Caspio added another section on the forums for AI integration use cases. You can check it here: https://forums.caspio.com/forum/72-ai-powered-gpt-connect/