How to Sync Events with Google Calendar on Pipedream and Troubleshoot Related Issues?

This topic was automatically generated from Slack. You can find the original thread here.

Hi everyone, I’m new to Pipedream. I’m trying to sync events in my app with Google Calendar. Running into some problems and could really love your help:

  1. I can’t see how the google_calendar-create-event action can work when it doesn’t seem to support any date parameters, am I missing something?
  2. I’m using the sdk. Some calls work fine (like getUserAccounts) which show I am logged in correctly. But then when I made a call to pd.configureComponent I get the message": “Cannot read properties of undefined (reading ‘oauth_access_token’)”. I hate to ask but can’t find any docs to help.
    Would really appreciate your help.
  1. I see that there is a dynamic prop, addType, that determines the event type (“quick event” based on NLP, or “detailed event”, which then renders the relevant props for start and end date, and a bunch of other inputs).
  2. Can you show me the payload you’re sending for configureComponent? Every time I’ve seen that error it’s been due to a misnamed app prop (google_calendar instead of googleCalendar for example). I’ll add specifics docs on that error.

Hi Danny.

  1. Sure. It’s detailed event I want which looks like default.
  2. Sure:
    let configuredProps = {
      google_calendar: {
        authProvisionId: accountId,
      },
    };

      const requestOpts = {
        componentId: {
          key: "google_calendar-create-event",
        },
        configuredProps,
        externalUserId,
        propName: "calendarId",
      };
      const response = await pd.configureComponent(requestOpts);
      res.json(response);

Yea check out my comment about the common error. When you fetch the component definition for that action, it should list googleCalendar as the app prop, so that’s what you need to pass in configuredProps.

Bingo! That worked. Appreciate it Danny.

No problem! What are you building?

Thanks again Danny. I’m building success.co - we have meetings and it will be great to allow customers to sync the meetings into their own calendar.

I’m still nervous about not seeing dates in the definition here - can’t see how I’ll be able to get this to work? Is this new?

{
  "data": {
    "name": "Create Event",
    "version": "0.2.4",
    "key": "google_calendar-create-event",
    "configurable_props": [
      {
        "name": "googleCalendar",
        "type": "app",
        "app": "google_calendar"
      },
      {
        "name": "addType",
        "type": "string",
        "label": "Type of Add",
        "description": "Whether to perform a quick add or a detailed event",
        "options": [
          {
            "label": "Add Detailed Event",
            "value": "detailed"
          },
          {
            "label": "Add Quick Event using Natural Language",
            "value": "quick"
          }
        ],
        "reloadProps": true
      },
      {
        "name": "calendarId",
        "label": "Calendar ID",
        "type": "string",
        "description": "Optionally select the calendar, defaults to the primary calendar for the logged-in user",
        "default": "primary",
        "optional": true,
        "remoteOptions": true
      },
      {
        "name": "text",
        "type": "string",
        "label": "Describe Event",
        "description": "Write a plain text description of event, and Google will parse this string to create the event. eg. 'Meet with Michael 10am 7/22/2024' or 'Call Sarah at 1:30PM on Friday'",
        "hidden": true
      },
      {
        "name": "summary",
        "label": "Event Title",
        "type": "string",
        "description": "Enter a title for the event, (e.g., `My event`)",
        "optional": true,
        "hidden": true
      },
      {
        "name": "colorId",
        "label": "Color ID",
        "type": "string",
        "description": "The color assigned to this event on your calendar. You can only select a color from the list of event colors provided from your calendar. This setting will only affect your calendar.",
        "optional": true,
        "remoteOptions": true,
        "hidden": true
      },
      {
        "name": "timeZone",
        "type": "string",
        "label": "Time Zone",
        "description": "Time zone used in the response. Optional. The default is the time zone of the calendar.",
        "optional": true,
        "remoteOptions": true,
        "hidden": true
      },
      {
        "name": "sendUpdates",
        "label": "Send Updates",
        "type": "string",
        "description": "Configure whether to send notifications about the event",
        "optional": true,
        "options": [
          "all",
          "externalOnly",
          "none"
        ],
        "hidden": true
      },
      {
        "name": "createMeetRoom",
        "type": "boolean",
        "label": "Create Meet Room",
        "description": "Whether to create a Google Meet room for this event.",
        "optional": true,
        "hidden": true
      },
      {
        "name": "visibility",
        "type": "string",
        "label": "Visibility",
        "description": "Visibility of the event",
        "options": [
          "default",
          "public",
          "private",
          "confidential"
        ],
        "optional": true,
        "hidden": true
      }
    ]
  }
}

Now I tried to use runAction and the requests have been running for several minutes now. No errors. Code is simple:

    let configuredProps = {
      googleCalendar: {
        authProvisionId: accountId,
        addType: "detailed",
        calendarId: "[peter@success.co](mailto:peter@success.co)",
      },
    };

      configuredProps.addType = "detailed";
      configuredProps.text = "My new event";
      configuredProps.summary = "My new event summary";

      const response = await pd.runAction({
        actionId: {
          key: "google_calendar-create-event",
        },
        externalUserId,
        configuredProps,
      });

I’m baffled by this.

Danny? .runAction() just hangs - any advice you can give?

I apologise. Turns out I was missing res.json(result); so express server hung forever. I am indeed getting a response.

I also just tested pd.makeProxyRequest) and it seems to be more what I want. Worked perfectly first go and nice and simple.

Great to hear!

Still curious Danny - is there a glitch in the “Create Event” action with dates missing?

