Booking - Multiple Resources

Multiple bookable Resources in one view with custom form fields (PRO)

by timum

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=0.6" />
    <title>timum single instance example</title>
</head>

<body>
    <div id="timumdiv" class="flex-container" style="display:flex; min-height: 550px; flex-flow: row wrap;">
        <div style="flex-direction:column; display:flex; flex: 1; min-width: 350px; min-height: 500px;">
            <iframe width="100%" style="border-width: 0" height="100%" srcdoc="
                <div id='bookingOnejs' style='margin: 0px 16px 0px 8px'></div>
                <script type='module'>
                    import { init, yup } from 'https://cdn.timum.de/bookingjs/1/booking.js';
                    const calendarUI = 'fullCalendar'; //'pureListView';
                    const formFields = {
                        // For the feature 'custom fields', you need either an accounting plan 'professional' or 'managed calendar' 
                        // set default fields to 'undefined' explicitly in order to remove them, e.g. mobile: undefined,
                        mobile: {
                            index: 3,
                            title: 'Mobil',
                            type: 'phoneNumber',
                            isRequired: false,
                            defaultCountry: 'CH',
                            preferredCountries: ['CH', 'DE', 'FR', 'IT'],
                            // validation: is in built and ignored
                        },
                        selectedItem: {
                            index: 4,
                            title: 'Bitte geben Sie Ort bzw. den Treffpunkt an.',
                            type: 'text',
                            prefilled: '',
                            validation: yup.string().required('validation.field_required'),
                        },
                        message: {
                         ...