kalendly 0.3.0 → 0.3.1

package/dist/index.umd.js

@@ -78,12 +78,28 @@ var Kalendly = (() => {
     const max = maxYear ?? currentYear + 10;
     return Array.from({ length: max - min + 1 }, (_, i) => min + i);
   }
+  function eventCoversDate(event, date) {
+    const start = normalizeDate(new Date(event.date)).getTime();
+    const target = normalizeDate(date).getTime();
+    if (Number.isNaN(start)) return false;
+    if (event.endDate === void 0 || event.endDate === null) {
+      return start === target;
+    }
+    const end = normalizeDate(new Date(event.endDate)).getTime();
+    if (Number.isNaN(end)) {
+      throw new Error(
+        `<kal-calendar> event ${event.id} has an unreadable endDate: ${String(event.endDate)}.`
+      );
+    }
+    if (end < start) {
+      throw new Error(
+        `<kal-calendar> event ${event.id} has an endDate before its date: ${String(event.endDate)} < ${String(event.date)}.`
+      );
+    }
+    return target >= start && target <= end;
+  }
   function getEventsForDate(events, date) {
-    const normalizedTargetDate = normalizeDate(date);
-    return events.filter((event) => {
-      const eventDate = normalizeDate(new Date(event.date));
-      return eventDate.getTime() === normalizedTargetDate.getTime();
-    });
+    return events.filter((event) => eventCoversDate(event, date));
   }
   function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
     const firstDay = new Date(year, month, 1);
@@ -222,6 +238,68 @@ var Kalendly = (() => {
     const trimmed = String(value).trim();
     return isValidHexColor(trimmed) || /^[a-z]+$/i.test(trimmed) ? trimmed : "#3b82f6";
   }
+  var MINUTES_PER_DAY = 1440;
+  var DEFAULT_SLOT_DURATION = 60;
+  function parseTimeToMinutes(time) {
+    if (typeof time !== "string") return null;
+    const match = /^(\d{1,2}):(\d{2})$/.exec(time.trim());
+    if (!match) return null;
+    const hours = Number(match[1]);
+    const mins = Number(match[2]);
+    if (hours > 24 || mins > 59 || hours === 24 && mins > 0) return null;
+    return hours * 60 + mins;
+  }
+  function formatMinutes(total) {
+    const hours = Math.floor(total / 60);
+    const mins = total % 60;
+    return `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
+  }
+  function eventInterval(event, slotDuration, onDay) {
+    const day = normalizeDate(onDay).getTime();
+    if (Number.isNaN(day)) return null;
+    const base = day / 6e4;
+    const wholeDay = [base, base + MINUTES_PER_DAY];
+    if (event.allDay || !event.startTime) return wholeDay;
+    const from = parseTimeToMinutes(event.startTime);
+    if (from === null) return wholeDay;
+    if (event.endTime === void 0 || event.endTime === null) {
+      return [base + from, base + from + slotDuration];
+    }
+    const to = parseTimeToMinutes(event.endTime);
+    if (to === null) return wholeDay;
+    return [base + from, base + (to <= from ? to + MINUTES_PER_DAY : to)];
+  }
+  function mergeIntervals(intervals) {
+    const sorted = [...intervals].sort((a, b) => a[0] - b[0]);
+    return sorted.reduce((merged, [start, end]) => {
+      const last = merged[merged.length - 1];
+      if (last && start <= last[1]) last[1] = Math.max(last[1], end);
+      else merged.push([start, end]);
+      return merged;
+    }, []);
+  }
+  function bookedSlots(events, date, slotDuration = DEFAULT_SLOT_DURATION) {
+    const base = normalizeDate(date).getTime() / 6e4;
+    const previousDay = new Date(date);
+    previousDay.setDate(previousDay.getDate() - 1);
+    const intervals = [];
+    for (const event of new Set(events)) {
+      for (const day of [previousDay, date]) {
+        if (!eventCoversDate(event, day)) continue;
+        const interval = eventInterval(event, slotDuration, day);
+        if (interval) intervals.push(interval);
+      }
+    }
+    const merged = mergeIntervals(intervals);
+    return Array.from(
+      { length: Math.floor(MINUTES_PER_DAY / slotDuration) },
+      (_, index) => {
+        const start = base + index * slotDuration;
+        const end = start + slotDuration;
+        return merged.some(([from, to]) => start < to && end > from);
+      }
+    );
+  }
 
   // src/core/calendar-engine.ts
   var CalendarEngine = class {
@@ -600,6 +678,29 @@ var Kalendly = (() => {
       }
       return title;
     }
+    get slotDuration() {
+      const raw = this.getAttribute("slot-duration");
+      if (raw === null) return DEFAULT_SLOT_DURATION;
+      const minutes = Number(raw);
+      if (Number.isInteger(minutes) && minutes > 0 && MINUTES_PER_DAY % minutes === 0) {
+        return minutes;
+      }
+      console.warn(
+        `<kal-calendar> slot-duration="${raw}" must be a positive whole number of minutes that divides ${MINUTES_PER_DAY} \u2014 falling back to ${DEFAULT_SLOT_DURATION}.`
+      );
+      return DEFAULT_SLOT_DURATION;
+    }
+    warnMissingEndTime(events) {
+      for (const event of events) {
+        if (!event.startTime || event.endTime) continue;
+        const key = String(event.id);
+        if (_CalendarElement.warnedMissingEnd.has(key)) continue;
+        _CalendarElement.warnedMissingEnd.add(key);
+        console.warn(
+          `<kal-calendar> event ${key} has startTime but no endTime \u2014 occupying one ${this.slotDuration}-minute slot. Send an endTime to say how long it runs.`
+        );
+      }
+    }
     get monthCount() {
       const requested = Number(this.getAttribute("months") ?? 1);
       if (!Number.isInteger(requested) || requested < 1) return 1;
@@ -861,42 +962,39 @@ var Kalendly = (() => {
       const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
       const renderEvent = this._renderEvent || defaultRenderEvent;
       const renderNoEvents = this._renderNoEvents || defaultRenderNoEvents;
-      const renderTimeGrid = (events, date) => {
-        const startHour = (time) => {
-          if (typeof time !== "string") return null;
-          const hour = Number(time.split(":")[0]);
-          return Number.isInteger(hour) && hour >= 0 && hour <= 24 ? hour : null;
-        };
-        const isHourBooked = (hour) => events.some((event) => {
-          if (!event.startTime) return true;
-          const from = startHour(event.startTime);
-          const to = event.endTime ? startHour(event.endTime) : 24;
-          if (from === null || to === null) return true;
-          return hour >= from && hour < to;
-        });
-        const slots = Array.from({ length: 24 }, (_, hour) => {
-          const startTime = `${String(hour).padStart(2, "0")}:00`;
-          const endTime = `${String(hour + 1).padStart(2, "0")}:00`;
-          const booked = isHourBooked(hour);
-          const inTimeRange = !booked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
+      const renderTimeGrid = (date) => {
+        const slotDuration = this.slotDuration;
+        const previousDay = new Date(date);
+        previousDay.setDate(previousDay.getDate() - 1);
+        const events = [
+          ...this.engine.getEventsForDate(previousDay),
+          ...this.engine.getEventsForDate(date)
+        ];
+        this.warnMissingEndTime(events);
+        const booked = bookedSlots(events, date, slotDuration);
+        const slots = booked.map((isBooked, index) => {
+          const startTime = formatMinutes(index * slotDuration);
+          const endTime = formatMinutes((index + 1) * slotDuration);
+          const inTimeRange = !isBooked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
           const isRangeStart = inTimeRange && startTime === this._timeRangeStart;
           const isRangeEnd = inTimeRange && endTime === this._timeRangeEnd;
           const isInRange = inTimeRange && !isRangeStart && !isRangeEnd;
           const slotClasses = [
             "time-grid-slot",
-            booked ? "time-grid-slot-blocked" : "time-grid-slot-open",
+            isBooked ? "time-grid-slot-blocked" : "time-grid-slot-open",
             isRangeStart ? "time-grid-slot-range-start" : "",
             isRangeEnd ? "time-grid-slot-range-end" : "",
             isInRange ? "time-grid-slot-in-range" : ""
           ].filter(Boolean).join(" ");
-          const slotAttrs = !booked && selectable ? `data-action="select-slot" data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}"` : "";
+          const slotAttrs = `data-action="select-slot" data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}" data-booked="${isBooked}"`;
           return `
           <div class="${slotClasses}" ${slotAttrs}>
             <span class="time-grid-label">${startTime}</span>
-            <span class="time-grid-status">${booked ? "Booked" : "Available"}</span>
+            <span class="time-grid-status">${isBooked ? "Booked" : "Available"}</span>
           </div>`;
         });
