@lydian/venue-calendars

Getting Started

npm i @lydian/venue-calendars

@lydian/venue-calendars provides 3 calendars: admin, booking & renting calendar.

For developing, seek DEVELOPMENT.md.

Demo examples

Check demos folder for example how each calendar can be tested/used.

AdminCalendar

Add HTML element, where to hook admin-calendar.

Example:

<div id="lydian-admin-calendar"></div>

Slot type

type Slot = {
    id: string;
    start: string;
    end: string;
    multiplier: number;
    tag_id: string;
    // Can have additional properties.
}

// Example slot:
const slot = {
    id: "979de2fe-f03a-4252-81e9-50215981a7f7",
    start: '2022-10-05T15:00:00.000Z',
    end: '2022-10-05T16:00:00.000Z',
    foo: 'bar',
    multiplier: 1,
    tag_id: "239de2fe-f03a-4252-81e9-50215981a7a2",
}

Tag type

type Tag = {
    id: string;
    name: string;
}

// Example tag:
const tag = {
    id: "239de2fe-f03a-4252-81e9-50215981a7a2",
    name: "Castle",
}

Example

import { AdminCalendar } from '@lydian/venue-calendars';

document.addEventListener("DOMContentLoaded", function async () {
    const element = document.querySelector("#lydian-admin-calendar");

    // Fn that loads all slots & tags.
    // Must return as a following object:
    // {
    //   slots: Slot[],
    //   tags: Tag[],
    // }
    const getSlotsAndTags = () => {
        fetch('/data').then(res => {

            return {
                slots: res.data.slots,
                tags: res.data.tags,
            }
        });
    }

    // Called, when user clicks "Save".
    const updateSlotsAndTags = (slots, tags) => {
        fetch('/data', {
            method: 'PUT',
            // ...
        })
    }

    // Creates UI for calendar and sidebar with it's functionality.
    const adminCalendar = new AdminCalendar({
        el: element,
        locale: "et",
        slotsAndTagsLoader: getSlotsAndTags,
        onClickSave: updateSlotsAndTags,
    });
});

BookingCalendar

Add HTML element, where to hook booking-calendar.

Example:

<div id="lydian-booking-calendar"></div>

Slot type

type Slot = {
    id: string;
    start: string;
    end: string;
    multiplier: number;
    tag_id: string;
    // Can have additional properties.
}

// Example slot:
const slot = {
    id: "36df9ecb-00c0-4e6a-84ad-71cfb1349878",
    start: '2022-10-05T15:00:00.000Z',
    end: '2022-10-05T16:00:00.000Z',
    multiplier: 1,
    tag_id: "239de2fe-f03a-4252-81e9-50215981a7a2",
    // Can have additional properties.
}

Program type

type Program = {
  id: number;
  image: string;
  title: string;
  location: string;
  duration: number; // In minutes.
  template_id: number;
  tag_id: string;
  // Preperation time.
  pre_time: number; // In minutes.
  // Cleanup time.
  post_time: number; // In minutes.
}

// Example program
const program = {
  id: 1234,
  image: './pathtothepicturelocation/name.jpg',
  title: 'Title of the Program',
  location: 'Apple tree 55, 12345, Tallinn',
  duration: 60, // how long the programm will last in minutes
  template_id: 1,
  tag_id: "239de2fe-f03a-4252-81e9-50215981a7a2",
  pre_time: 15,
  post_time: 5,
}

Example

import { BookingCalendar } from '@lydian/venue-calendars';

document.addEventListener("DOMContentLoaded", function async () {
    const element = document.querySelector("#lydian-booking-calendar");

    // Fn that loads all slots of the currently selected program's venue
    // return Slot[]
    const getSlots= () => {
        fetch('/slots?venue=miiamilla').then(res => res.data);
    }

    // Fn that loads all the slots that were selected in the cart
    // return Slot[]
    const getBookingsInCart = () => {
        fetch('/slotsincart').then(res => res.data);
    }

    // Called, when user clicks "Book".
    // slot selectedSlot
    const addToCart = (slot: Slot) => {
        /* Add the slot into the cart */
    }

    // Called, when user clicks "Add to cart".
    // slot selectedSlot
    const addToCartAndRedirectToFinalizeBooking = (slot: Slot) => {
        /* Add the slot into the cart and redirect use to
        finalize the booking */
    }

    /**
     * Bookings from Lydian.
     *
     * Can be passed as null or empty string, if not wanted.
     */
    const urlForBookings = 'https://foobar.lydian.app/v2/_api/free-busy?f[type_ids][0]=1';

    /**
     * Internal events or activites - that will be count as "bookings". This one is
     * different, because "count/multiplier" logic does not matter here.
     *
     * Can be passed as null or empty string, if not wanted.
     */
    const urlForOtherEvents = 'https://foobar.lydian.app/v2/_api/free-busy?f[type_ids_excluded][0]=1';

    /**
     * Not enough persons for creating a program. Similar to "urlForOtherEvents", where
     * "count/multiplier" logic does not matter.
     *
     * Can be passed as null or empty string, if not wanted.
     */
    const urlForPersons = 'https://foobar.lydian.app/v2/_api/free-busy-of-persons';

    // Creates UI for calendar and sidebar with it's functionality.
    const bookingCalendar = new BookingCalendar({
        el: element,
        locale: "et",
        slotsLoader: getSlots,
        bookingsInCartLoader: getBookingsInCart,
        program: program,
        bookingBuffer: 24,
        onClickAddToCart: addToCart,
        onClickBook: addToCartAndRedirectToFinalizeBooking,
        urlForBookings: urlForBookings,
        urlForOtherEvents: urlForOtherEvents,
        urlForPersons: urlForPersons,
    });
});

