@nylas/components-booking

1.0.0-canary.1 • Public • Published

Nylas Booking

Nylas Booking (<nylas-booking>) lets you build event-booking functionality into your application in minutes. Use Nylas Booking with your Nylas account or by passing in your own JSON data.

Nylas Booking is currently in active development. Want to contribute? Find out how!

Getting Started

Documentation

Installation

First, install the Nylas Booking Component with npm

npm install @nylas/components-booking

or with yarn

yarn add @nylas/components-booking

or using the CDN by adding this script tag

<script src="https://unpkg.com/@nylas/components-booking"></script>

Usage

If you've installed Nylas Booking using the CDN, then <nylas-booking></nylas-booking> is ready to use.

Otherwise, import the Nylas Booking component into your application.

import "@nylas/components-booking";

Using Nylas Provider

Setup

If you haven't registered for a Nylas account yet, you can do so at dashboard.nylas.com. Once there, head to the Components tab and create a new Booking component.

Allowed domains

During the setup process, you'll be prompted to provide a list of allowed domains. Be sure to add any domains you'll be testing your app on, including localhost, and any staging and production URLs you might use.

Bring your own data

Nylas Booking can be used as a UI for any calendar data you provide.

Properties you can pass to Nylas Booking are event_title, event_description, event_location, event_conferencing, slots_to_book

Reference

Properties

Name Type Description Required Default Value
id string The id of the Booking component true
access_token string Authorization for component calendar actions false
booking_label string Customize the text of the booking button false "Schedule time slots"
custom_fields CustomField[] Add custom fields to collect input data from users before booking false By default, the component adds inputs for name, and email
event_title string Set the title of the event to be scheduled. false "Meeting"
event_description string Set the description of the event to be scheduled. false ""
event_location string Set the meeting location of the event to be scheduled. false ""
event_conferencing string Set the URL of the zoom meeting false ""
slots_to_book BookableSlot[] Pass a list of events for the component to use for booking. If multiple events, then consecutive mode will be used. false []
notification_mode NotificationMode Choose whether to display a notification on the UI, or to send by email false "show_message"
notification_message string Set the text of the notification displayed or sent false "Thank you for scheduling!"
notification_subject string Set the subject of the notification when using `notification_mode="show_message" false "Invitation"
recurrence Recurrence Choose whether event should repeat? TODO false "none"
recurrence_cadence RecurrenceCadence[] Set how often the event should recur. false ["none"]
recurrence_expiry RecurrenceExpiry Set when recurring events should stop repeating. false null
event_options any[] TODO false []

Events

You can listen to certain events from your application by adding an event listener to the component.

onError Listen to error events.

document.querySelector("nylas-booking").addEventListener("onError", (event) => {
  let { detail } = event;
  console.log("onError: ", detail);
});

bookedEvents Listen to bookedEvents event. Responds with an list of events.

document
  .querySelector("nylas-booking")
  .addEventListener("bookedEvents", (event) => {
    let { detail } = event;
    console.log("bookedEvents: ", detail.events);
  });

hoverOptionChange Listen to hoverOptionChange event. Responds with the actively hovered event when using consecutive mode.

document
  .querySelector("nylas-booking")
  .addEventListener("hoverOptionChange", (event) => {
    let { detail } = event;
    console.log("hoverOptionChange: ", detail.event);
  });

eventOptionSelected Listen to eventOptionSelected event. Responds with the actively selected event.

document
  .querySelector("nylas-booking")
  .addEventListener("eventOptionSelected", (event) => {
    let { detail } = event;
    console.log("eventOptionSelected: ", detail.event);
  });

Types

type Recurrence: "none" | "required" | "optional";

type RecurrenceCadence:
    "none"
    | "daily"
    | "weekdays"
    | "weekly"
    | "biweekly"
    | "monthly";

type RecurrenceExpiry: Date | string;

type NotificationMode: "show_message" | "send_message";

interface CustomField {
  description?: string;
  required: boolean;
  title: string;
  type: "text" | "checkbox" | "email";
  id?: string;
  placeholder?: string;
}

interface TimeSlot {
  start_time: Date;
  end_time: Date;
  available_calendars: string[];
  calendar_id?: string;
  expirySelection?: string;
  recurrence_cadence?: string;
  recurrence_expiry?: Date | string;
  isBookable: boolean;
}

interface BookableSlot extends TimeSlot {
  event_conferencing: string;
  event_description: string;
  event_location: string;
  event_title: string;
  expirySelection: string;
  participantEmails: string[];
  recurrence_cadence?:
    | "none"
    | "daily"
    | "weekdays"
    | "biweekly"
    | "weekly"
    | "monthly";
  recurrence_expiry?: Date | string;
}

Integrating with Other Components

Nylas Components can also work in coordination with one another. The sections below cover different scenarios.

Select Event with Nylas Availability

With the Nylas Booking Component, you can configure actions based on events. The code below is an example of responding to the timeSlotChosen event from the Availability component.

document.addEventListener("DOMContentLoaded", function () {
  const availability = document.querySelector("nylas-availability");
  const booking = document.querySelector("nylas-booking");

  // Set event definition
  availability.events = [
    {
      event_title: "My Intro Meeting",
      event_description: "Lets about nylas components!",
      slot_size: 15,
      participantEmails: ["example@example.com"],
    },
  ];

  // When a timeslot is selected, set the slot to book on the
  // component.
  availability.addEventListener("timeSlotChosen", (event) => {
    console.log({ timeSlotChosen: event.detail.timeSlots });
    booking.slots_to_book = event.detail.timeSlots;
  });
});

Select Consecutive Events with Nylas Availability

With the Nylas Booking Component, you can configure actions based on events. The code below is an example of responding to the eventOptionSelected event from the Availability component.

document.addEventListener("DOMContentLoaded", function () {
  const availability = document.querySelector("nylas-availability");
  const booking = document.querySelector("nylas-booking");

  // Set event definition
  availability.events = [
    {
      event_title: "My Intro Meeting",
      event_description: "Lets about nylas components!",
      slot_size: 15,
      participantEmails: ["example@example.com"],
    },
    {
      event_title: "Follow Up Meeting",
      event_description: "Lets about nylas components... again!",
      slot_size: 15,
      participantEmails: ["example@example.com"],
    },
  ];

  // When a timeslot is selected, set the slot to book on the
  // component.
  availability.addEventListener("timeSlotChosen", (event) => {
    console.log({ timeSlotChosen: event.detail.timeSlots });
    booking.slots_to_book = event.detail.timeSlots;
  });

  availability.addEventListener("eventOptionsReady", (event) => {
    console.log({ eventOptionsReady: event.detail.slots });
    booking.event_options = event.detail.slots;
  });

  booking.addEventListener("hoverOptionChange", (event) => {
    console.log({ eventOptionSelected: event.detail.event });
    availability.event_to_hover = event.detail.event;
  });

  booking.addEventListener("eventOptionSelected", (event) => {
    console.log({ eventOptionSelected: event.detail.event });
    availability.event_to_select = event.detail.event;
  });
});

Dependents (0)

Package Sidebar

Install

npm i @nylas/components-booking

Weekly Downloads

48

Version

1.0.0-canary.1

License

none

Unpacked Size

206 kB

Total Files

6

Last publish

Collaborators

  • b3ndoi
  • krisgardiner
  • nylas-admin
  • poojaguggari
  • sourcesoft
  • aaron-nylas
  • ozsivanov
  • mrashed-dev