@dialiq/calendar-component 1.0.0 → 1.0.1

package/dist/index.js

@@ -527,6 +527,31 @@ function startOfISOWeekYear(date) {
   return startOfISOWeek(fourthOfJanuary);
 }
 
+/**
+ * @name addWeeks
+ * @category Week Helpers
+ * @summary Add the specified number of weeks to the given date.
+ *
+ * @description
+ * Add the specified number of week to the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param amount - The amount of weeks to be added.
+ *
+ * @returns The new date with the weeks added
+ *
+ * @example
+ * // Add 4 weeks to 1 September 2014:
+ * const result = addWeeks(new Date(2014, 8, 1), 4)
+ * //=> Mon Sep 29 2014 00:00:00
+ */
+function addWeeks(date, amount) {
+  const days = amount * 7;
+  return addDays(date, days);
+}
+
 /**
  * @name isSameDay
  * @category Day Helpers
@@ -645,6 +670,32 @@ function isValid(date) {
   return !isNaN(Number(_date));
 }
 
+/**
+ * @name endOfDay
+ * @category Day Helpers
+ * @summary Return the end of a day for the given date.
+ *
+ * @description
+ * Return the end of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The original date
+ *
+ * @returns The end of a day
+ *
+ * @example
+ * // The end of a day for 2 September 2014 11:55:00:
+ * const result = endOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 23:59:59.999
+ */
+function endOfDay(date) {
+  const _date = toDate(date);
+  _date.setHours(23, 59, 59, 999);
+  return _date;
+}
+
 /**
  * @name endOfMonth
  * @category Month Helpers
@@ -3376,6 +3427,30 @@ function subMonths(date, amount) {
   return addMonths(date, -amount);
 }
 
+/**
+ * @name subWeeks
+ * @category Week Helpers
+ * @summary Subtract the specified number of weeks from the given date.
+ *
+ * @description
+ * Subtract the specified number of weeks from the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param amount - The amount of weeks to be subtracted.
+ *
+ * @returns The new date with the weeks subtracted
+ *
+ * @example
+ * // Subtract 4 weeks from 1 September 2014:
+ * const result = subWeeks(new Date(2014, 8, 1), 4)
+ * //=> Mon Aug 04 2014 00:00:00
+ */
+function subWeeks(date, amount) {
+  return addWeeks(date, -amount);
+}
+
 const getBaseUrl = () => {
     if (typeof process !== 'undefined' && process.env && process.env.REACT_APP_CALENDAR_API_URL) {
         return process.env.REACT_APP_CALENDAR_API_URL;
@@ -3542,11 +3617,12 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
                     React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
 };
 
-var css_248z = ".calendar-container {\r\n  width: 100%;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n  background: #ffffff;\r\n  border-radius: 8px;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n  overflow: hidden;\r\n}\r\n\r\n.calendar-header {\r\n  background: #f8f9fa;\r\n  padding: 20px;\r\n  border-bottom: 1px solid #e9ecef;\r\n}\r\n\r\n.calendar-title-section {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.calendar-title {\r\n  margin: 0;\r\n  font-size: 24px;\r\n  font-weight: 600;\r\n  color: #212529;\r\n}\r\n\r\n.calendar-navigation {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n\r\n.calendar-current-month {\r\n  font-size: 18px;\r\n  font-weight: 500;\r\n  color: #495057;\r\n  margin-left: 12px;\r\n}\r\n\r\n.calendar-btn {\r\n  padding: 8px 16px;\r\n  border: 1px solid #dee2e6;\r\n  background: #ffffff;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  color: #495057;\r\n  transition: all 0.2s;\r\n}\r\n\r\n.calendar-btn:hover {\r\n  background: #e9ecef;\r\n  border-color: #adb5bd;\r\n}\r\n\r\n.calendar-btn-create {\r\n  background: #0d6efd;\r\n  color: #ffffff;\r\n  border-color: #0d6efd;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n  background: #0b5ed7;\r\n  border-color: #0a58ca;\r\n}\r\n\r\n.calendar-days-row {\r\n  display: grid;\r\n  grid-template-columns: repeat(7, 1fr);\r\n  background: #f8f9fa;\r\n  border-bottom: 2px solid #dee2e6;\r\n}\r\n\r\n.calendar-day-header {\r\n  padding: 12px;\r\n  text-align: center;\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  color: #6c757d;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.calendar-body {\r\n  background: #ffffff;\r\n}\r\n\r\n.calendar-row {\r\n  display: grid;\r\n  grid-template-columns: repeat(7, 1fr);\r\n  border-bottom: 1px solid #e9ecef;\r\n}\r\n\r\n.calendar-row:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n.calendar-cell {\r\n  min-height: 120px;\r\n  padding: 8px;\r\n  border-right: 1px solid #e9ecef;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n  position: relative;\r\n}\r\n\r\n.calendar-cell:last-child {\r\n  border-right: none;\r\n}\r\n\r\n.calendar-cell:hover {\r\n  background: #f8f9fa;\r\n}\r\n\r\n.calendar-cell-disabled {\r\n  background: #f8f9fa;\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-disabled:hover {\r\n  background: #f8f9fa;\r\n}\r\n\r\n.calendar-cell-today {\r\n  background: #e7f5ff;\r\n}\r\n\r\n.calendar-cell-today .calendar-cell-number {\r\n  background: #0d6efd;\r\n  color: #ffffff;\r\n}\r\n\r\n.calendar-cell-number {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  border-radius: 50%;\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  color: #212529;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n  margin-top: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n  background: #0d6efd;\r\n  color: #ffffff;\r\n  padding: 4px 8px;\r\n  margin-bottom: 4px;\r\n  border-radius: 4px;\r\n  font-size: 12px;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n  display: flex;\r\n  gap: 4px;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.calendar-booking:hover {\r\n  background: #0b5ed7;\r\n}\r\n\r\n.calendar-booking-time {\r\n  font-weight: 600;\r\n}\r\n\r\n.calendar-booking-title {\r\n  flex: 1;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-booking-more {\r\n  color: #6c757d;\r\n  font-size: 11px;\r\n  padding: 2px 4px;\r\n  font-weight: 500;\r\n}\r\n\r\n.calendar-error {\r\n  background: #f8d7da;\r\n  color: #842029;\r\n  padding: 12px 20px;\r\n  border-bottom: 1px solid #f5c2c7;\r\n}\r\n\r\n.calendar-loading {\r\n  background: #cff4fc;\r\n  color: #055160;\r\n  padding: 12px 20px;\r\n  border-bottom: 1px solid #b6effb;\r\n  text-align: center;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .calendar-title-section {\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 12px;\r\n  }\r\n\r\n  .calendar-cell {\r\n    min-height: 80px;\r\n    padding: 4px;\r\n  }\r\n\r\n  .calendar-cell-number {\r\n    width: 24px;\r\n    height: 24px;\r\n    font-size: 12px;\r\n  }\r\n\r\n  .calendar-booking {\r\n    font-size: 10px;\r\n    padding: 2px 4px;\r\n  }\r\n}\r\n";
+var css_248z = ".calendar-container {\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  background: #ffffff;\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.calendar-header {\n  background: #f8f9fa;\n  padding: 20px;\n  border-bottom: 1px solid #e9ecef;\n}\n\n.calendar-title-section {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.calendar-title {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.calendar-view-toggle {\n  display: flex;\n  gap: 4px;\n  background: #e9ecef;\n  padding: 4px;\n  border-radius: 6px;\n}\n\n.calendar-btn-view {\n  padding: 6px 14px;\n  border: none;\n  background: transparent;\n  font-size: 13px;\n}\n\n.calendar-btn-view.active {\n  background: #ffffff;\n  color: #0d6efd;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.calendar-btn-view:hover {\n  background: #ffffff;\n  border-color: transparent;\n}\n\n.calendar-navigation {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.calendar-current-month {\n  font-size: 18px;\n  font-weight: 500;\n  color: #495057;\n  margin-left: 12px;\n}\n\n.calendar-btn {\n  padding: 8px 16px;\n  border: 1px solid #dee2e6;\n  background: #ffffff;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  transition: all 0.2s;\n}\n\n.calendar-btn:hover {\n  background: #e9ecef;\n  border-color: #adb5bd;\n}\n\n.calendar-btn-create {\n  background: #0d6efd;\n  color: #ffffff;\n  border-color: #0d6efd;\n}\n\n.calendar-btn-create:hover {\n  background: #0b5ed7;\n  border-color: #0a58ca;\n}\n\n.calendar-days-row {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  background: #f8f9fa;\n  border-bottom: 2px solid #dee2e6;\n}\n\n.calendar-day-header {\n  padding: 12px;\n  text-align: center;\n  font-weight: 600;\n  font-size: 14px;\n  color: #6c757d;\n  text-transform: uppercase;\n}\n\n.calendar-body {\n  background: #ffffff;\n}\n\n.calendar-row {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  border-bottom: 1px solid #e9ecef;\n}\n\n.calendar-row:last-child {\n  border-bottom: none;\n}\n\n.calendar-cell {\n  min-height: 120px;\n  padding: 8px;\n  border-right: 1px solid #e9ecef;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  position: relative;\n}\n\n.calendar-cell:last-child {\n  border-right: none;\n}\n\n.calendar-cell:hover {\n  background: #f8f9fa;\n}\n\n.calendar-cell-disabled {\n  background: #f8f9fa;\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.calendar-cell-disabled:hover {\n  background: #f8f9fa;\n}\n\n.calendar-cell-today {\n  background: #e7f5ff;\n}\n\n.calendar-cell-today .calendar-cell-number {\n  background: #0d6efd;\n  color: #ffffff;\n}\n\n.calendar-cell-number {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  font-weight: 600;\n  font-size: 14px;\n  color: #212529;\n  margin-bottom: 4px;\n}\n\n.calendar-cell-bookings {\n  margin-top: 4px;\n}\n\n.calendar-booking {\n  background: #0d6efd;\n  color: #ffffff;\n  padding: 4px 8px;\n  margin-bottom: 4px;\n  border-radius: 4px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  display: flex;\n  gap: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.calendar-booking:hover {\n  background: #0b5ed7;\n}\n\n.calendar-booking-time {\n  font-weight: 600;\n}\n\n.calendar-booking-title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.calendar-booking-more {\n  color: #6c757d;\n  font-size: 11px;\n  padding: 2px 4px;\n  font-weight: 500;\n}\n\n.calendar-error {\n  background: #f8d7da;\n  color: #842029;\n  padding: 12px 20px;\n  border-bottom: 1px solid #f5c2c7;\n}\n\n.calendar-loading {\n  background: #cff4fc;\n  color: #055160;\n  padding: 12px 20px;\n  border-bottom: 1px solid #b6effb;\n  text-align: center;\n}\n\n.calendar-week-view {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 1px;\n  background: #e9ecef;\n  padding: 1px;\n}\n\n.calendar-week-day {\n  background: #ffffff;\n  min-height: 400px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  display: flex;\n  flex-direction: column;\n}\n\n.calendar-week-day:hover {\n  background: #f8f9fa;\n}\n\n.calendar-week-day-header {\n  padding: 12px;\n  border-bottom: 2px solid #e9ecef;\n  text-align: center;\n  background: #f8f9fa;\n}\n\n.calendar-week-day-name {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  margin-bottom: 4px;\n}\n\n.calendar-week-day-number {\n  font-size: 20px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.calendar-week-day.calendar-cell-today .calendar-week-day-header {\n  background: #e7f5ff;\n}\n\n.calendar-week-day.calendar-cell-today .calendar-week-day-number {\n  color: #0d6efd;\n}\n\n.calendar-week-day-bookings {\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n}\n\n.calendar-week-booking {\n  margin-bottom: 6px;\n  display: block;\n}\n\n.calendar-day-view {\n  padding: 20px;\n  background: #ffffff;\n}\n\n.calendar-day-container {\n  max-width: 800px;\n  margin: 0 auto;\n  background: #ffffff;\n  border: 1px solid #e9ecef;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.calendar-day-container.calendar-cell-today {\n  border-color: #0d6efd;\n  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);\n}\n\n.calendar-day-header {\n  background: #f8f9fa;\n  padding: 20px;\n  border-bottom: 2px solid #e9ecef;\n  text-align: center;\n}\n\n.calendar-day-name {\n  font-size: 16px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  margin-bottom: 8px;\n}\n\n.calendar-day-date {\n  font-size: 24px;\n  font-weight: 700;\n  color: #212529;\n}\n\n.calendar-day-bookings {\n  padding: 20px;\n  min-height: 300px;\n}\n\n.calendar-no-bookings {\n  text-align: center;\n  color: #6c757d;\n  padding: 60px 20px;\n  font-size: 16px;\n}\n\n.calendar-day-booking {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n  margin-bottom: 12px;\n  border-left: 4px solid #0d6efd;\n}\n\n.calendar-day-booking .calendar-booking-time {\n  font-size: 14px;\n}\n\n.calendar-day-booking .calendar-booking-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.calendar-booking-description {\n  font-size: 14px;\n  color: #6c757d;\n  line-height: 1.5;\n}\n\n.calendar-day-add-btn {\n  margin: 20px;\n  width: calc(100% - 40px);\n  background: #0d6efd;\n  color: #ffffff;\n  border-color: #0d6efd;\n  padding: 12px;\n  font-size: 15px;\n}\n\n.calendar-day-add-btn:hover {\n  background: #0b5ed7;\n  border-color: #0a58ca;\n}\n\n@media (max-width: 768px) {\n  .calendar-title-section {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n  }\n\n  .calendar-cell {\n    min-height: 80px;\n    padding: 4px;\n  }\n\n  .calendar-cell-number {\n    width: 24px;\n    height: 24px;\n    font-size: 12px;\n  }\n\n  .calendar-booking {\n    font-size: 10px;\n    padding: 2px 4px;\n  }\n\n  .calendar-week-view {\n    grid-template-columns: 1fr;\n  }\n\n  .calendar-week-day {\n    min-height: 200px;\n  }\n\n  .calendar-day-view {\n    padding: 12px;\n  }\n\n  .calendar-day-container {\n    border-radius: 4px;\n  }\n\n  .calendar-day-header {\n    padding: 16px;\n  }\n\n  .calendar-day-date {\n    font-size: 20px;\n  }\n\n  .calendar-day-bookings {\n    padding: 12px;\n  }\n}\n";
 styleInject(css_248z);
 
 const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], }) => {
     const [currentDate, setCurrentDate] = React.useState(new Date());
+    const [currentView, setCurrentView] = React.useState(defaultView);
     const [bookings, setBookings] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
@@ -3556,10 +3632,22 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
         setLoading(true);
         setError(null);
         try {
-            const monthStart = startOfMonth(currentDate);
-            const monthEnd = endOfMonth(currentDate);
-            const startDate = startOfWeek(monthStart);
-            const endDate = endOfWeek(monthEnd);
+            let startDate;
+            let endDate;
+            if (currentView === 'month') {
+                const monthStart = startOfMonth(currentDate);
+                const monthEnd = endOfMonth(currentDate);
+                startDate = startOfWeek(monthStart);
+                endDate = endOfWeek(monthEnd);
+            }
+            else if (currentView === 'week') {
+                startDate = startOfWeek(currentDate);
+                endDate = endOfWeek(currentDate);
+            }
+            else {
+                startDate = startOfDay(currentDate);
+                endDate = endOfDay(currentDate);
+            }
             let fetchedBookings;
             if (resourceId) {
                 fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
@@ -3575,15 +3663,31 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
         finally {
             setLoading(false);
         }
-    }), [businessId, resourceId, currentDate, apiBaseUrl]);
+    }), [businessId, resourceId, currentDate, currentView, apiBaseUrl]);
     React.useEffect(() => {
         fetchBookings();
     }, [fetchBookings]);
