Update event titles and dynamic calendar time range

Change calendar event title format to "FirstName/Jeremy: MeetingType".
Store meetingTypeName in booking records for reschedule support.
Dynamically adjust calendar visible time range to match available
slot boundaries (default 9am-5pm when no slots visible).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jeremymanning

backend/Booking.gs

@@ -6,8 +6,8 @@
 var BookingStore = (function () {
   var HEADERS = [
     'token', 'tokenExpiresAt', 'eventId', 'status', 'meetingTypeId',
-    'startTime', 'endTime', 'firstName', 'lastName', 'email',
-    'format', 'location', 'purpose', 'notes', 'createdAt',
+    'meetingTypeName', 'startTime', 'endTime', 'firstName', 'lastName',
+    'email', 'format', 'location', 'purpose', 'notes', 'createdAt',
     'cancelledAt', 'rescheduledTo',
   ];
 

backend/Code.gs

@@ -157,7 +157,9 @@ function handleCreateBooking(data) {
     data.token = token;
 
     // Create calendar event
-    var eventTitle = data.meetingTypeName + ' — ' + data.firstName + ' ' + data.lastName;
+    var ownerName = Config.get('OWNER_NAME') || 'Jeremy';
+    var ownerFirst = ownerName.split(' ')[0];
+    var eventTitle = data.firstName + '/' + ownerFirst + ': ' + data.meetingTypeName;
     var description = buildEventDescription(data);
     var calendar = CalendarApp.getCalendarById(Config.get('CALENDAR_ID'));
     var event = calendar.createEvent(eventTitle, startDate, endDate, {
@@ -172,6 +174,7 @@ function handleCreateBooking(data) {
       eventId: event.getId(),
       status: 'confirmed',
       meetingTypeId: data.meetingTypeId,
+      meetingTypeName: data.meetingTypeName,
       startTime: data.start,
       endTime: data.end,
       firstName: data.firstName,
@@ -297,7 +300,7 @@ function handleRescheduleBooking(data) {
   // Create new booking with reschedule
   var newBookingData = {
     meetingTypeId: oldBooking.meetingTypeId,
-    meetingTypeName: oldBooking.meetingTypeId, // Will be resolved from config
+    meetingTypeName: oldBooking.meetingTypeName || oldBooking.meetingTypeId,
     start: data.newStart,
     end: data.newEnd,
     firstName: oldBooking.firstName,
@@ -352,7 +355,9 @@ function handleRescheduleBooking(data) {
       purpose: oldBooking.purpose,
       notes: oldBooking.notes,
     };
-    var eventTitle = oldBooking.meetingTypeId + ' — ' + oldBooking.firstName + ' ' + oldBooking.lastName;
+    var ownerName = Config.get('OWNER_NAME') || 'Jeremy';
+    var ownerFirst = ownerName.split(' ')[0];
+    var eventTitle = oldBooking.firstName + '/' + ownerFirst + ': ' + oldBooking.meetingTypeName;
     var description = buildEventDescription(descData);
     var calendar = CalendarApp.getCalendarById(Config.get('CALENDAR_ID'));
     var newEvent = calendar.createEvent(eventTitle, newStart, newEnd, {
@@ -368,6 +373,7 @@ function handleRescheduleBooking(data) {
       eventId: newEvent.getId(),
       status: 'confirmed',
       meetingTypeId: oldBooking.meetingTypeId,
+      meetingTypeName: oldBooking.meetingTypeName || oldBooking.meetingTypeId,
       startTime: data.newStart,
       endTime: data.newEnd,
       firstName: oldBooking.firstName,

js/calendar.js

@@ -1,12 +1,15 @@
 /**
  * CalendarUI — FullCalendar wrapper for displaying available time slots.
  * Fetches slots from the backend and renders them as clickable events.
+ * Dynamically adjusts visible time range based on available slots.
  */
 
 var CalendarUI = (function () {
   var _calendar = null;
   var _durationMinutes = 15;
   var _onSlotSelected = null;
+  var DEFAULT_MIN_TIME = '09:00:00';
+  var DEFAULT_MAX_TIME = '17:00:00';
 
   function init(durationMinutes, onSlotSelected) {
     _durationMinutes = durationMinutes;
@@ -23,8 +26,8 @@ var CalendarUI = (function () {
         right: 'timeGridWeek,timeGridDay',
       },
       allDaySlot: false,
-      slotMinTime: '09:00:00',
-      slotMaxTime: '17:00:00',
+      slotMinTime: DEFAULT_MIN_TIME,
+      slotMaxTime: DEFAULT_MAX_TIME,
       slotDuration: minutesToSlotDuration(durationMinutes),
       timeZone: 'local',
       height: 'auto',
@@ -89,8 +92,14 @@ var CalendarUI = (function () {
 
         if (events.length === 0) {
           showNoSlotsMessage();
+          // Reset to default 9-5 range when no slots
+          if (_calendar) {
+            _calendar.setOption('slotMinTime', DEFAULT_MIN_TIME);
+            _calendar.setOption('slotMaxTime', DEFAULT_MAX_TIME);
+          }
         } else {
           hideNoSlotsMessage();
+          adjustTimeRange(events);
         }
 
         successCallback(events);
@@ -101,6 +110,48 @@ var CalendarUI = (function () {
       });
   }
 
+  /**
+   * Adjust the visible time range to span from the earliest slot start
+   * to the latest slot end in the current view, with no extra padding.
+   */
+  function adjustTimeRange(events) {
+    if (!_calendar || events.length === 0) return;
+
+    var minHour = 23;
+    var minMinute = 59;
+    var maxHour = 0;
+    var maxMinute = 0;
+
+    events.forEach(function (evt) {
+      var start = new Date(evt.start);
+      var end = new Date(evt.end);
+
+      var startH = start.getHours();
+      var startM = start.getMinutes();
+      var endH = end.getHours();
+      var endM = end.getMinutes();
+
+      if (startH < minHour || (startH === minHour && startM < minMinute)) {
+        minHour = startH;
+        minMinute = startM;
+      }
+      if (endH > maxHour || (endH === maxHour && endM > maxMinute)) {
+        maxHour = endH;
+        maxMinute = endM;
+      }
+    });
+
+    var minTime = padTime(minHour) + ':' + padTime(minMinute) + ':00';
+    var maxTime = padTime(maxHour) + ':' + padTime(maxMinute) + ':00';
+
+    _calendar.setOption('slotMinTime', minTime);
+    _calendar.setOption('slotMaxTime', maxTime);
+  }
+
+  function padTime(n) {
+    return n < 10 ? '0' + n : String(n);
+  }
+
   function showNoSlotsMessage() {
     var container = document.getElementById('calendar-container');
     var existing = container.querySelector('.no-slots-message');