Push Calendar data to Google Calendar

[DesiLogi]

I wanted to clarify this question from another post here in the hopes a Caspio person will see this and resolve the issue. 

It would be extremely helpful to be able to push a new calendar event from a Caspio Submit (or Update) datapage to google calendar. 

I found a post that uses the example below to open Google Calendar and populate a new event's fields with example data. This creates a button that pushes it all in the url:  

<a class="btn btn-primary btn-xs" href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=Lunch%20with%20Stripe&amp;dates=20161116T120000Z/20161116T140000Z&amp;details=https%3A%2F%2Flondon.techhub.com%2Fevents%2Ffounders-lunch-5&amp;location=TechHub%20London&amp;sprop=&amp;sprop=name:" id="addToGoogle"><i class="fa fa-google-plus"></i>&nbsp;Google</a>

The problem is getting the Caspio fields to populate the data- especially the dates and times. Also on a Submission form it seems to only bring into the url Authenticated fields (maybe because the new record's values aren't saved yet). That's ok if an Update form must be used, to make sure the field's values are pushed into the url. 

The issue is it doesn't seem to be pushing the values in a way Google Calendar can use it, especially the first 'text=' and the dates. Using the example above as a map, how does the below code need to be modified so google calendar can read it correctly?

<a class="btn btn-primary btn-xs" href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=[@field:mytitletfield]&amp;dates=[@field:CalDate*]/[@field:CalDate*]&amp;details=[@field:myNotesfield]&amp;location=[@field:myLocationfield]&amp;sprop=&amp;sprop=name:" id="addToGoogle"><i class="fa fa-google-plus"></i>&nbsp;Google2</a>

I can get all but the first 'text=' and the Dates to work. Any help in figuring this out would be greatly appreciated. 

[Meekeee]

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]

Surely there's an answer for this? Caspio is really frustrating to work with, gotta say... 

[Meekeee]

Hi @DesiLogi,

You can use Zapier and connect it to Google Calendar.

Check this link to know more about Zapier. I hope this helps!

[DesiLogi]

Thanks but Zapier doesn't work for my needs. My app is public facing (b2b) and each customer has their own login that needs to be authenticated. Because Caspio doesn't have a way to import/export/Zapier data via an authenticated user (instead of the overall Caspio Account holder) there's no way for app users to connect their data to outside apps. Meaning a user cannot enter their own Zapier login/mapping and have it interact with their own specific Caspio data. I, as the CB account holder, would have to have my customer's login info for Zapier and other apps, which is ridiculous. To me this is the biggest limitation of Caspio and why it will not work for most SaaS applications- no ability for the end user to sync with their own outside accounts in other apps. 

[DesiLogi]

Thanks for posting this Meekee--I will definitely give this a shot!

[Meekeee]

Just take note the Important info  https://github.com/jekuer/add-to-calendar-button#:~:text=Important information

[DesiLogi]

Thought I'd post on this thread too because I'm having the same issue. Using @Meekeee's solution (which looks awesome if I can get it to work), I can't figure out how to pull the Caspio field values in a submission form. Normally you'd use js variables, which I can get, but they don't integrate with the push/calendar code, or I don't know how. 

The variable lines are not in the right place (they halt the code) and also they don't seem to work in the name, etc. lines. What's odd is an authentication fields works. For example, the line

name: "my event name", 

does not work with my below a) name: v_name, b) name: "v_name", c) name: "document.getElementById('InsertRecordTasksTimeline_Title').value;" . 

However, it does work as name: "[@authfield:Company_Company]", 

But on a Submission form you don't have the option of pulling field names or Virtual field names this way, only authentication fields. So it seems like javascript variables are the only option--but that doesn't seem to work either. 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_calend = document.getElementById('InsertRecordTasksTimeline_EndDate').value;
var v_category = document.getElementsByName('InsertRecordTasksTimeline_Task_Cat')[0].value;

    name: v_name,
    description: v_note,
    startDate: v_begindate,
    endDate: v_calend,
    "startTime":"12:15",
    "endTime":"14:30",
    "location":v_category,
    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>

 

[Meekeee]

Hi @DesiLogi - I replied to your post here:

 

[DesiLogi]

Thanks--I'll update the newer thread as it's more concise. 

[Meekeee]

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/