kalendly 0.2.0 → 0.2.2

package/dist/index.umd.js

@@ -438,6 +438,7 @@ var Kalendly = (() => {
   };
 
   // src/web-components/CalendarElement.ts
+  var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
   var CalendarElement = class extends HTMLElement {
     constructor() {
       super(...arguments);
@@ -459,6 +460,13 @@ var Kalendly = (() => {
       this._categoryColors = null;
       this._renderEvent = null;
       this._renderNoEvents = null;
+      // Selection state (availability mode — range)
+      this._rangeStart = null;
+      this._rangeEnd = null;
+      this._timeRangeDate = null;
+      this._timeRangeStart = null;
+      this._timeRangeEnd = null;
+      this._timeRangeComplete = false;
     }
     get events() {
       return this._events;
@@ -487,6 +495,13 @@ var Kalendly = (() => {
       this._renderNoEvents = val;
       if (this.engine) this.render();
     }
+    get loading() {
+      return this.hasAttribute("loading");
+    }
+    set loading(val) {
+      if (val) this.setAttribute("loading", "");
+      else this.removeAttribute("loading");
+    }
     connectedCallback() {
       this.classList.add("kalendly-calendar");
       this.initEngine();
@@ -497,8 +512,20 @@ var Kalendly = (() => {
       this.classList.remove("kalendly-calendar");
       this.innerHTML = "";
     }
-    attributeChangedCallback(_name, oldVal, newVal) {
+    attributeChangedCallback(name, oldVal, newVal) {
       if (oldVal === newVal) return;
+      if (name === "loading") {
+        this.render();
+        return;
+      }
+      if (name === "selectable" && newVal === null) {
+        this._rangeStart = null;
+        this._rangeEnd = null;
+        this._timeRangeDate = null;
+        this._timeRangeStart = null;
+        this._timeRangeEnd = null;
+        this._timeRangeComplete = false;
+      }
       this.reinit();
     }
     get minYear() {
@@ -590,6 +617,8 @@ var Kalendly = (() => {
         root.style.setProperty("--calendar-today-outline", t.todayOutline);
       if (t.selectedBg)
         root.style.setProperty("--calendar-selected-bg", t.selectedBg);
+      if (t.headerBg) root.style.setProperty("--calendar-header-bg", t.headerBg);
+      if (t.popupBg) root.style.setProperty("--calendar-popup-bg", t.popupBg);
       if (t.eventIndicator)
         root.style.setProperty("--calendar-event-indicator", t.eventIndicator);
     }
@@ -600,6 +629,9 @@ var Kalendly = (() => {
       const title = this.getAttribute("title");
       const minYear = this.minYear;
       const maxYear = this.maxYear;
+      const availabilityMode = this.getAttribute("availability-mode");
+      const selectable = this.hasAttribute("selectable");
+      const isLoading = this.loading;
       const today = /* @__PURE__ */ new Date();
       const todayMonth = today.getMonth();
       const todayYear = today.getFullYear();
@@ -709,6 +741,37 @@ 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 isHourBooked = (hour) => events.some((event) => {
+          if (!event.startTime || !event.endTime) return true;
+          const [startH] = event.startTime.split(":").map(Number);
+          const [endH] = event.endTime.split(":").map(Number);
+          return hour >= startH && hour < endH;
+        });
+        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 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--booked" : "time-grid__slot--free",
+            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()}"` : "";
+          return `
+          <div class="${slotClasses}" ${slotAttrs}>
+            <span class="time-grid__label">${startTime}</span>
+            <span class="time-grid__status">${booked ? "Booked" : "Available"}</span>
+          </div>`;
+        });
+        return `<div class="time-grid">${slots.join("")}</div>`;
+      };
       const html = `
       ${title ? `
       <div class="page--title">
@@ -798,30 +861,52 @@ var Kalendly = (() => {
               </tr>
             </thead>
             <tbody data-calendar-body>
-              ${viewModel.calendarDates.map(
+              ${isLoading ? Array.from(
+        { length: 6 },
+        () => `<tr>${Array.from(
+          { length: 7 },
+          () => `<td class="calendar--skeleton" aria-hidden="true"></td>`
+        ).join("")}</tr>`
+      ).join("") : viewModel.calendarDates.map(
         (week) => `
-                <tr>
-                  ${week.map((calendarDate, dayIndex) => {
+                    <tr>
+                      ${week.map((calendarDate, dayIndex) => {
           const classes = getCellClasses(calendarDate);
+          if (availabilityMode && calendarDate.isCurrentMonth) {
+            classes.push(
+              calendarDate.hasEvents ? "availability--booked" : "availability--free"
+            );
+          }
+          if (availabilityMode === "day" && selectable && calendarDate.isCurrentMonth) {
+            const d = calendarDate.date;
+            if (this._rangeStart && isSameDay2(d, this._rangeStart))
+              classes.push("availability--range-start");
+            if (this._rangeEnd && isSameDay2(d, this._rangeEnd))
+              classes.push("availability--range-end");
+            if (this._rangeStart && this._rangeEnd) {
+              if (d > this._rangeStart && d < this._rangeEnd)
+                classes.push("availability--in-range");
+            }
+          }
           const dateString = calendarDate.date.toISOString();
           return `
-                      <td
-                        class="${classes.join(" ")}"
-                        data-date="${dateString}"
-                        data-day-index="${dayIndex}"
-                        data-clickable="true"
-                      >
-                        ${calendarDate.date.getDate()}
-                      </td>
-                    `;
+                          <td
+                            class="${classes.join(" ")}"
+                            data-date="${dateString}"
+                            data-day-index="${dayIndex}"
+                            data-clickable="true"
+                          >
+                            ${calendarDate.date.getDate()}
+                          </td>
+                        `;
         }).join("")}
-                </tr>
-              `
+                    </tr>
+                  `
       ).join("")}
             </tbody>
           </table>
 
-          ${viewModel.selectedDate ? `
+          ${!isLoading && availabilityMode !== "day" && viewModel.selectedDate ? `
             <div class="date-popup ${viewModel.popupPositionClass}">
               <div class="popup-header">
                 <h2>${viewModel.scheduleDay}</h2>
@@ -835,7 +920,7 @@ var Kalendly = (() => {
               ` : ""}
 
               <div class="events-container">
-                ${viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
+                ${availabilityMode === "time" ? renderTimeGrid(viewModel.tasks, viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
           ` : ""}
@@ -857,6 +942,59 @@ var Kalendly = (() => {
           e.stopPropagation();
           const date = new Date(cell.dataset.date);
           const dayIndex = parseInt(cell.dataset.dayIndex || "0");
+          const availMode = this.getAttribute("availability-mode");
+          const isSelectable = this.hasAttribute("selectable");
+          if (availMode === "day" && isSelectable) {
+            const isBooked = cell.classList.contains("availability--booked");
+            if (!isBooked) {
+              let startDate;
+              let endDate;
+              if (this._rangeEnd !== null) {
+                this._rangeStart = date;
+                this._rangeEnd = null;
+                startDate = date;
+                endDate = date;
+              } else if (this._rangeStart === null) {
+                this._rangeStart = date;
+                startDate = date;
+                endDate = date;
+              } else {
+                const [s, e2] = this._rangeStart <= date ? [this._rangeStart, date] : [date, this._rangeStart];
+                const cursor = new Date(s);
+                cursor.setDate(cursor.getDate() + 1);
+                let blocked = false;
+                while (cursor < e2) {
+                  if (this.engine.getEventsForDate(cursor).length > 0) {
+                    blocked = true;
+                    break;
+                  }
+                  cursor.setDate(cursor.getDate() + 1);
+                }
+                if (blocked) {
+                  this._rangeStart = date;
+                  this._rangeEnd = null;
+                } else {
+                  this._rangeStart = s;
+                  this._rangeEnd = e2;
+                }
+                startDate = this._rangeStart;
+                endDate = this._rangeEnd ?? this._rangeStart;
+              }
+              this.dispatchEvent(
+                new CustomEvent("cal-availability-select", {
+                  bubbles: true,
+                  composed: true,
+                  detail: { startDate, endDate }
+                })
+              );
+            }
+          }
+          if (availMode === "time") {
+            this._timeRangeDate = null;
+            this._timeRangeStart = null;
+            this._timeRangeEnd = null;
+            this._timeRangeComplete = false;
+          }
           this.engine.handleDateClick(date, dayIndex);
           this.dispatchEvent(
             new CustomEvent("cal-date-select", {
@@ -872,19 +1010,29 @@ var Kalendly = (() => {
         const action = actionEl.dataset.action;
         e.stopPropagation();
         switch (action) {
-          case "previous":
+          case "previous": {
+            const vm = this.engine.getViewModel();
+            const tMonth = vm.currentMonth === 0 ? 11 : vm.currentMonth - 1;
+            const tYear = vm.currentMonth === 0 ? vm.currentYear - 1 : vm.currentYear;
+            this.dispatchMonthChange(tYear, tMonth);
             this.actions.previous();
-            this.dispatchMonthChange();
             break;
-          case "next":
+          }
+          case "next": {
+            const vm = this.engine.getViewModel();
+            const tMonth = vm.currentMonth === 11 ? 0 : vm.currentMonth + 1;
+            const tYear = vm.currentMonth === 11 ? vm.currentYear + 1 : vm.currentYear;
+            this.dispatchMonthChange(tYear, tMonth);
             this.actions.next();
-            this.dispatchMonthChange();
             break;
-          case "today":
+          }
+          case "today": {
+            const t = /* @__PURE__ */ new Date();
+            this.dispatchMonthChange(t.getFullYear(), t.getMonth());
             this.actions.goToToday();
             this.pickerOpen = false;
-            this.dispatchMonthChange();
             break;
+          }
           case "toggle-picker":
             this.pickerOpen = !this.pickerOpen;
             if (this.pickerOpen) {
@@ -899,8 +1047,8 @@ var Kalendly = (() => {
               const newYear = vm.currentYear - 1;
               this.yearInput = String(newYear);
               this.updatePickerYear(newYear);
+              this.dispatchMonthChange(newYear, vm.currentMonth);
               this.actions.jump(newYear, vm.currentMonth);
-              this.dispatchMonthChange();
             }
             break;
           }
@@ -910,21 +1058,60 @@ var Kalendly = (() => {
               const newYear = vm.currentYear + 1;
               this.yearInput = String(newYear);
               this.updatePickerYear(newYear);
+              this.dispatchMonthChange(newYear, vm.currentMonth);
               this.actions.jump(newYear, vm.currentMonth);
-              this.dispatchMonthChange();
             }
             break;
           }
           case "select-month": {
             const month = parseInt(actionEl.dataset.month || "0", 10);
-            this.actions.jump(this.engine.getViewModel().currentYear, month);
+            const year = this.engine.getViewModel().currentYear;
+            this.dispatchMonthChange(year, month);
+            this.actions.jump(year, month);
             this.pickerOpen = false;
-            this.dispatchMonthChange();
             break;
           }
           case "close-popup":
+            this._timeRangeDate = null;
+            this._timeRangeStart = null;
+            this._timeRangeEnd = null;
+            this._timeRangeComplete = false;
             this.engine.clearSelection();
             break;
+          case "select-slot": {
+            const slotStart = actionEl.dataset.startTime;
+            const slotEnd = actionEl.dataset.endTime;
+            const slotDate = new Date(actionEl.dataset.date);
+            if (this._timeRangeComplete) {
+              this._timeRangeDate = slotDate;
+              this._timeRangeStart = slotStart;
+              this._timeRangeEnd = slotEnd;
+              this._timeRangeComplete = false;
+            } else if (this._timeRangeStart === null) {
+              this._timeRangeDate = slotDate;
+              this._timeRangeStart = slotStart;
+              this._timeRangeEnd = slotEnd;
+            } else {
+              const newStart = slotStart < this._timeRangeStart ? slotStart : this._timeRangeStart;
+              const newEnd = slotEnd > this._timeRangeEnd ? slotEnd : this._timeRangeEnd;
+              this._timeRangeStart = newStart;
+              this._timeRangeEnd = newEnd;
+              this._timeRangeComplete = true;
+            }
+            this.render();
+            this.dispatchEvent(
+              new CustomEvent("cal-availability-select", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  date: this._timeRangeDate,
+                  startTime: this._timeRangeStart,
+                  endTime: this._timeRangeEnd
+                }
+              })
+            );
+            break;
+          }
         }
       };
       this.delegatedInputHandler = (e) => {
@@ -949,8 +1136,8 @@ var Kalendly = (() => {
           target.value = this.yearInput;
           target.classList.remove("invalid");
         } else if (year !== vm.currentYear) {
+          this.dispatchMonthChange(year, vm.currentMonth);
           this.actions.jump(year, vm.currentMonth);
-          this.dispatchMonthChange();
         }
       };
       this.delegatedKeydownHandler = (e) => {
@@ -989,14 +1176,17 @@ var Kalendly = (() => {
       if (prevBtn) prevBtn.disabled = year <= this.minYear;
       if (nextBtn) nextBtn.disabled = year >= this.maxYear;
     }
-    dispatchMonthChange() {
+    dispatchMonthChange(year, month) {
       if (!this.engine) return;
       const vm = this.engine.getViewModel();
       this.dispatchEvent(
         new CustomEvent("cal-month-change", {
           bubbles: true,
           composed: true,
-          detail: { year: vm.currentYear, month: vm.currentMonth }
+          detail: {
+            year: year ?? vm.currentYear,
+            month: month ?? vm.currentMonth
+          }
         })
       );
     }
@@ -1011,7 +1201,10 @@ var Kalendly = (() => {
       return this.engine?.getViewModel().selectedDate ?? null;
     }
     goToDate(date) {
-      this.actions?.jump(date.getFullYear(), date.getMonth());
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      this.dispatchMonthChange(year, month);
+      this.actions?.jump(year, month);
     }
     getEngine() {
       if (!this.engine)
@@ -1025,7 +1218,10 @@ var Kalendly = (() => {
     "max-year",
     "week-starts-on",
     "title",
-    "use-short-month-names"
+    "use-short-month-names",
+    "availability-mode",
+    "selectable",
+    "loading"
   ];
   function defineCalendarElement(tagName = "kal-calendar") {
     if (typeof customElements !== "undefined" && !customElements.get(tagName)) {