No, you can see how it works here: Demo - Pipedream Connect

I think this is the relevant bit: pipedream/components/google_calendar/actions/create-event/create-event.mjs at master · PipedreamHQ/pipedream · GitHub

I see start date and end date there Danny. But why not in the definition above ^.
Anyhow I have enough to keep going. Thanks

Because addType is a dynamic prop, so the component definition changes based on its value. When you configure dynamic props for that one (and pass detailed as the value), then you get back those props you’re looking for:

{
    "observations": [],
    "errors": [],
    "dynamicProps": {
        "id": "dyp_7KUQZzR",
        "configurableProps": [
            {
                "name": "googleCalendar",
                "type": "app",
                "app": "google_calendar"
            },
            {
                "name": "addType",
                "type": "string",
                "label": "Type of Add",
                "description": "Whether to perform a quick add or a detailed event",
                "options": [
                    {
                        "label": "Add Detailed Event",
                        "value": "detailed"
                    },
                    {
                        "label": "Add Quick Event using Natural Language",
                        "value": "quick"
                    }
                ],
                "reloadProps": true
            },
            {
                "name": "calendarId",
                "label": "Calendar ID",
                "type": "string",
                "description": "Optionally select the calendar, defaults to the primary calendar for the logged-in user",
                "default": "primary",
                "optional": true,
                "remoteOptions": true
            },
            {
                "name": "text",
                "type": "string",
                "label": "Describe Event",
                "description": "Write a plain text description of event, and Google will parse this string to create the event. eg. 'Meet with Michael 10am 7/22/2024' or 'Call Sarah at 1:30PM on Friday'",
                "hidden": true
            },
            {
                "name": "summary",
                "label": "Event Title",
                "type": "string",
                "description": "Enter a title for the event, (e.g., `My event`)",
                "optional": true
            },
            {
                "name": "colorId",
                "label": "Color ID",
                "type": "string",
                "description": "The color assigned to this event on your calendar. You can only select a color from the list of event colors provided from your calendar. This setting will only affect your calendar.",
                "optional": true,
                "remoteOptions": true,
                "hidden": false
            },
            {
                "name": "timeZone",
                "type": "string",
                "label": "Time Zone",
                "description": "Time zone used in the response. Optional. The default is the time zone of the calendar.",
                "optional": true,
                "remoteOptions": true,
                "hidden": false
            },
            {
                "name": "sendUpdates",
                "label": "Send Updates",
                "type": "string",
                "description": "Configure whether to send notifications about the event",
                "optional": true,
                "options": [
                    "all",
                    "externalOnly",
                    "none"
                ],
                "hidden": false
            },
            {
                "name": "createMeetRoom",
                "type": "boolean",
                "label": "Create Meet Room",
                "description": "Whether to create a Google Meet room for this event.",
                "optional": true,
                "hidden": false
            },
            {
                "name": "visibility",
                "type": "string",
                "label": "Visibility",
                "description": "Visibility of the event",
                "options": [
                    "default",
                    "public",
                    "private",
                    "confidential"
                ],
                "optional": true,
                "hidden": false
            },
            {
                "name": "eventStartDate",
                "label": "Event Start Date",
                "type": "string",
                "description": "For all-day events, enter the Event day in the format `yyyy-mm-dd`. For events with time, format according to [RFC3339](https://www.rfc-editor.org/rfc/rfc3339.html#section-1): `yyyy-mm-ddThh:mm:ss+01:00`. A time zone offset is required unless a time zone is explicitly specified in timeZone.",
                "optional": false
            },
            {
                "name": "eventEndDate",
                "label": "Event End Date",
                "type": "string",
                "description": "For all-day events, enter the Event day in the format `yyyy-mm-dd`. For events with time, format according to [RFC3339](https://www.rfc-editor.org/rfc/rfc3339.html#section-1): `yyyy-mm-ddThh:mm:ss+01:00`. A time zone offset is required unless a time zone is explicitly specified in timeZone.",
                "optional": false
            },
            {
                "name": "location",
                "label": "Event Location",
                "type": "string",
                "description": "Specify the location of the event",
                "optional": true
            },
            {
                "name": "description",
                "label": "Event Description",
                "type": "string",
                "description": "Enter a description for the event",
                "optional": true
            },
            {
                "name": "attendees",
                "label": "Attendees",
                "type": "string",
                "description": "Enter either an array or a comma separated list of email addresses of attendees",
                "optional": true
            },
            {
                "name": "repeatFrequency",
                "type": "string",
                "label": "Repeat Frequency",
                "description": "Select a frequency to make this event repeating",
                "optional": true,
                "options": [
                    "DAILY",
                    "WEEKLY",
                    "MONTHLY",
                    "YEARLY"
                ],
                "reloadProps": true
            },
            {
                "name": "repeatInterval",
                "type": "integer",
                "label": "Repeat Interval",
                "description": "Enter 1 to \"repeat every day\", enter 2 to \"repeat every other day\", etc. Defaults to 1.",
                "optional": true,
                "hidden": true
            },
            {
                "name": "repeatUntil",
                "type": "string",
                "label": "Repeat Until",
                "description": "The event will repeat only until this date, if set",
                "optional": true,
                "hidden": true
            },
            {
                "name": "repeatTimes",
                "type": "integer",
                "label": "Repeat How Many Times?",
                "description": "Limit the number of times this event will occur",
                "optional": true,
                "hidden": true
            }
        ]
    }
}

Ah. Got it. Thanks you’ve been great.
I’m golden.