timum single instance example

by timum

HTML

<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: 400px;">
            <h2 style="text-align: center">Frau Bauer</h2>
            <div id="agent1timum"></div>
    </div>
    <div style="flex-direction:column; display: flex; flex: 1; min-width: 350px; min-height: 400px;">
            <h2 style="text-align: center">Frau Huber</h2>
            <div id="agent2timum"></div>
    </div>
</div>

JavaScript

// IMPORTANT: put this script to bottom before closing body tag, cause div 'agent1timum' is needed to be created first
  // calendarFrontend options: {(default=detailView), pureListView, fullCalendar}

 // cancel params:
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const urlAuthToken = urlParams.get('X-SIGNED-APP-CUSTOMER');
const urlResId= urlParams.get('resId');
const urlPDataPlatform = urlParams.get('pDataPlatform');
const urlPDataId = urlParams.get('pDataId');
const urlPDataPropName = urlParams.get('pDataIdPropName');
//const location = window.location;
const url = location.href;
const hash = url.split('#')[1];

  var iframeT = document.createElement('iframe');
  iframeT.srcdoc = "<body><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';const formFields = {emailValidation: {index: 4, title: 'E-Mail (wiederholen)', type: 'text', format: 'email', prefilled: '',validation: yup.string().required('validation.field_required').oneOf([yup.ref('email')], 'E-Mail muss übereinstimmen.'),}, selectedItem:{index: 5, title: 'Bitte die Wohnungsnummer aus dem Angebot angeben', type: 'text', prefilled: '', validation: yup.string().required('validation.field_required'), }, message: { index: 6, title: 'Ihre Nachricht (optional)', }, agbs: { index: 7, title: '<a href=\"https:\/\/info.timum.de/datenschutz/\" target=\"_blanc\">Datenschutzbestimmungen<\/a> gelesen und akzeptiert.', type: 'checkbox', }, }; init( { rootElId: 'bookingOnejs', ref: 'anna.bauer@e20c1fb0-f480-11ed-9731-0224b786672a@timum', calendarFrontend: 'fullCalendar', fields: formFields, sendCustomValuesInMessage: true, hideTimumFooter: true, height: 500, }, {}, { headerToolbar: { start: 'prev', end: 'next' }, }); <\/script><\/body>";
  iframeT.id = "timumFrame";  iframeT.setAttribute('width','100%');...