@dialiq/calendar-component 1.1.0 → 1.1.1
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 +11 -0
- package/dist/BookingDetailsModal.d.ts.map +1 -0
- package/dist/Calendar.d.ts.map +1 -1
- package/dist/components/MonthView.d.ts.map +1 -1
- package/dist/components/TimeGrid.d.ts.map +1 -1
- package/dist/index.esm.js +73 -36
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +73 -36
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -7418,8 +7418,8 @@ function styleInject(css, ref) {
|
|
|
7418
7418
|
}
|
|
7419
7419
|
}
|
|
7420
7420
|
|
|
7421
|
-
var css_248z$
|
|
7422
|
-
styleInject(css_248z$
|
|
7421
|
+
var css_248z$2 = ".modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n padding: 20px;\r\n}\r\n\r\n.modal-content {\r\n background: #ffffff;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\r\n width: 100%;\r\n max-width: 500px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n}\r\n\r\n.modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 20px;\r\n border-bottom: 1px solid #e9ecef;\r\n}\r\n\r\n.modal-header h3 {\r\n margin: 0;\r\n font-size: 20px;\r\n font-weight: 600;\r\n color: #212529;\r\n}\r\n\r\n.modal-close-btn {\r\n background: none;\r\n border: none;\r\n font-size: 32px;\r\n line-height: 1;\r\n color: #6c757d;\r\n cursor: pointer;\r\n padding: 0;\r\n width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.modal-close-btn:hover {\r\n background: #e9ecef;\r\n color: #212529;\r\n}\r\n\r\n.modal-body {\r\n padding: 20px;\r\n}\r\n\r\n.modal-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n padding: 20px;\r\n border-top: 1px solid #e9ecef;\r\n}\r\n\r\n.modal-error {\r\n background: #f8d7da;\r\n color: #842029;\r\n padding: 12px;\r\n border-radius: 4px;\r\n margin-bottom: 16px;\r\n font-size: 14px;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 16px;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n font-weight: 500;\r\n font-size: 14px;\r\n color: #212529;\r\n margin-bottom: 6px;\r\n}\r\n\r\n.form-group input,\r\n.form-group textarea {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1px solid #ced4da;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: #212529;\r\n transition: border-color 0.2s;\r\n box-sizing: border-box;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group textarea:focus {\r\n outline: none;\r\n border-color: #0d6efd;\r\n box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\r\n}\r\n\r\n.form-group textarea {\r\n resize: vertical;\r\n}\r\n\r\n.form-group small {\r\n display: block;\r\n margin-top: 4px;\r\n font-size: 12px;\r\n color: #6c757d;\r\n}\r\n\r\n.form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n}\r\n\r\n.modal-btn {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.modal-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.modal-btn-primary {\r\n background: #0d6efd;\r\n color: #ffffff;\r\n}\r\n\r\n.modal-btn-primary:hover:not(:disabled) {\r\n background: #0b5ed7;\r\n}\r\n\r\n.modal-btn-secondary {\r\n background: #6c757d;\r\n color: #ffffff;\r\n}\r\n\r\n.modal-btn-secondary:hover:not(:disabled) {\r\n background: #5c636a;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .modal-content {\r\n max-width: 100%;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n";
|
|
7422
|
+
styleInject(css_248z$2);
|
|
7423
7423
|
|
|
7424
7424
|
const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants: defaultParticipants, onClose, onBookingCreated, timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
7425
7425
|
const [title, setTitle] = React.useState('');
|
|
@@ -7531,6 +7531,62 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7531
7531
|
React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
|
|
7532
7532
|
};
|
|
7533
7533
|
|
|
7534
|
+
var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\r\n\r\n.booking-details-modal {\r\n max-width: 500px;\r\n}\r\n\r\n.detail-section {\r\n padding: 12px 0;\r\n border-bottom: 1px solid #e9ecef;\r\n}\r\n\r\n.detail-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.detail-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.detail-row:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.detail-row.full-width {\r\n flex-direction: column;\r\n}\r\n\r\n.detail-label {\r\n font-weight: 500;\r\n color: #6c757d;\r\n font-size: 14px;\r\n min-width: 100px;\r\n}\r\n\r\n.detail-label-muted {\r\n color: #adb5bd;\r\n font-size: 12px;\r\n}\r\n\r\n.detail-value {\r\n font-weight: 500;\r\n color: #212529;\r\n font-size: 14px;\r\n text-align: right;\r\n}\r\n\r\n.detail-value-muted {\r\n color: #adb5bd;\r\n font-size: 12px;\r\n font-family: monospace;\r\n}\r\n\r\n.detail-description {\r\n margin: 8px 0 0 0;\r\n color: #495057;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n white-space: pre-wrap;\r\n}\r\n\r\n.participants-list {\r\n margin: 8px 0 0 0;\r\n padding-left: 20px;\r\n list-style-type: disc;\r\n}\r\n\r\n.participant-item {\r\n color: #495057;\r\n font-size: 14px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .booking-details-modal {\r\n max-width: 100%;\r\n }\r\n\r\n .detail-row {\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n .detail-value {\r\n text-align: left;\r\n }\r\n}\r\n";
|
|
7535
|
+
styleInject(css_248z$1);
|
|
7536
|
+
|
|
7537
|
+
const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
|
|
7538
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
7539
|
+
const startMoment = moment$1(booking.start).tz(timezone);
|
|
7540
|
+
const endMoment = moment$1(booking.end).tz(timezone);
|
|
7541
|
+
const durationMinutes = endMoment.diff(startMoment, 'minutes');
|
|
7542
|
+
return (React.createElement("div", { className: "modal-overlay", onClick: onClose },
|
|
7543
|
+
React.createElement("div", { className: "modal-content booking-details-modal", onClick: (e) => e.stopPropagation() },
|
|
7544
|
+
React.createElement("div", { className: "modal-header" },
|
|
7545
|
+
React.createElement("h3", null, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled Booking'),
|
|
7546
|
+
React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7")),
|
|
7547
|
+
React.createElement("div", { className: "modal-body" },
|
|
7548
|
+
React.createElement("div", { className: "detail-section" },
|
|
7549
|
+
React.createElement("div", { className: "detail-row" },
|
|
7550
|
+
React.createElement("span", { className: "detail-label" }, "Date:"),
|
|
7551
|
+
React.createElement("span", { className: "detail-value" }, startMoment.format('dddd, MMMM D, YYYY'))),
|
|
7552
|
+
React.createElement("div", { className: "detail-row" },
|
|
7553
|
+
React.createElement("span", { className: "detail-label" }, "Time:"),
|
|
7554
|
+
React.createElement("span", { className: "detail-value" },
|
|
7555
|
+
startMoment.format('h:mm A'),
|
|
7556
|
+
" - ",
|
|
7557
|
+
endMoment.format('h:mm A'))),
|
|
7558
|
+
React.createElement("div", { className: "detail-row" },
|
|
7559
|
+
React.createElement("span", { className: "detail-label" }, "Duration:"),
|
|
7560
|
+
React.createElement("span", { className: "detail-value" }, durationMinutes >= 60
|
|
7561
|
+
? `${Math.floor(durationMinutes / 60)}h ${durationMinutes % 60}m`
|
|
7562
|
+
: `${durationMinutes} minutes`))),
|
|
7563
|
+
((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.description) && (React.createElement("div", { className: "detail-section" },
|
|
7564
|
+
React.createElement("div", { className: "detail-row full-width" },
|
|
7565
|
+
React.createElement("span", { className: "detail-label" }, "Description:"),
|
|
7566
|
+
React.createElement("p", { className: "detail-description" }, booking.metadata.description)))),
|
|
7567
|
+
((booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) || (booking.room || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.room))) && (React.createElement("div", { className: "detail-section" },
|
|
7568
|
+
(booking.staff || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.staff)) && (React.createElement("div", { className: "detail-row" },
|
|
7569
|
+
React.createElement("span", { className: "detail-label" }, "Staff:"),
|
|
7570
|
+
React.createElement("span", { className: "detail-value" }, booking.staff || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.staff)))),
|
|
7571
|
+
(booking.room || ((_g = booking.metadata) === null || _g === void 0 ? void 0 : _g.room)) && (React.createElement("div", { className: "detail-row" },
|
|
7572
|
+
React.createElement("span", { className: "detail-label" }, "Room:"),
|
|
7573
|
+
React.createElement("span", { className: "detail-value" }, booking.room || ((_h = booking.metadata) === null || _h === void 0 ? void 0 : _h.room)))))),
|
|
7574
|
+
booking.participants && booking.participants.length > 0 && (React.createElement("div", { className: "detail-section" },
|
|
7575
|
+
React.createElement("div", { className: "detail-row full-width" },
|
|
7576
|
+
React.createElement("span", { className: "detail-label" }, "Participants:"),
|
|
7577
|
+
React.createElement("ul", { className: "participants-list" }, booking.participants.map((participant, index) => (React.createElement("li", { key: index, className: "participant-item" }, participant))))))),
|
|
7578
|
+
((_j = booking.metadata) === null || _j === void 0 ? void 0 : _j.organizer) && (React.createElement("div", { className: "detail-section" },
|
|
7579
|
+
React.createElement("div", { className: "detail-row" },
|
|
7580
|
+
React.createElement("span", { className: "detail-label" }, "Organizer:"),
|
|
7581
|
+
React.createElement("span", { className: "detail-value" }, booking.metadata.organizer)))),
|
|
7582
|
+
React.createElement("div", { className: "detail-section" },
|
|
7583
|
+
React.createElement("div", { className: "detail-row" },
|
|
7584
|
+
React.createElement("span", { className: "detail-label detail-label-muted" }, "Meeting ID:"),
|
|
7585
|
+
React.createElement("span", { className: "detail-value detail-value-muted" }, booking.meeting_id)))),
|
|
7586
|
+
React.createElement("div", { className: "modal-footer" },
|
|
7587
|
+
React.createElement("button", { className: "modal-btn modal-btn-secondary", onClick: onClose }, "Close")))));
|
|
7588
|
+
};
|
|
7589
|
+
|
|
7534
7590
|
const getWeekDays = (currentDate, view, businessHours) => {
|
|
7535
7591
|
const startOfWeek = currentDate.clone().startOf('week');
|
|
7536
7592
|
const days = [];
|
|
@@ -7850,7 +7906,7 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7850
7906
|
visibleBookings
|
|
7851
7907
|
.filter(b => moment$1(b.start).tz(timezone).isSame(day, 'day'))
|
|
7852
7908
|
.map(booking => {
|
|
7853
|
-
var _a
|
|
7909
|
+
var _a;
|
|
7854
7910
|
const pos = dayPositions.get(booking.meeting_id);
|
|
7855
7911
|
if (!pos)
|
|
7856
7912
|
return null;
|
|
@@ -7870,21 +7926,7 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7870
7926
|
React.createElement("div", { className: "event-time" },
|
|
7871
7927
|
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7872
7928
|
" - ",
|
|
7873
|
-
moment$1(booking.end).tz(timezone).format('h:mm A')))
|
|
7874
|
-
React.createElement("div", { className: "event-tooltip" },
|
|
7875
|
-
React.createElement("div", { className: "tooltip-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7876
|
-
React.createElement("div", { className: "tooltip-row" },
|
|
7877
|
-
React.createElement("span", { className: "tooltip-label" }, "Time:"),
|
|
7878
|
-
React.createElement("span", { className: "tooltip-value" },
|
|
7879
|
-
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7880
|
-
" - ",
|
|
7881
|
-
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7882
|
-
(booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7883
|
-
React.createElement("span", { className: "tooltip-label" }, "Staff:"),
|
|
7884
|
-
React.createElement("span", { className: "tooltip-value" }, booking.staff || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.staff)))),
|
|
7885
|
-
(booking.room || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.room)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7886
|
-
React.createElement("span", { className: "tooltip-label" }, "Room:"),
|
|
7887
|
-
React.createElement("span", { className: "tooltip-value" }, booking.room || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.room)))))));
|
|
7929
|
+
moment$1(booking.end).tz(timezone).format('h:mm A')))));
|
|
7888
7930
|
})));
|
|
7889
7931
|
})))));
|
|
7890
7932
|
};
|
|
@@ -7912,7 +7954,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7912
7954
|
isClosed && React.createElement("span", { className: "calendar-closed-label-small" }, "Closed")),
|
|
7913
7955
|
React.createElement("div", { className: "calendar-cell-bookings" },
|
|
7914
7956
|
dayBookings.slice(0, 3).map((booking) => {
|
|
7915
|
-
var _a
|
|
7957
|
+
var _a;
|
|
7916
7958
|
return (React.createElement("div", { key: booking.meeting_id, className: `calendar-booking ${booking.className || ''}`, onClick: (e) => {
|
|
7917
7959
|
e.stopPropagation();
|
|
7918
7960
|
if (onBookingClick) {
|
|
@@ -7920,21 +7962,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7920
7962
|
}
|
|
7921
7963
|
} },
|
|
7922
7964
|
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7923
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled')
|
|
7924
|
-
React.createElement("div", { className: "event-tooltip" },
|
|
7925
|
-
React.createElement("div", { className: "tooltip-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7926
|
-
React.createElement("div", { className: "tooltip-row" },
|
|
7927
|
-
React.createElement("span", { className: "tooltip-label" }, "Time:"),
|
|
7928
|
-
React.createElement("span", { className: "tooltip-value" },
|
|
7929
|
-
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7930
|
-
" - ",
|
|
7931
|
-
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7932
|
-
(booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7933
|
-
React.createElement("span", { className: "tooltip-label" }, "Staff:"),
|
|
7934
|
-
React.createElement("span", { className: "tooltip-value" }, booking.staff || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.staff)))),
|
|
7935
|
-
(booking.room || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.room)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7936
|
-
React.createElement("span", { className: "tooltip-label" }, "Room:"),
|
|
7937
|
-
React.createElement("span", { className: "tooltip-value" }, booking.room || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.room)))))));
|
|
7965
|
+
React.createElement("span", { className: "calendar-booking-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled')));
|
|
7938
7966
|
}),
|
|
7939
7967
|
dayBookings.length > 3 && (React.createElement("div", { className: "calendar-booking-more" },
|
|
7940
7968
|
"+",
|
|
@@ -7961,6 +7989,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7961
7989
|
const [error, setError] = React.useState(null);
|
|
7962
7990
|
const [showCreateModal, setShowCreateModal] = React.useState(false);
|
|
7963
7991
|
const [selectedDate, setSelectedDate] = React.useState(null);
|
|
7992
|
+
const [selectedBooking, setSelectedBooking] = React.useState(null);
|
|
7964
7993
|
// Mobile responsiveness logic
|
|
7965
7994
|
React.useEffect(() => {
|
|
7966
7995
|
const handleResize = () => {
|
|
@@ -8062,6 +8091,13 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8062
8091
|
onBookingCreate(booking);
|
|
8063
8092
|
}
|
|
8064
8093
|
});
|
|
8094
|
+
const handleInternalBookingClick = (booking) => {
|
|
8095
|
+
setSelectedBooking(booking);
|
|
8096
|
+
// Also call the external callback if provided
|
|
8097
|
+
if (onBookingClick) {
|
|
8098
|
+
onBookingClick(booking);
|
|
8099
|
+
}
|
|
8100
|
+
};
|
|
8065
8101
|
const getHeaderDateFormat = () => {
|
|
8066
8102
|
const current = moment$1(currentDate).tz(timezone);
|
|
8067
8103
|
if (currentView === 'month') {
|
|
@@ -8083,8 +8119,9 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8083
8119
|
}, dateRangeText: getHeaderDateFormat() }),
|
|
8084
8120
|
error && React.createElement("div", { className: "calendar-error" }, error),
|
|
8085
8121
|
loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
|
|
8086
|
-
React.createElement("div", { className: "calendar-content" }, currentView === 'month' ? (React.createElement(MonthView, { currentDate: currentDate, bookings: bookings, timezone: timezone, onBookingClick:
|
|
8087
|
-
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours }))
|
|
8122
|
+
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 }))),
|
|
8123
|
+
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours })),
|
|
8124
|
+
selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, onClose: () => setSelectedBooking(null) }))));
|
|
8088
8125
|
};
|
|
8089
8126
|
|
|
8090
8127
|
exports.Calendar = Calendar;
|