-        return `<div class="time-grid">${slots.join("")}</div>`;
+        const gridClasses = selectable ? "time-grid time-grid-selectable" : "time-grid";
+        return `<div class="${gridClasses}">${slots.join("")}</div>`;
       };
       const multiMonth = viewModel.panes.length > 1;
       const renderPane = (pane) => `
@@ -921,6 +1019,12 @@ var Kalendly = (() => {
                         ${week.map((calendarDate, dayIndex) => {
           const classes = getCellClasses(calendarDate);
           const cellAttrs = [];
+          if (viewModel.selectedDate && isSameDay2(
+            calendarDate.date,
+            viewModel.selectedDate
+          )) {
+            classes.push("calendar-cell-selected");
+          }
           if (availabilityMode && calendarDate.isCurrentMonth) {
             const bucket = this.resolveBucket(
               calendarDate.date
@@ -1073,7 +1177,7 @@ var Kalendly = (() => {
               ` : ""}
 
               <div class="events-container">
-                ${availabilityMode === "time" ? renderTimeGrid(viewModel.tasks, viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
+                ${availabilityMode === "time" ? renderTimeGrid(viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
           ` : ""}
@@ -1234,6 +1338,20 @@ var Kalendly = (() => {
             const slotStart = actionEl.dataset.startTime;
             const slotEnd = actionEl.dataset.endTime;
             const slotDate = new Date(actionEl.dataset.date);
+            const slotBooked = actionEl.dataset.booked === "true";
+            this.dispatchEvent(
+              new CustomEvent("cal-slot-select", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  date: slotDate,
+                  startTime: slotStart,
+                  endTime: slotEnd,
+                  booked: slotBooked
+                }
+              })
+            );
+            if (slotBooked || !this.hasAttribute("selectable")) break;
             if (this._timeRangeComplete) {
               this._timeRangeDate = slotDate;
               this._timeRangeStart = slotStart;
@@ -1374,6 +1492,7 @@ var Kalendly = (() => {
     "week-starts-on",
     "heading",
     "months",
+    "slot-duration",
     "title",
     "use-short-month-names",
     "availability-mode",
@@ -1425,6 +1544,7 @@ var Kalendly = (() => {
     badgeTentativeBg: "--calendar-badge-tentative-bg",
     badgeTentativeText: "--calendar-badge-tentative-text"
   };
+  _CalendarElement.warnedMissingEnd = /* @__PURE__ */ new Set();
   _CalendarElement.BUILT_IN_BUCKETS = ["blocked", "conditional", "open"];
   _CalendarElement.titleDeprecationWarned = false;
   var CalendarElement = _CalendarElement;