GOOGLE CALENDAR

Import and update Google Calendar events to and from Roam!

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block type three back ticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-google-calendar-main");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/google-calendar/main.js";
  extension.id = "roamjs-google-calendar-main";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".


Table of Contents

Overview

Import, update and create Google Calendar events to and from Roam using this Google Calendar extension.

Demonstration

How to Use

✏️Instructions:

Setup:

Login to your Google Calendar: A [[roam/js/google]] page will be created upon installing the extension for the first time.

To use the Google Calendar extension, login to your Google account on this page. This will also enable you to use other Google-based RoamJS extensions.

Use:

In any page, activate the Roam Command Palette by hitting CTRL+P on windows or CMD+P on Mac, then click the Import Google Calendar command.

The extension will fill the page with the events you have for that day. It will be displayed in the timezone of your browser. It will use either the page's title if it's a daily note, or the current date if it's not.

😎 Cool features to try 😎:

Creating Events

You can create google calendar event right from Roam!

To create an event, focus on a block and then activate the Roam native command palette (CMD+p on Mac, CTRL+p on Windows).

The dialog will prefill with the data that is in the block and its children.

Use native Roam Attributes with a double colon (::) to specify a field and its value.

Click create to generate the event on your primary Google Calendar. Once successfully created, the link to the event will be added to the block.

This is an example of a block and the values that will prefill the modal:

Updating Events

You can update existing events on Google Calendar from Roam.

On any block that has a Google Calendar link, an edit pencil will appear on the right end of the block. Clicking the pencil will prefill the dialog with the event's existing data from Google Calendar. Change the values from the dialog and hit update. Upon successfully updating, the block's contents with the link will update to reflect the new values of the Google Calendar event!

😎 😎 Super cool feature 😎:

This extension integrates with SmartBlocks!

If you have both this extension and SmartBlocks installed, there is a <%GOOGLECALENDAR%> command available. The command will automatically run the import google calendar logic and paste the events in blocks before continuing with the rest of the workflow.

Customizations

You have the option of customizing the several import items:

A [[roam/js/google-calendar]] page is created when you first install this extension. On the import tab, you will find numerous fields used to configure the calendar import feature.

Calendars specifies which calendars you would like Roam to read before importing. If you specify more than one, it will read from all of those calendars. You must use the calendar ID provided by Google which you could find in the calendar settings. This will usually be your Gmail address, such as dvargas92495@gmail.com. If you are logged in with multiple accounts on the roam/js/google page, you could specify which one each calendar is mapped to.

Include Event Link hyperlinks the event summary with a link to the google calendar event. This field also now applies if you specify a Format.

Skip Free filters out the events from your calendar that you've set to 'Free'

Filter is an optional regular expression you could use to filter for events based on the summary or description.

Add TODO is a flag that when enabled, prefixes the Format used with {{[[TODO]]}} . Use this to avoid an actual page reference to TODO on the configuration page.

Format specifies the text to add for each calendar event. Could use the following placeholders to be replaced with the event's data:

  • {summary} - the name of the event

  • {link} - the link for the event

  • {hangout} - the hangout link for the event

  • {confLink} - a conference link for the event (labeled 'Meet' or 'Zoom' as appropriate)

  • {location} - the location for the event

  • {start} - the start time of the event. Add a colon and format to customize the start time format. For example, {start:hh:mm} will resolve to 12:00

  • {end} - the end time of the event. Add a colon and format to customize the end time format. For example, {end:hh:mmaaaaa} will resolve to 12:00p

  • {attendees} - the attendees of the event, comma-delimited. Could optionally include a format after a colon. For example, {attendees:[[NAME]]} will output each attendee as a page reference. The placeholder NAME will be replaced by the attendee's display name or the email if there's no display name.

    • Display names are only available for gmail.com accounts, not for Gsuite/Workspaces accounts.

  • {calendar} - the calendar id of the event

  • {duration} - the duration of the event in minutes

By default, Format will be {summary} ({start:hh:mm a} - {end:hh:mm a}) - [Meet|Zoom]{link}

  • Sample custom format: {{[[TODO]]}} {start:hh:mmaaaaa} - {end:hh:mmaaaaa} - {summary}{confLink}

See the date-fns library for more details on time formats.

Support

There is an active community at roamresearch.slack.com channels #roam42 and #roam-js. Stop by if you need help or want to share your ideas.



Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

A special thanks to those who's contributions also helped make this extension possible:

Other Extensions