Appointment Booking

Book single or multiple appointments depending on the use-case or set up recurring date and time selection. Limit the available dates with the min and max options. Make dates un-selectable with the invalid option. Load pricing, available spots on demand and show it as labels that help people book the appointment.

The calendar can be displayed inline with one or more months or linked to an input. Learn how to initialize the calendar.

Looking for flight or hotel booking?  Check out the range picker →
Get started with this example

Demo

Single date selection

For enhanced validation set min and max dates. In addition to that disable invalid days by passing them to the invalid option.

If you need to show additional information, use the labels option and pass prices or availability. Invalids and things like pricing can be set on-load or on-demand in the @page-loading lifecycle event.

Javascript jQuery Angular React Vue 
<script setup>
const minDate = '2026-11-04T00:00';
const maxDate = '2027-05-04T00:00';
const singleLabels = ref([])
const singleInvalid = ref([])

function handlePageLoadingSingle(event) {
  getPrices(event.firstDay, (bookings) => {
    singleLabels.value = bookings.labels
    singleInvalid.value = bookings.invalid
  })
}

function getPrices(d, callback) {
  let invalid = []
  let labels = []

  getJson(
    'https://trial.mobiscroll.com/getprices/?year=' + d.getFullYear() + '&month=' + d.getMonth(),
    (bookings) => {
      for (let i = 0; i < bookings.length; ++i) {
        const booking = bookings[i]
        const d = new Date(booking.d)

        if (booking.price > 0) {
          labels.push({
            start: d,
            title: '$' + booking.price,
            textColor: '#e1528f'
          })
        } else {
          invalid.push(d)
        }
      }
      callback({ labels: labels, invalid: invalid })
    },
    'jsonp'
  )
}
</script>
<template>
  <MbscDatepicker
    display="inline"
    :controls="['calendar']"
    :min="minDate"
    :max="maxDate"
    :labels="singleLabels"
    :invalid="singleInvalid"  
    @page-loading="handlePageLoadingSingle"
  />
</template>
Booking a date and time

Use a calendar in combination with a time picker or timegrid. Dynamically filter the time grid based on availability and add labels to the dates to inform users of free spots.

Javascript jQuery Angular React Vue 
<script setup>
const minDate = '2026-11-04T00:00';
const maxDate = '2027-05-04T00:00';
const datetimeLabels = ref([])
const datetimeInvalid = ref([])

function handlePageLoadingDatetime(event) {
  getPrices(event.firstDay, (bookings) => {
    datetimeLabels.value = bookings.labels
    datetimeInvalid.value = bookings.invalid
  })
}

function getDatetimes(d, callback) {
  let invalid = []
  let labels = []

  getJson(
    'https://trial.mobiscroll.com/getbookingtime/?year=' +
      d.getFullYear() +
      '&month=' +
      d.getMonth(),
    (bookings) => {
      for (let i = 0; i < bookings.length; ++i) {
        const booking = bookings[i]
        const bDate = new Date(booking.d)

        if (booking.nr > 0) {
          labels.push({
            start: bDate,
            title: booking.nr + ' SPOTS',
            textColor: '#e1528f'
          })
          invalid = [...invalid, ...booking.invalid]
        } else {
          invalid.push(d)
        }
      }
      callback({ labels: labels, invalid: invalid })
    },
    'jsonp'
  )
}
</script>
<template>
  <MbscDatepicker
    display="inline"
    minTime="08:00"
    maxTime="19:59"
    :controls="['calendar', 'timegrid']"
    :min="minDate"
    :max="maxDate"
    :stepMinute="60"
    :labels="datetimeLabels"
    :invalid="datetimeInvalid"
    @page-loading="handlePageLoadingDatetime"
  />
</template>
Booking multiple appointments

For multiple event booking set the selectMultiple option to 'true'. min, max, invalid are essential for a great UX and labels can be used for showing extra information about available spots.

Javascript jQuery Angular React Vue 
<script setup>
const multiple = [
  '2026-11-11T00:00',
  '2026-11-16T00:00',
  '2026-11-17T00:00'
]
const minDate = '2026-11-04T00:00';
const maxDate = '2027-05-04T00:00';
const multipleLabels = ref([])
const multipleInvalid = ref([])

function handlePageLoadingMultiple(event) {
  getBookings(event.firstDay, (bookings) => {
    multipleLabels.value = bookings.labels
    multipleInvalid.value = bookings.invalid
  })
}

function getBookings(d, callback) {
  let invalid = []
  let labels = []

  getJson(
    'https://trial.mobiscroll.com/getbookings/?year=' + d.getFullYear() + '&month=' + d.getMonth(),
    (bookings) => {
      for (let i = 0; i < bookings.length; ++i) {
        const booking = bookings[i]
        const d = new Date(booking.d)

        if (booking.nr > 0) {
          labels.push({
            start: d,
            title: booking.nr + ' SPOTS',
            textColor: '#e1528f'
          })
        } else {
          invalid.push(d)
        }
      }
      callback({ labels: labels, invalid: invalid })
    },
    'jsonp'
  )
}
</script>
<template>
  <MbscDatepicker
    v-model="multiple"
    display="inline"
    :controls="['calendar']"
    :min="minDate"
    :max="maxDate"
    :labels="multipleLabels"
    :invalid="multipleInvalid"
    :selectMultiple="true"
    @page-loading="handlePageLoadingMultiple"
  />
</template>
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.