timum-booking1-plug&play

by timum

HTML

<div id="bookingjs">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@timum/[email protected]/dist/main.booking.min.js"></script>

<script type="text/javascript">
  Timum().init({
  	
    /* 
		Get resourceId in timum resource dialog under 'Externe Referenzen'.
    Replace demo-resourceId below.
		The structure is always like this: {externalID}@{providerId}@{platformReference}
    You can generate reference by just replacing the externalID left to the first '@'.
    */
    /*resourceId: "booking-widget-demo-resource-2@3da92d50-78e6-11ea-aba9-06ecf2a1ba22@timum",*/
    /* 
    demo resource with multiple services: */
		resourceId: "booking-widget-demo-resource@3da92d50-78e6-11ea-aba9-06ecf2a1ba22@timum",
    fullcalendar: {
      contentHeight: 'parent' 
      // height of calendar. Default is 400. Apply one of these options:
      //		- 'parent' to adjust to parent window (perfect for iFrame integration)
      //	  - e.g. 400 for a fixed height in pixels (perfect for direct embed as javascript)
      //		- 'auto' to adjust to content height 
    }
  });
</script>
</div>

CSS

body {
                background-color: #e6e6e6;
                max-width: 700px;
                margin: 0 auto;
            }

            
            /*  This is just a selection of classes that you may want to override to customise the appeareance of the calendar.

                The "design" chosen below serves to showcase the flexibility of the interface. 

                To use the timum standard color scheme delete the css below this text.   
            */

            /* chnage this varaiable to change the font in all of all elements */
            :root {
                --font: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
            }


            /* override the standard appeareance of events/appointments/timeslots/availabilities (whatever you may call it) */

            .fc-time-grid-event {
              background-color: #FFF !important;
              color: #333 !important; /* text color */
              border-left-color: #939393 !important;
              border-left-style: solid !important;
              border-left-width: 2px !important;
            }

            .bookingjs {
              font-family: var(--font) !important;
              background-color: #fff !important;
              border-top-color: #fff !important;
            }

            /* change appeareance of the booking dialog */
            .bookingjs-bookpage {
              background-color: whitesmoke !important;
              font-family: var(--font) !important;
              color: gray !important; /* text color */
            }

             /* override appeareance of the booking button (shown in booking dialog) */
             .bookingjs-form-button {
              background-color: #2e5bec !important;
              font-family: var(--font);
            }

            /* override appeareance of input fields (shown in booking dialog) */
            input {
              font-family: var(--font) !important; /* font of hint */
              color: #333...