Vyte slot picker for Svelte

This is a ported version of the Vue.js web component to integrate the Vyte slot picker directly in your website. It's fully configurable component with the following props:

Properties

• emails

  • Type: string
  • Required: true
  • Details: If no users are passed. Email of the person whose availabilities you want to show (Vyte account required). You can pass a list of emails by comma separating them. Slots returned will be slots when all of those users are available.

• users

  • Type: string
  • Required: true
  • Details: If no emails are passed. Vyte user._id of the person whose availabilities you want to show (Vyte account required). You can pass a list of user_ids by comma separating them. Slots returned will be slots when all of those users are available.

• availability

  • Type: string
  • Required: false
  • Details: The _id of a specific availability you want to use for those slots. This availability could match a specific appointment type, for instance.

• ndays

  • Type: number
  • Details: Default is 5. Number of days you want the view to show.

• timezone

  • Type: string
  • Required: true
  • Details: The timezone you want the availabilities displayed in. It must be expressed according to TZ database name.

• duration

  • Type: string
  • Details: Default is 30. Duration in minutes.

• oneColumn

  • Type: boolean
  • Details: Default is false. If you want the slots to be displayed on 1 column (vs 1 column per day).

• start

  • Type: date
  • Details: Defaults to today. Start date expressed according to ISO 8601.

• startAtFirstAvailability

  • Type: boolean
  • Details: Default is false. If you want the first date to jump to the first day that has an available slot.

• nslots

  • Type: number
  • Details: Number of slots max shown per day by default. The user can then click on a "view more slots" button to see all the slots available.

<script>
    import { VyteSlotPicker } from 'vyte-slot-picker-svelte';

    const slotSelectedHandler = (event) => {
        alert(JSON.stringify(event.detail));
    };
</script>

<VyteSlotPicker
    timezone="Europe/Paris"
    emails="[email protected]"
    on:slot-selected="{handleSlotSelected}"
>
</VyteSlotPicker>