pr360-questionnaire 2.3.6 → 2.3.7

package/css/components/_modal.scss

@@ -27,11 +27,12 @@
     }
 }
 
-// Ensure FullCalendar sticky headers stay below modals
+// FullCalendar sticky header z-index (below modals but above calendar content)
 .fc-col-header-cell,
 .fc-col-header,
-.fc-scrollgrid-sync-table {
-    z-index: 1 !important;
+.fc-scrollgrid-section-header {
+    z-index: 2 !important;
+    background: #fff;
 }
 
 // Style the onboarding email textarea to match other form fields but with better formatting

package/css/components/_tables.scss

@@ -358,10 +358,107 @@ table {
 // --- Schedule view specific styles ---
 .schedule-grid {
   display: grid;
-  grid-template-columns: 18% 1fr; // notes narrower
+  grid-template-columns: 15% 1fr; // notes narrower to give calendar more space
   grid-gap: 0; // no gap between notes and calendar
-  height: 75vh;
-  min-height: 0;
+  height: 80vh;
+  min-height: 600px;
+}
+
+// --- FullCalendar customizations ---
+#full-calendar {
+  height: 100%;
+  min-height: 600px;
+}
+
+// Make day columns wider with minimum width
+.fc .fc-timegrid-col {
+  min-width: 120px;
+}
+
+// Wider day header cells
+.fc .fc-col-header-cell {
+  min-width: 120px;
+  padding: 12px 8px;
+}
+
+// Taller slot rows for better readability
+.fc .fc-timegrid-slot {
+  height: 2.5em;
+  min-height: 40px;
+}
+
+// Make slot labels more readable
+.fc .fc-timegrid-slot-label {
+  font-size: 13px;
+  font-weight: 500;
+  vertical-align: top;
+  padding-top: 4px;
+}
+
+// Better event styling in time grid
+.fc .fc-timegrid-event {
+  border-radius: 4px;
+  font-size: 12px;
+  padding: 4px 6px;
+}
+
+.fc .fc-timegrid-event .fc-event-main {
+  padding: 2px 4px;
+}
+
+.fc .fc-timegrid-event .fc-event-time {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.fc .fc-timegrid-event .fc-event-title {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+// Day header styling
+.fc .fc-col-header-cell-cushion {
+  font-weight: 600;
+  font-size: 14px;
+  padding: 8px 4px;
+}
+
+// Now indicator styling
+.fc .fc-timegrid-now-indicator-line {
+  border-color: #e74c3c;
+  border-width: 2px;
+}
+
+.fc .fc-timegrid-now-indicator-arrow {
+  border-color: #e74c3c;
+}
+
+// Sticky header support - ensure header stays visible when scrolling
+.fc .fc-col-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background: #fff;
+}
+
+.fc .fc-scrollgrid-section-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background: #fff;
+}
+
+.fc .fc-scrollgrid-section-header > td {
+  background: #fff;
+}
+
+// Ensure the calendar container allows internal scrolling
+.schedule-grid .table-container {
+  overflow: hidden;
+}
+
+.schedule-grid pr360-calendar {
+  overflow: hidden;
 }
 
 .schedule-notes {
@@ -390,14 +487,11 @@ table {
   min-height: 0;
   height: 100%;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
+  display: block;
+  overflow: hidden;
 }
 
 .schedule-grid pr360-calendar > * {
-  flex: 1 1 auto;
-  min-height: 0;
   height: 100%;
 }
 

package/js/calendar.ts

@@ -44,8 +44,8 @@ export class CalendarElement extends LitElement {
       schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
       plugins: [resourceTimelinePlugin, momentPlugin, dayGridPlugin, timeGridPlugin],
       slotMinWidth: 70,
-      slotMinTime: "08:00",
-      slotMaxTime: "20:00",
+      slotDuration: '00:30:00',
+      slotLabelInterval: '01:00',
       stickyHeaderDates: true,
       initialView: 'timeGridWeek',
       headerToolbar: {
@@ -54,6 +54,13 @@ export class CalendarElement extends LitElement {
         right: 'dayGridMonth, timeGridWeek, timeGridDay'
       },
       titleFormat: "dddd, MMM D, YYYY",
+      height: '100%',
+      expandRows: true,
+      scrollTime: '06:00:00',
+      nowIndicator: false,
+      dayHeaderFormat: { weekday: 'short', month: 'numeric', day: 'numeric' },
+      slotLabelFormat: { hour: 'numeric', minute: '2-digit', meridiem: 'short' },
+      eventTimeFormat: { hour: 'numeric', minute: '2-digit', meridiem: 'short' },
       events: JSON.parse(this.events),
       eventClick: function (info) {
         info.el.dispatchEvent(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pr360-questionnaire",
   "description": "An element to render a questionnaire for PatientReach 360.",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",