Added customer composite key

app/assets/stylesheets/calendar.css

@@ -0,0 +1,30 @@
+.calendar-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  padding: 0;
+  margin: 0;
+}
+
+.calendar-grid {
+  width: 100%;
+  height: calc(100vh - 50px); /* Adjust based on your header height */
+  display: grid;
+  grid-template-columns: repeat(7, 1fr); /* 7 days */
+}
+
+.calendar-header {
+  position: sticky;
+  top: 0;
+  background-color: white;
+  z-index: 10;
+}
+
+.calendar-time-slot {
+  min-height: 50px; /* Adjust as needed */
+} 

app/assets/stylesheets/calendar.tailwind.css

@@ -11,14 +11,60 @@
 }
 
 */
-body.calendar  {
-    height: 99vw;
-    overflow: hidden;
+body.calendar {
+  height: 100vh !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
 }
 
-toastui-calendar-time {
-    height: 99% !important;
+.toastui-calendar-time {
+  height: 100% !important;
 }
 
-.toastui-calendar-timegrid { height: 99%;  }
-.toastui-calendar-panel.toastui-calendar-time { overflow-y: inherit; }
+.toastui-calendar-timegrid {
+  height: 100% !important;
+}
+
+.toastui-calendar-panel.toastui-calendar-time {
+  overflow-y: inherit !important;
+}
+
+div[data-controller="main-calendar"] {
+  height: 100vh !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+#main-calendar {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+body.calendar main {
+  height: 100vh !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.w-full {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.flex.justify-between.items-center {
+  padding: 0.5rem 1rem !important;
+  margin-bottom: 0 !important;
+}
+
+.flex.justify-between.items-center-calendar {
+  padding: 0.5rem 1rem !important;
+  margin-bottom: 0 !important;
+  position: relative;
+}
+
+.px-5 {
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+}

app/assets/stylesheets/fullscreen_calendar.css

@@ -0,0 +1,113 @@
+/* Force fullscreen for calendar elements */
+.fc, /* FullCalendar main container */
+.calendar-container,
+.simple-calendar,
+.calendar, 
+[data-controller="calendar"],
+#calendar,
+.calendar-wrapper {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: auto !important;
+}
+
+/* Force table and grid elements to stretch */
+.fc-view-container,
+.fc-view,
+.fc-time-grid,
+.fc-slats,
+.fc-content-skeleton,
+table.calendar-table,
+.calendar-grid,
+.calendar-row,
+.time-slot-container {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* If there's a container around the calendar */
+body > div.container,
+main.container,
+div.container-fluid,
+.content-wrapper,
+#main-content {
+  width: 100% !important;
+  max-width: 100% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Fix for responsive issues */
+@media (min-width: 768px) {
+  .container, .container-md, .container-sm {
+    max-width: 100% !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .container, .container-lg, .container-md, .container-sm {
+    max-width: 100% !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container, .container-lg, .container-md, .container-sm, .container-xl {
+    max-width: 100% !important;
+  }
+}
+
+/* Reset container constraints */
+body.calendar {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+body.calendar main {
+  height: 100vh !important; /* Fix the 100vw typo in the layout */
+  width: 100vw !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  max-width: none !important;
+}
+
+/* Make the calendar container fill the space */
+.w-full, .min-w-full {
+  width: 100vw !important;
+  max-width: 100vw !important;
+}
+
+div[data-controller="main-calendar"] {
+  height: 100vh !important; /* Was 90vh */
+  width: 100vw !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+#main-calendar {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* Toast UI Calendar specific fixes */
+.toastui-calendar-layout, 
+.toastui-calendar-week-view,
+.toastui-calendar-panel,
+.toastui-calendar-timegrid-container {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* Remove unnecessary padding */
+.container, .mx-auto {
+  padding: 0 !important;
+  margin: 0 !important;
+  max-width: none !important;
+  width: 100vw !important;
+}
+
+.flex.justify-between {
+  padding: 0 1rem;
+}