Using add-to-calender

[chei96]

Dear formr community,

I would like to allow people to add their daily diaries to their calenders. They might be less likely to miss a calender event (because of the push-notification) than a reminder via mail. A nice way would be using this "add-to-calender-button": https://add-to-calendar-button.com/de

Using simple html testing works fine. However, in formr, as soon as the opencpu is involved, I did not get the button to work anymore. So I needed a note without any opencpu involvement. For most information, I don't need any R code. However, it would be great to add the participant's studylink to the event. I only know that session ids can be accessed via R: run_survey_sessions$session. Is there another way to get the session id via javascript?

Kind regards
Chris

[rubenarslan]

Hi Chris, yes, I've also considered this. I think it's a nice cheap option, especially if you can add multiple calendar events at once. I think generating the configuration with R/OpenCPU should work. Please show us your code in a small reproducible example where this fails.

[chei96]

Hi Ruben,
thanks for your reply! Sure, I should have done that right away.

The basic implementation is kind of this way:

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>

<add-to-calendar-button 
name="[Reminder] Studienteilnahe" 
startdate="today + 1" 
starttime="19:00" 
endtime="19:15" 
timezone="Europe/Berlin" 
description="link" 
options="'Apple','Google','iCal','Outlook.com'" 
recurrence="RRULE:FREQ=DAILY;INTERVAL=1;COUNT=14" 
></add-to-calendar-button>

I have added all stuff from the script source to run -> settings -> js
Then I included the butten to a pause window for testing. When I put a <div> </div> around the butten than it worked:

However I would like to include the participants study link as the description of that event using r link and the following R code:

session <- survey_run_sessions$session
link <- paste0("https://formr.org/study/?code=", session)

As soon as I include the R part above, the opencpu is involved (as ca be seen in the testing box at the top). However, the button does then not work anymore (Without changing the description to r link, so only including the R code):

An alternative solution I thought of was using javascript to change the button elements. In that case it would also work to add the participants studylink if I was able to access their ID via javascript. Thats why I asked:

<add-to-calendar-button id="calendarButton"></add-to-calendar-button>

<script>
//adding startdate manually from js variable
var my_date = new Date();
var tomorrowdate = my_date.getFullYear() + "-" + (my_date.getMonth() + 1 < 10 ? '0' : '') + (my_date.getMonth() +1) + "-" + (my_date.getDate() + 1);

function setCalendar() {
      const button = document.getElementById('calendarButton');
      if (button) {
        button.setAttribute('name', '[Reminder] Studienteilnahme');
        button.setAttribute('description', 'Jetzt Fragebogen ausfüllen: [url]https://formr.org/study[/url]');
        button.setAttribute('startDate', tomorrowdate);
        button.setAttribute('startTime', '19:00');
        button.setAttribute('endTime', '19:15');
        button.setAttribute('timeZone', 'Europe/Berlin');
        button.setAttribute('recurrence', 'RRULE:FREQ=DAILY;INTERVAL=1;COUNT=14');
        button.setAttribute('label', 'Tagebuch im Kalender speichern');
        button.setAttribute('options', "'Apple','Google','iCal'");
      }
    }

    setCalendar();
</script>

[rubenarslan]

Please send me a minimal run export where this button works, because I cannot reproduce it working even without OpenCPU.

[chei96]

Sure!

The reason might probably be that the following source is minified by jsDelivr: https://cdn.jsdelivr.net/npm/add-to-calendar-button@2

Using the following js worked for me: https://cdn.jsdelivr.net/npm/[email protected]/dist/atcb.js

Sorry that I forgot to mention that!

Heres the run export:
testcalenderbutton.json

[rubenarslan]

## __Tagebuchabschnitt__

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/atcb.js" async defer></script>

Fügen Sie Ihre täglichen Befragungen einfach Ihrem Kalender hinzu:

```{r, results="asis"}
cat(paste0('<div><add-to-calendar-button 
name="[Reminder] Studienteilnahe" 
startdate="today+1" 
starttime="19:00" 
endtime="19:15" 
timezone="Europe/Berlin" 
description="https://testcalendarlinik.formr.org?code=', survey_run_sessions$session, '" 
options="\'Apple\',\'Google\',\'iCal\',\'Outlook.com\'" 
recurrence="RRULE:FREQ=DAILY;INTERVAL=1;COUNT=14" 
></add-to-calendar-button></div>'))

[chei96]

Great, works! Thank you very much, I really appreciate the help!