Kloudless Blog

Tutorials, case studies and how-tos from our experts

Create your own calendar tool

Since we released our new Meeting Scheduler UI Tool (blog post), many developers have wondered what’s going on under the hood. We’ll be walking through the best way to implement your own Meeting Scheduler using the Kloudless Calendar API.

Authenticate your users’ calendar accounts

As a developer, you want to provide the optimal user experience, so the best way is to support all of the calendars your users need.  Kloudless’ Calendar API supports the following cloud services:

  • Outlook Calendar
  • Google Calendar
  • CalDAV
  • iCloud Calendar (via CalDAV)
  • Exchange Calendar (for on-premises)

Kloudless uses OAuth 2.0 for users to grant access to information about their calendars and events. The easiest way for a developer to connect to their users is to use the authenticator.js JS library.  Here’s a code snippet that shows how easy it is to embed the authenticator.js (angular.js, react.js, and vue.js bindings coming soon):

In your HTML:

In your JS:

The key pieces of information are the Account ID and Bearer Token, which let you make API requests to the following endpoints:

Retrieve all of the user’s calendars:

Calculating availability based on time constraints

In Kloudless’ Meeting Scheduler, we prompt the user for some basic information about the meeting they are trying to create:

  • Event Duration
  • Event Description
  • Event Location
  • Event Name
  • Preferred Date and Time Range

In this section, we presume that the user is also the owner of the event. The most important pieces of information are the invite owner’s desired times for when the meeting should occur and how long the meeting should be. Developers can then use Kloudless’ Calendar Availability endpoint to dynamically calculate when a meeting should take place given the events on the owner’s calendar.

A basic example of querying the endpoint can be found below. For a more detailed explanation, check out the product release blog post.

Calculating Availability:

Creating a calendar event and adding invitees:

The last and final step is the easiest in the process since we simply need to create a calendar event and invite the attendees. However, we require additional information on the attendee list and agreed-upon meeting time.

In the initial release of Kloudless’ Meeting Scheduler, we provide a public link that the owner can use to invite individual attendees to choose when an event should be held. The attendee can also provide their email address to receive a calendar invite to the event. In the next version of the Kloudless Meeting Scheduler, we plan to support multiple attendees and calendars when creating an event.

Creating an event and inviting an attendee

You’ve scheduled a meeting!

And that’s how you can implement the core functionality of a system to schedule meetings among users! Check out our implementation on GitHub for an out-of-the-box solution that can be embedded in your app. If you have any questions or comments, please feel free to reach out to us at hello@kloudless.com!

Published By

Timothy Liu