Bookingcalendars´ public functions

• refetch() - Refetches resources to render bookable slots.

RentingCalendar

Add HTML element, where to hook renting-calendar.

Example:

<div id="lydian-renting-calendar"></div>

This calendar module uses the following types: Room & BookedRoomSlot.

Room type

Used for displaying information about the room that´s about to be rented. Also selected slot for renting gets linked with the room´s ID.

type Room = {
    id: number; // Room ID from the Lydian application.
    name: string;
    location: string;
    price_per_hour: number;
    image: string;
}

// Example room:
const room = {
    id: 23,
    name: 'Main Hall',
    location: 'Taltech',
    price_per_hour: 20,
    image: '/images/foobar.png',
}

BookedRoomSlot type

Selected timeslot by the user that he/she wants to rent. This object contains all necessary info for booking.

type BookedRoomSlot = {
    id: string;
    start: string; // ISO string.
    end: string; // ISO string;
    room_id: number; // Room ID from the Lydian application.
}

// Example bookedRoomSlot:
const BookedRoomSlot = {
    id: '36df9ecb-00c0-4e6a-84ad-71cfb1349878',
    start: '2023-10-05T15:00:00.000Z',
    end: '2023-10-05T16:00:00.000Z',
    room_id: 23,
    tag_id: '239de2fe-f03a-4252-81e9-50215981a7a2',
}

Example

import { RentingCalendar } from '@lydian/venue-calendars';

document.addEventListener("DOMContentLoaded", function async () {
    const element = document.querySelector("#lydian-renting-calendar");

    const room = {
        id: 1,
        name: 'Hall',
        location: 'Westwood, Kentucky',
        price_per_hour: 100, // In euros.
        image: '/images/foobar.png',
        room_ids: "12, 13",
    }

    const bookingBuffer = 8; // In hours, optional - defaults to 0.

    // Slots aka business hours, where user can rent room. Outside of these hours,
    // the room will be unavailable. "useBusySlots" value must be set to "true" for
    // this to work.
    const busySlotsLoader = (): Promise<Slot[]> => {
        return fetch('/slots').then(res => res.data);
    }

    // Public API endpoint from Lydian side, where we get timeslots of room that
    // are busy (aka not rentable). Optional.
    const urlForLydianBusyTimes = 'https://foobar.lydian.app/v2/_api/free-busy';

    // Callback function to handle the selected timeslot that user wants
    // to rent. This will proceed to select again for the user.
    const onClickAddToCartButton = (bookedRoomSlot: BookedRoomSlot) => {
        // Do something with bookedRoomSlot.
    }

    // Callback function to handle the selected timeslot that user wants
    // to rent. This will not allow user to select more. User should be
    // redirected to cart or elsewhere.
    const onClickBookButton = (bookedRoomSlot: BookedRoomSlot) => {
        // Do something with bookedRoomSlot.
    }

    // Returns slots from the cart. Objects must be as BookedRoomSlot type.
    const getBookingsInCartLoader = (): Promise<BookedRoomSlot[]> => {
        return fetch('/slotsincart').then(res => res.data);
    }

    // Creates & renders calendar.
    const rentingCalendar = new RentingCalendar({
        el: element,
        locale: "et",
        room: room,
        busySlotsLoader: busySlotsLoader,
        useBusySlots: true,
        bookingBuffer: bookingBuffer,
        urlForLydianBusyTimes: urlForLydianBusyTimes,
        bookingsInCartLoader: getBookingsInCartLoader,
        onClickAddToCart: onClickAddToCartButton,
        onClickBook: onClickBookButton,
    });
});