Resource Calendar Component
  • 30 Sep 2022
  • 2 Minutes to read
  • Contributors

Resource Calendar Component

Resource Calendar Component

Visualize and Interact with Calendars using Tulip Tables

Interested? Reach out to or the Chat in the bottom right and we will get you this application imported to your site.


This component enables users to create calendar events within Tulip and view and interact with them using a calendar "widget". This component is meant to be used, understood, and repurposed for any process that could benefit from this sort of functionality. It also showcases some advanced techniques that could be used for other purposes.

General Process Overview

Create calendar events using the event creation input fields on the left side of the app and navigate through your calendar using the interactive table on the right. Selecting any location will display the events beneath it in a tabular format.

Getting Started - Application Overview

Below is a video that walks through the application in more detail:


These applications make use of Tulip Table APIs which will need to be set up before the app will function.

Setting up the Tulip Table API

First, create a bot using the Tulip Table API by clicking on settings in the top right

Then Create a Bot

Grant the Bot all Scopes

This will generate credentials for you to set up your API connector. It is a good idea to save these somewhere. Leave this window open while you open up a new window.

In your other window, navigate to your connectors and select the new HTTP connector called "Table API" and edit the connection settings

Resource Calendar Component

Choose "Cloud Connector Host" and enter in your tulip instance as the host. Then click edit headers.

Choose Basic Auth and enter in your API Key (from the previous window) as the Username and your Secret as your Password.

Your table API is now set up!

Application Functionality

This application uses an advanced technique to generate the calendar as an interactive table.

First, it pulls the table records from the Tulip Table API as a JSON string. Typically, users use the HTTP connector function to pull data formatted exactly as they intend to display or process them within the Tulip app editor.

In this example, we pull the table data as a single block of text (as shown below):

We then take this JSON string and send it into the Connectors Demo connector, where we manipulate it for the purpose of display / formatting for the interactive table.

Postgres has built-in functions that can understand and manipulate JSON-formatted data. When this is coupled with any API response (including our own Tulip Table API!) you can freely manipulate records, connecting them to your ERP, generating calculated fields, or transforming the data in any way you'd like - including calendar visualizations!

Was this article helpful?

What's Next