booking week

by timum

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>timum single instance example</title>
  </head>

  <body>
    <div id="bookingjs" style="margin: 8px"></div>
    <script type="module">
    	import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js'
      
      timum.init(
			{ 
				ref: "booking-widget-demo-resource-2@timum", 
				calendarFrontend: "fullCalendar",
				hideTimumFooter: true,
			}, // <- appConfig object
      {}, // <- muiTheme object,
      {
      	//initialView: 'timeGridWeek',
				headerToolbar: {
					start: 'productSelection',
					//center: 'title',
					end: 'today,prev,next'
				},
				//displayEventEnd: false,
				//slotLabelInterval: '01:00',
				//slotDuration: '00:30',
				//contentHeight: 400,
        views: {
						timeGridWeek: {
							slotMinTime: '09:00:00',
							slotMaxTime: '20:00:00',
							allDaySlot: false,
						}
				}
      } // <- fcConfig object
      )
			// responsive header
			//document.querySelector('style').textContent += "@media screen and (max-width:567px) { .fc-toolbar.fc-header-toolbar {font-size: 80%;} }";
			//document.querySelector('style').textContent += "@media screen and (max-width:376px) { .fc-toolbar.fc-header-toolbar {flex-direction:column;} .fc-toolbar-chunk { display: table-row; text-align:center; padding:5px 0; } }";
    </script>
  </body>

</html>