Calendly Vue

A simple Vue.js component to embed calendly in your web app.

Install

npm i calendly-vue

Usage

Import and add to your components section

import CalendlyVue from "calendly-vue"

export default {
    components: {
        CalendlyVue
    },
    methods: {
        logEvent(evt) {
            console.log(evt)

            // Here you can handle the emitted events with custom code
            if (evt === "calendly.profile_page_viewed") {
                console.log("Calendly profile has been opened")
            }
        }
    }
}

Use in your HTML section:

<calendly-vue url="someone-123" @event="logEvent" @event-details="logEvent" @error="logEvent"></calendly-vue>

url prop refers to your personal/business link of calendly, buy only the variable part, i.e having the URL https://calendly.com/someone-123, we only need the someone-123 segment.

Nuxt

This component does not work in SSR, to use it in Nuxt it is necessary to create a new file named calendly.client.js in your plugins folder:

// plugins/calendly.client.js
import Vue from "vue";
import CalendlyVue from 'calendly-vue'

Vue.use(CalendlyVue)

Add the plugin to your plugins array in nuxt.config.js file:

// nuxt.config.js
plugins: [
    '~/plugins/calendly.client.js'
]

Props

Available props to customize the component.

| Name | Description | Required | Default| |-----------|-------------------------------------------------------------------------------|-----------|--------| | url | The profile or business account segment of the calendly URL e.g (someone-123) | true | null | | width | Sets a custom width to the calendly container (can receive px, %, em, vw) | false | 100% | | height | Sets a custom height to the calendly container (can receive px, %, em, vh) | false | 60vh |

Events

Events triggered by the component.

@event

Receives events triggered by the calendly embed, options are:

| Event name | Description | |-----------------------------------|---------------------------------------| | calendly.profile_page_viewed | Profile page was viewed | | calendly.event_type_viewed | Event type page was viewed | | calendly.date_and_time_selected | Invitee selected date and time | | calendly.event_scheduled | Invitee successfully booked a meeting |

You can check the official events documentation here

@event-details

Triggers details about the user selected date or info provided by him.

@error

Receives errors generated by the calendly widget to allow you debug some errors.

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Tutorial followed to create this package Here