Unified.to's Calendar API VueJS Scheduling Component

Installing

Package manager

Using NPM:

$ npm install @unified-api/vuejs-calendar-scheduler

Using yarn:

$ yarn add @unified-api/vuejs-calendar-scheduler

Once the package is installed, you can import the component:

import CalendarScheduler from '@unified-api/vuejs-calendar-scheduler';

CSS Setup

This component uses standard CSS classes. To ensure the styles are properly applied, you have import the bundled CSS:

import '@unified-api/vuejs-calendar-scheduler/dist/style.css';

Example

<template>
    <CalendarScheduler />
</template>

<script lang="ts">
import CalendarScheduler from '@unified-api/vuejs-calendar-scheduler';
import '@unified-api/vuejs-calendar-scheduler/dist/style.css';

export default {
    components: {
        CalendarScheduler,
    },
};
</script>

The following are the props that can be passed to the component:

{
     // use busy or available or connection_id+api_token
    busy: Array as PropType<TCalendarBusy[]>,
    available: Array as PropType<TCalendarBusy[]>,
    connection_id: String,

    // in minutes, default to 60
    duration: Number,

    // defaults to English month names
    months: Array as PropType<string[]>,

    // defaults to English day names
    days: Array as PropType<string[]>,

    // defaults to Appointment
    type: String,

    // function to book the appointment
    bookFn: Function as PropType<(form: TBookingForm) => void>,

    // default timezone (optional)
    defaultTimezone: String,

    api_token: String, // you SHOULD NEVER use this in a production front-end as it will leak your API Key/Token. Instead call your back-end whcihnwouldncall the Unified.to API to fetch the Busy data.

    // in minutes, default to 60
    duration: Number,

    // defaults to weekdays, 0 = Sunday, 1 = Monday, etc.
    work_days: Array as PropType<number[]>,

    // defaults to 'us' - used only with connection_id+api_token
    dc: String as PropType<'us' | 'eu' | 'au'>,

    // defaults to 9
    start_hour: Number,

    // defaults to 17
    end_hour: Number,
}

TCalendarBusy is defined as follows:

type TCalendarBusy = {
    start_at: string; // ISO date
    end_at: string; // ISO date
};