@dialiq/calendar-component 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BookingDetailsModal.d.ts.map +1 -1
- package/dist/Calendar.d.ts.map +1 -1
- package/dist/api.d.ts +3 -3
- package/dist/api.d.ts.map +1 -1
- package/dist/components/CalendarHeader.d.ts +0 -1
- package/dist/components/CalendarHeader.d.ts.map +1 -1
- package/dist/components/TimeGrid.d.ts.map +1 -1
- package/dist/index.esm.js +28 -33
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +28 -33
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +1 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +48 -48
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BookingDetailsModal.d.ts","sourceRoot":"","sources":["../src/BookingDetailsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,2BAA2B,CAAC;AAEnC,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,
|
|
1
|
+
{"version":3,"file":"BookingDetailsModal.d.ts","sourceRoot":"","sources":["../src/BookingDetailsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,2BAA2B,CAAC;AAEnC,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyF3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
package/dist/Calendar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../src/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAW,MAAM,SAAS,CAAC;AAQjD,OAAO,gBAAgB,CAAC;AAIxB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../src/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAW,MAAM,SAAS,CAAC;AAQjD,OAAO,gBAAgB,CAAC;AAIxB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+NrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/dist/api.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Booking, CreateBookingRequest } from './types';
|
|
2
2
|
export declare const createBooking: (businessId: string, booking: CreateBookingRequest, apiBaseUrl?: string) => Promise<Booking>;
|
|
3
|
-
export declare const getResourceSchedule: (businessId: string, resourceId: string, startDate: string, endDate: string, apiBaseUrl?: string) => Promise<Booking[]>;
|
|
4
|
-
export declare const getAllBookings: (businessId: string, startDate: string, endDate: string, apiBaseUrl?: string) => Promise<Booking[]>;
|
|
5
|
-
export declare const getMeetingDetails: (businessId: string, meetingId: string, apiBaseUrl?: string) => Promise<Booking>;
|
|
3
|
+
export declare const getResourceSchedule: (businessId: string, resourceId: string, startDate: string, endDate: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking[]>;
|
|
4
|
+
export declare const getAllBookings: (businessId: string, startDate: string, endDate: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking[]>;
|
|
5
|
+
export declare const getMeetingDetails: (businessId: string, meetingId: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking>;
|
|
6
6
|
//# sourceMappingURL=api.d.ts.map
|
package/dist/api.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAYxD,eAAO,MAAM,aAAa,GACxB,YAAY,MAAM,EAClB,SAAS,oBAAoB,EAC7B,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAgBjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,YAAY,MAAM,EAClB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAYxD,eAAO,MAAM,aAAa,GACxB,YAAY,MAAM,EAClB,SAAS,oBAAoB,EAC7B,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAgBjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,YAAY,MAAM,EAClB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAiBnB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAiBnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAejB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../src/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../src/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgEjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeGrid.d.ts","sourceRoot":"","sources":["../../src/components/TimeGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGxD,UAAU,aAAa;IACnB,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAClC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"TimeGrid.d.ts","sourceRoot":"","sources":["../../src/components/TimeGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGxD,UAAU,aAAa;IACnB,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAClC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuRrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -7355,11 +7355,14 @@ const createBooking = (businessId, booking, apiBaseUrl) => __awaiter(void 0, voi
|
|
|
7355
7355
|
}
|
|
7356
7356
|
return response.json();
|
|
7357
7357
|
});
|
|
7358
|
-
const getResourceSchedule = (businessId, resourceId, startDate, endDate, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7358
|
+
const getResourceSchedule = (businessId, resourceId, startDate, endDate, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7359
7359
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7360
7360
|
const url = new URL(`${baseUrl}/businesses/${businessId}/schedules/${resourceId}`);
|
|
7361
7361
|
url.searchParams.append('start_date', startDate);
|
|
7362
7362
|
url.searchParams.append('end_date', endDate);
|
|
7363
|
+
if (timezone) {
|
|
7364
|
+
url.searchParams.append('timezone', timezone);
|
|
7365
|
+
}
|
|
7363
7366
|
const response = yield fetch(url.toString());
|
|
7364
7367
|
if (!response.ok) {
|
|
7365
7368
|
const error = yield response.json();
|
|
@@ -7367,11 +7370,14 @@ const getResourceSchedule = (businessId, resourceId, startDate, endDate, apiBase
|
|
|
7367
7370
|
}
|
|
7368
7371
|
return response.json();
|
|
7369
7372
|
});
|
|
7370
|
-
const getAllBookings = (businessId, startDate, endDate, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7373
|
+
const getAllBookings = (businessId, startDate, endDate, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7371
7374
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7372
7375
|
const url = new URL(`${baseUrl}/businesses/${businessId}/bookings`);
|
|
7373
7376
|
url.searchParams.append('start_date', startDate);
|
|
7374
7377
|
url.searchParams.append('end_date', endDate);
|
|
7378
|
+
if (timezone) {
|
|
7379
|
+
url.searchParams.append('timezone', timezone);
|
|
7380
|
+
}
|
|
7375
7381
|
const response = yield fetch(url.toString());
|
|
7376
7382
|
if (!response.ok) {
|
|
7377
7383
|
const error = yield response.json();
|
|
@@ -7379,9 +7385,13 @@ const getAllBookings = (businessId, startDate, endDate, apiBaseUrl) => __awaiter
|
|
|
7379
7385
|
}
|
|
7380
7386
|
return response.json();
|
|
7381
7387
|
});
|
|
7382
|
-
const getMeetingDetails = (businessId, meetingId, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7388
|
+
const getMeetingDetails = (businessId, meetingId, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7383
7389
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7384
|
-
const
|
|
7390
|
+
const url = new URL(`${baseUrl}/businesses/${businessId}/meetings/${meetingId}`);
|
|
7391
|
+
if (timezone) {
|
|
7392
|
+
url.searchParams.append('timezone', timezone);
|
|
7393
|
+
}
|
|
7394
|
+
const response = yield fetch(url.toString());
|
|
7385
7395
|
if (!response.ok) {
|
|
7386
7396
|
const error = yield response.json();
|
|
7387
7397
|
throw new Error(error.error || 'Failed to fetch meeting details');
|
|
@@ -7435,7 +7445,7 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7435
7445
|
const dayName = start.format('dddd');
|
|
7436
7446
|
const businessDay = businessHours[dayName];
|
|
7437
7447
|
if (!businessDay)
|
|
7438
|
-
return; // Assuming open if not defined, or closed? Usually open if not specified or handle as error.
|
|
7448
|
+
return; // Assuming open if not defined, or closed? Usually open if not specified or handle as error.
|
|
7439
7449
|
// Based on provided JSON, all days are present. If missing, maybe assume open.
|
|
7440
7450
|
if (businessDay.isClosed) {
|
|
7441
7451
|
throw new Error(`Business is closed on ${dayName}`);
|
|
@@ -7475,8 +7485,8 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7475
7485
|
validateBusinessHours(startDateTime, endDateTime);
|
|
7476
7486
|
const booking = yield createBooking(businessId, {
|
|
7477
7487
|
participants: participantList,
|
|
7478
|
-
start: startDateTime.
|
|
7479
|
-
end: endDateTime.
|
|
7488
|
+
start: startDateTime.format(),
|
|
7489
|
+
end: endDateTime.format(),
|
|
7480
7490
|
metadata: {
|
|
7481
7491
|
title: title || 'Untitled Meeting',
|
|
7482
7492
|
description,
|
|
@@ -7533,7 +7543,7 @@ var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from Create
|
|
|
7533
7543
|
styleInject(css_248z$1);
|
|
7534
7544
|
|
|
7535
7545
|
const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
|
|
7536
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
|
7546
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
7537
7547
|
const startMoment = moment$1(booking.start).tz(timezone);
|
|
7538
7548
|
const endMoment = moment$1(booking.end).tz(timezone);
|
|
7539
7549
|
const durationMinutes = endMoment.diff(startMoment, 'minutes');
|
|
@@ -7569,14 +7579,6 @@ const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
|
|
|
7569
7579
|
(booking.room || ((_g = booking.metadata) === null || _g === void 0 ? void 0 : _g.room)) && (React.createElement("div", { className: "detail-row" },
|
|
7570
7580
|
React.createElement("span", { className: "detail-label" }, "Room:"),
|
|
7571
7581
|
React.createElement("span", { className: "detail-value" }, booking.room || ((_h = booking.metadata) === null || _h === void 0 ? void 0 : _h.room)))))),
|
|
7572
|
-
booking.participants && booking.participants.length > 0 && (React.createElement("div", { className: "detail-section" },
|
|
7573
|
-
React.createElement("div", { className: "detail-row full-width" },
|
|
7574
|
-
React.createElement("span", { className: "detail-label" }, "Participants:"),
|
|
7575
|
-
React.createElement("ul", { className: "participants-list" }, booking.participants.map((participant, index) => (React.createElement("li", { key: index, className: "participant-item" }, participant))))))),
|
|
7576
|
-
((_j = booking.metadata) === null || _j === void 0 ? void 0 : _j.organizer) && (React.createElement("div", { className: "detail-section" },
|
|
7577
|
-
React.createElement("div", { className: "detail-row" },
|
|
7578
|
-
React.createElement("span", { className: "detail-label" }, "Organizer:"),
|
|
7579
|
-
React.createElement("span", { className: "detail-value" }, booking.metadata.organizer)))),
|
|
7580
7582
|
React.createElement("div", { className: "detail-section" },
|
|
7581
7583
|
React.createElement("div", { className: "detail-row" },
|
|
7582
7584
|
React.createElement("span", { className: "detail-label detail-label-muted" }, "Meeting ID:"),
|
|
@@ -7712,7 +7714,7 @@ const isMobile = () => {
|
|
|
7712
7714
|
return false;
|
|
7713
7715
|
};
|
|
7714
7716
|
|
|
7715
|
-
const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday,
|
|
7717
|
+
const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday, dateRangeText, }) => {
|
|
7716
7718
|
const mobile = isMobile();
|
|
7717
7719
|
return (React.createElement("div", { className: "calendar-header" },
|
|
7718
7720
|
React.createElement("div", { className: "calendar-title-section" },
|
|
@@ -7722,12 +7724,11 @@ const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious,
|
|
|
7722
7724
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => onViewChange('week'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Week"),
|
|
7723
7725
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'workWeek' ? 'active' : ''}`, onClick: () => onViewChange('workWeek'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Work Week"),
|
|
7724
7726
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => onViewChange('day') }, "Day")),
|
|
7725
|
-
React.createElement("
|
|
7726
|
-
|
|
7727
|
-
|
|
7728
|
-
|
|
7729
|
-
|
|
7730
|
-
React.createElement("span", { className: "calendar-current-month" }, dateRangeText))));
|
|
7727
|
+
React.createElement("div", { className: "calendar-navigation" },
|
|
7728
|
+
React.createElement("button", { className: "calendar-btn", onClick: onPrevious }, "\u2039"),
|
|
7729
|
+
React.createElement("button", { className: "calendar-btn", onClick: onToday }, "Today"),
|
|
7730
|
+
React.createElement("button", { className: "calendar-btn", onClick: onNext }, "\u203A"),
|
|
7731
|
+
React.createElement("span", { className: "calendar-current-month" }, dateRangeText)))));
|
|
7731
7732
|
};
|
|
7732
7733
|
|
|
7733
7734
|
const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTimeSlotClick, businessHours, }) => {
|
|
@@ -7751,7 +7752,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7751
7752
|
days.forEach(day => {
|
|
7752
7753
|
const dayName = day.format('dddd');
|
|
7753
7754
|
const dayHours = businessHours[dayName];
|
|
7754
|
-
console.log('Day:', dayName, 'Hours:', dayHours);
|
|
7755
7755
|
if (!(dayHours === null || dayHours === void 0 ? void 0 : dayHours.isClosed) && (dayHours === null || dayHours === void 0 ? void 0 : dayHours.openTime) && (dayHours === null || dayHours === void 0 ? void 0 : dayHours.closeTime)) {
|
|
7756
7756
|
const openTime = moment$1(dayHours.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7757
7757
|
const closeTime = moment$1(dayHours.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
@@ -7762,7 +7762,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7762
7762
|
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7763
7763
|
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7764
7764
|
const duration = closeMinutes - openMinutes;
|
|
7765
|
-
console.log(' Open:', dayHours.openTime, '->', openMinutes, '| Close:', dayHours.closeTime, '->', closeMinutes, '| Duration:', duration);
|
|
7766
7765
|
if (openMinutes < closeMinutes && duration > maxDuration) {
|
|
7767
7766
|
maxDuration = duration;
|
|
7768
7767
|
longestDayOpen = openMinutes;
|
|
@@ -7770,7 +7769,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7770
7769
|
}
|
|
7771
7770
|
}
|
|
7772
7771
|
});
|
|
7773
|
-
console.log('Longest: open =', longestDayOpen, 'close =', longestDayClose);
|
|
7774
7772
|
if (maxDuration === 0) {
|
|
7775
7773
|
return {
|
|
7776
7774
|
displayStart: 0,
|
|
@@ -7976,7 +7974,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7976
7974
|
React.createElement("div", { className: "calendar-body" }, rows)));
|
|
7977
7975
|
};
|
|
7978
7976
|
|
|
7979
|
-
var css_248z = ".calendar-container {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n
|
|
7977
|
+
var css_248z = ".calendar-container {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n /* Use 100% height of parent */\r\n max-height: 100vh;\r\n overflow: hidden;\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #fff;\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 flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: #333;\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: #f5f5f5;\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: #fff;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: #0078d4;\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: #106ebe;\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: #333;\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n /* Prevent container scrolling, let body scroll */\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #666;\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n /* Prevent overflow */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n /* Scrollable body */\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n flex: 1;\r\n min-height: 100px;\r\n /* Minimum row height */\r\n border-bottom: 1px solid #e0e0e0;\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid #e0e0e0;\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n /* Prevent cell expansion */\r\n min-width: 0;\r\n /* Allow shrinking below content size */\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: #fcfcfc;\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: #f9f9f9;\r\n color: #999;\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: #e6f2ff;\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: #f5f5f5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: #d13438;\r\n background: #fde7e9;\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: #e1dfdd;\r\n /* Default neutral color */\r\n border-left: 3px solid #0078d4;\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n /* For tooltip positioning */\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: #d0d0d0;\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: #666;\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid #e0e0e0;\r\n padding-right: 17px;\r\n /* Adjust for scrollbar */\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n /* Width of time labels column */\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n min-width: 0;\r\n /* Prevent expansion */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: #e6f2ff;\r\n color: #0078d4;\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: #f0f0f0;\r\n color: #999;\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: #666;\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n /* 1 hour height */\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: #666;\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n /* 24 hours * 60px/hour = 1440px total height */\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid #e0e0e0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid #e0e0e0;\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n /* Critical for flex containers to not expand based on content */\r\n}\r\n\r\n.day-column.closed-column {\r\n background-color: repeating-linear-gradient(45deg,\r\n #fbfbfb,\r\n #fbfbfb 10px,\r\n #f5f5f5 10px,\r\n #f5f5f5 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: #e1dfdd;\r\n border-left: 4px solid #0078d4;\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n /* Bring to front on hover */\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: #555;\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: white;\r\n border: 1px solid #ccc;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen (simple right-side check) */\r\n/* Note: A real production app would use a library like Popper.js */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid #eee;\r\n padding-bottom: 4px;\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: #666;\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: #666;\r\n}\r\n\r\n.calendar-error {\r\n color: #d13438;\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: #f0f0f0;\r\n background-image: repeating-linear-gradient(45deg,\r\n #f0f0f0,\r\n #f0f0f0 10px,\r\n #e8e8e8 10px,\r\n #e8e8e8 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n /* Below events but above grid lines */\r\n pointer-events: none;\r\n /* Allow clicks to pass through if needed, though we block clicks in JS */\r\n border-bottom: 1px solid #ddd;\r\n border-top: 1px solid #ddd;\r\n}\r\n\r\n.closed-block-label {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: #888;\r\n font-weight: 500;\r\n}";
|
|
7980
7978
|
styleInject(css_248z);
|
|
7981
7979
|
|
|
7982
7980
|
const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
@@ -8031,10 +8029,10 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8031
8029
|
}
|
|
8032
8030
|
let fetchedBookings;
|
|
8033
8031
|
if (resourceId) {
|
|
8034
|
-
fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
|
|
8032
|
+
fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), timezone, apiBaseUrl);
|
|
8035
8033
|
}
|
|
8036
8034
|
else {
|
|
8037
|
-
fetchedBookings = yield getAllBookings(businessId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
|
|
8035
|
+
fetchedBookings = yield getAllBookings(businessId, startDate.toISOString(), endDate.toISOString(), timezone, apiBaseUrl);
|
|
8038
8036
|
}
|
|
8039
8037
|
setBookings(fetchedBookings);
|
|
8040
8038
|
}
|
|
@@ -8111,10 +8109,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8111
8109
|
}
|
|
8112
8110
|
};
|
|
8113
8111
|
return (React.createElement("div", { className: "calendar-container" },
|
|
8114
|
-
React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday,
|
|
8115
|
-
setSelectedDate(moment$1().tz(timezone).toDate());
|
|
8116
|
-
setShowCreateModal(true);
|
|
8117
|
-
}, dateRangeText: getHeaderDateFormat() }),
|
|
8112
|
+
React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday, dateRangeText: getHeaderDateFormat() }),
|
|
8118
8113
|
error && React.createElement("div", { className: "calendar-error" }, error),
|
|
8119
8114
|
loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
|
|
8120
8115
|
React.createElement("div", { className: "calendar-content" }, currentView === 'month' ? (React.createElement(MonthView, { currentDate: currentDate, bookings: bookings, timezone: timezone, onBookingClick: handleInternalBookingClick, onDateClick: handleDateClick, businessHours: businessHours })) : (React.createElement(TimeGrid, { currentDate: currentDate, view: currentView, bookings: bookings, timezone: timezone, onBookingClick: handleInternalBookingClick, onTimeSlotClick: handleDateClick, businessHours: businessHours }))),
|