kalendly 0.3.0 → 0.3.1

package/dist/index.js

@@ -43,12 +43,28 @@ function generateYears(minYear, maxYear) {
   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 hasEvents(events, date) {
   return getEventsForDate(events, date).length > 0;
@@ -192,7 +208,67 @@ function safeColor(value) {
   const trimmed = String(value).trim();
   return isValidHexColor(trimmed) || /^[a-z]+$/i.test(trimmed) ? trimmed : "#3b82f6";
 }
-var MONTHS, MONTHS_FULL, DAYS, DEFAULT_CATEGORY_COLORS, HTML_ESCAPES;
+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);
+    }
+  );
+}
+var MONTHS, MONTHS_FULL, DAYS, DEFAULT_CATEGORY_COLORS, HTML_ESCAPES, MINUTES_PER_DAY, DEFAULT_SLOT_DURATION;
 var init_utils = __esm({
   "src/core/utils.ts"() {
     "use strict";
@@ -248,6 +324,8 @@ var init_utils = __esm({
       '"': "&quot;",
       "'": "&#39;"
     };
+    MINUTES_PER_DAY = 1440;
+    DEFAULT_SLOT_DURATION = 60;
   }
 });
 
@@ -661,6 +739,29 @@ var init_CalendarElement = __esm({
         }
         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;
@@ -922,42 +1023,39 @@ var init_CalendarElement = __esm({
         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) => `
@@ -982,6 +1080,12 @@ var init_CalendarElement = __esm({
                         ${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
@@ -1134,7 +1238,7 @@ var init_CalendarElement = __esm({
               ` : ""}
 
               <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>
           ` : ""}
@@ -1295,6 +1399,20 @@ var init_CalendarElement = __esm({
               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;
@@ -1435,6 +1553,7 @@ var init_CalendarElement = __esm({
       "week-starts-on",
       "heading",
       "months",
+      "slot-duration",
       "title",
       "use-short-month-names",
       "availability-mode",
@@ -1486,6 +1605,7 @@ var init_CalendarElement = __esm({
       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;
     CalendarElement = _CalendarElement;
@@ -1499,12 +1619,18 @@ __export(web_components_exports, {
   CalendarEngine: () => CalendarEngine,
   DAYS: () => DAYS,
   DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
+  DEFAULT_SLOT_DURATION: () => DEFAULT_SLOT_DURATION,
+  MINUTES_PER_DAY: () => MINUTES_PER_DAY,
   MONTHS: () => MONTHS,
   MONTHS_FULL: () => MONTHS_FULL,
+  bookedSlots: () => bookedSlots,
   defineCalendarElement: () => defineCalendarElement,
   escapeHtml: () => escapeHtml,
+  eventCoversDate: () => eventCoversDate,
+  eventInterval: () => eventInterval,
   formatAttendees: () => formatAttendees,
   formatDateForDisplay: () => formatDateForDisplay,
+  formatMinutes: () => formatMinutes,
   formatTimeRange: () => formatTimeRange,
   generateCalendarDates: () => generateCalendarDates,
   generateYears: () => generateYears,
@@ -1518,7 +1644,9 @@ __export(web_components_exports, {
   isToday: () => isToday,
   isValidHexColor: () => isValidHexColor,
   mergeCategoryColors: () => mergeCategoryColors,
+  mergeIntervals: () => mergeIntervals,
   normalizeDate: () => normalizeDate,
+  parseTimeToMinutes: () => parseTimeToMinutes,
   safeColor: () => safeColor,
   safeUrl: () => safeUrl,
   slugifyToken: () => slugifyToken,
@@ -1540,12 +1668,18 @@ if (typeof customElements !== "undefined" && !customElements.get("kal-calendar")
   CalendarEngine,
   DAYS,
   DEFAULT_CATEGORY_COLORS,
+  DEFAULT_SLOT_DURATION,
+  MINUTES_PER_DAY,
   MONTHS,
   MONTHS_FULL,
+  bookedSlots,
   defineCalendarElement,
   escapeHtml,
+  eventCoversDate,
+  eventInterval,
   formatAttendees,
   formatDateForDisplay,
+  formatMinutes,
   formatTimeRange,
   generateCalendarDates,
   generateYears,
@@ -1559,7 +1693,9 @@ if (typeof customElements !== "undefined" && !customElements.get("kal-calendar")
   isToday,
   isValidHexColor,
   mergeCategoryColors,
+  mergeIntervals,
   normalizeDate,
+  parseTimeToMinutes,
   safeColor,
   safeUrl,
   slugifyToken,