booking week custom layout

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>
		<style>
			.fc .fc-today-button { border: 0px;}
			.fc .fc-prev-button { border: 0px;}
			.fc .fc-next-button {	border: 0px;}
			.fc .fc-button-primary:focus { box-shadow: 0 0 0 0rem #4c5b6a80 !important;}
			.fc .fc-toolbar.fc-header-toolbar {
				flex-direction: row !important; /* for alle view port sizes */
				margin-bottom: 0.3em !important;
			}
			.fc .fc-toolbar-title {	font-size: 1.2em !important;}
			.fc .fc-col-header-cell-cushion { /*column label*/
			  display: inline-block;
			  padding: 2px 4px;
				font-size: 0.8em !important;
				color: #888;
				font-weight: normal;
			}
			.fc .fc-timegrid-slot-label-cushion { /*row label*/
				font-size: 0.8em;
				color: #888;
			}
			.fc .fc-timegrid-slot-minor {
				border-top-width: 0px;
			}
			.fc .fc-timegrid-slot-lane {
				border-top-width: 1px;
				border-top-color: #f1f1f1;
				border-top-style: dotted;
			}
			.fc .fc-v-event {
				cursor: pointer;
				box-shadow: 0px 0px 3px 1px var(--fc-event-shadow-color);
			}
			.fc .fc-v-event:hover {
				 cursor: pointer;
		     background-color: var(--fc-button-hover-bg-color);
				 border: 1px solid var(--fc-button-hover-bg-color);
			}
			.fc .fc-v-event .fc-event-time{
				font-size: 1.0em;
				text-align: center;				
			}
			:root {
				--fc-border-color: #efefef;
				--fc-button-text-color: #2c2f34;
				--fc-button-bg-color: transparent;
				--fc-button-border-color: #d0d0d0;
				--fc-button-hover-bg-color: #e2f0fc;
				--fc-button-active-bg-color: #94adc3;
				--fc-event-bg-color: #fff;
				--fc-event-text-color: #555;
				--fc-event-border-color: #fff;
				--fc-today-bg-color: transparent;
				--fc-event-shadow-color: #d0d0d0;
			}

		</style>
  </head>

  <body>
    <div id="bookingjs" style="margin: 8px"></div>
    <script type="module">
    	import * as timum...