JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="demo-booking-multiple"></div>

JavaScript

mobiscroll.datepicker('#demo-booking-multiple', {
    controls: ['calendar', 'timegrid'],
    min: '2021-11-16T00:00',
    max: '2022-05-16T00:00',
    minTime: '08:00',
    maxTime: '19:59',
    stepMinute: 60,
    // example for today's labels and invalids
    labels: [{
        start: '2021-11-15',
        textColor: '#e1528f',
        title: '1 SPOTS'
    }],
    invalid: [{
        start: '2021-11-16T08:00',
        end: '2021-11-16T13:00'
    }, {
        start: '2021-11-16T15:00',
        end: '2021-11-16T17:00'
    }, {
        start: '2021-11-16T19:00',
        end: '2021-11-16T20:00'
    }]
});