-    const handlePreviousMonth = () => {
-        setCurrentDate(subMonths(currentDate, 1));
+    const handlePrevious = () => {
+        if (currentView === 'month') {
+            setCurrentDate(subMonths(currentDate, 1));
+        }
+        else if (currentView === 'week') {
+            setCurrentDate(subWeeks(currentDate, 1));
+        }
+        else {
+            setCurrentDate(addDays(currentDate, -1));
+        }
     };
-    const handleNextMonth = () => {
-        setCurrentDate(addMonths(currentDate, 1));
+    const handleNext = () => {
+        if (currentView === 'month') {
+            setCurrentDate(addMonths(currentDate, 1));
+        }
+        else if (currentView === 'week') {
+            setCurrentDate(addWeeks(currentDate, 1));
+        }
+        else {
+            setCurrentDate(addDays(currentDate, 1));
+        }
     };
     const handleToday = () => {
         setCurrentDate(new Date());
@@ -3606,22 +3710,39 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
             return isSameDay(bookingStart, day);
         });
     };
+    const getHeaderDateFormat = () => {
+        if (currentView === 'month') {
+            return format(currentDate, 'MMMM yyyy');
+        }
+        else if (currentView === 'week') {
+            const weekStart = startOfWeek(currentDate);
+            const weekEnd = endOfWeek(currentDate);
+            return `${format(weekStart, 'MMM d')} - ${format(weekEnd, 'MMM d, yyyy')}`;
+        }
+        else {
+            return format(currentDate, 'MMMM d, yyyy');
+        }
+    };
     const renderHeader = () => {
         return (React.createElement("div", { className: "calendar-header" },
             React.createElement("div", { className: "calendar-title-section" },
                 React.createElement("h2", { className: "calendar-title" }, title),
+                React.createElement("div", { className: "calendar-view-toggle" },
+                    React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'month' ? 'active' : ''}`, onClick: () => setCurrentView('month') }, "Month"),
+                    React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => setCurrentView('week') }, "Week"),
+                    React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => setCurrentView('day') }, "Day")),
                 React.createElement("button", { className: "calendar-btn calendar-btn-create", onClick: () => setShowCreateModal(true) }, "+ Create Booking")),
             React.createElement("div", { className: "calendar-navigation" },
-                React.createElement("button", { className: "calendar-btn", onClick: handlePreviousMonth }, "\u2039"),
+                React.createElement("button", { className: "calendar-btn", onClick: handlePrevious }, "\u2039"),
                 React.createElement("button", { className: "calendar-btn", onClick: handleToday }, "Today"),
-                React.createElement("button", { className: "calendar-btn", onClick: handleNextMonth }, "\u203A"),
-                React.createElement("span", { className: "calendar-current-month" }, format(currentDate, 'MMMM yyyy')))));
+                React.createElement("button", { className: "calendar-btn", onClick: handleNext }, "\u203A"),
+                React.createElement("span", { className: "calendar-current-month" }, getHeaderDateFormat()))));
     };
     const renderDaysOfWeek = () => {
         const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
         return (React.createElement("div", { className: "calendar-days-row" }, days.map((day) => (React.createElement("div", { key: day, className: "calendar-day-header" }, day)))));
     };
-    const renderCells = () => {
+    const renderMonthView = () => {
         const monthStart = startOfMonth(currentDate);
         const monthEnd = endOfMonth(currentDate);
         const startDate = startOfWeek(monthStart);
@@ -3660,12 +3781,64 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
         }
         return React.createElement("div", { className: "calendar-body" }, rows);
     };
+    const renderWeekView = () => {
+        const weekStart = startOfWeek(currentDate);
+        const days = [];
+        for (let i = 0; i < 7; i++) {
+            const day = addDays(weekStart, i);
+            const dayBookings = getBookingsForDay(day);
+            const isToday = isSameDay(day, new Date());
+            days.push(React.createElement("div", { key: day.toString(), className: `calendar-week-day ${isToday ? 'calendar-cell-today' : ''}`, onClick: () => handleDateClick(day) },
+                React.createElement("div", { className: "calendar-week-day-header" },
+                    React.createElement("div", { className: "calendar-week-day-name" }, format(day, 'EEE')),
+                    React.createElement("div", { className: "calendar-week-day-number" }, format(day, 'd'))),
+                React.createElement("div", { className: "calendar-week-day-bookings" }, dayBookings.map((booking) => {
+                    var _a, _b;
+                    return (React.createElement("div", { key: booking.meeting_id, className: "calendar-booking calendar-week-booking", onClick: (e) => {
+                            e.stopPropagation();
+                            if (onBookingClick) {
+                                onBookingClick(booking);
+                            }
+                        }, title: ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled' },
+                        React.createElement("span", { className: "calendar-booking-time" }, format(parseISO(booking.start), 'HH:mm')),
+                        React.createElement("span", { className: "calendar-booking-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled')));
+                }))));
+        }
+        return React.createElement("div", { className: "calendar-week-view" }, days);
+    };
+    const renderDayView = () => {
+        const dayBookings = getBookingsForDay(currentDate);
+        const isToday = isSameDay(currentDate, new Date());
+        return (React.createElement("div", { className: "calendar-day-view" },
+            React.createElement("div", { className: `calendar-day-container ${isToday ? 'calendar-cell-today' : ''}` },
+                React.createElement("div", { className: "calendar-day-header" },
+                    React.createElement("div", { className: "calendar-day-name" }, format(currentDate, 'EEEE')),
+                    React.createElement("div", { className: "calendar-day-date" }, format(currentDate, 'MMMM d, yyyy'))),
+                React.createElement("div", { className: "calendar-day-bookings" }, dayBookings.length === 0 ? (React.createElement("div", { className: "calendar-no-bookings" }, "No bookings for this day")) : (dayBookings.map((booking) => {
+                    var _a, _b, _c;
+                    return (React.createElement("div", { key: booking.meeting_id, className: "calendar-booking calendar-day-booking", onClick: () => {
+                            if (onBookingClick) {
+                                onBookingClick(booking);
+                            }
+                        }, title: ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled' },
+                        React.createElement("span", { className: "calendar-booking-time" },
+                            format(parseISO(booking.start), 'HH:mm'),
+                            " - ",
+                            format(parseISO(booking.end), 'HH:mm')),
+                        React.createElement("span", { className: "calendar-booking-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
+                        ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.description) && (React.createElement("span", { className: "calendar-booking-description" }, booking.metadata.description))));
+                }))),
+                React.createElement("button", { className: "calendar-btn calendar-day-add-btn", onClick: () => handleDateClick(currentDate) }, "+ Add Booking"))));
+    };
     return (React.createElement("div", { className: "calendar-container" },
         renderHeader(),
         error && React.createElement("div", { className: "calendar-error" }, error),
         loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
-        renderDaysOfWeek(),
-        renderCells(),
+        currentView === 'month' && (React.createElement(React.Fragment, null,
+            renderDaysOfWeek(),
+            renderMonthView())),
+        currentView === 'week' && renderWeekView(),
+        currentView === 'day' && renderDayView(),
         showCreateModal && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate || new Date(), participants: participants, onClose: () => {
                 setShowCreateModal(false);
                 setSelectedDate(null);