@dialiq/calendar-component 1.0.4 → 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/CalendarHeader.d.ts +14 -0
- package/dist/components/CalendarHeader.d.ts.map +1 -0
- package/dist/components/MonthView.d.ts +14 -0
- package/dist/components/MonthView.d.ts.map +1 -0
- package/dist/components/TimeGrid.d.ts +15 -0
- package/dist/components/TimeGrid.d.ts.map +1 -0
- package/dist/index.esm.js +484 -146
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +483 -145
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +3 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/utils/calendarUtils.d.ts +12 -0
- package/dist/utils/calendarUtils.d.ts.map +1 -0
- 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,7 +7531,454 @@ 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 = "
|
|
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
|
+
|
|
7590
|
+
const getWeekDays = (currentDate, view, businessHours) => {
|
|
7591
|
+
const startOfWeek = currentDate.clone().startOf('week');
|
|
7592
|
+
const days = [];
|
|
7593
|
+
// Generate all 7 days of the week first
|
|
7594
|
+
for (let i = 0; i < 7; i++) {
|
|
7595
|
+
days.push(startOfWeek.clone().add(i, 'days'));
|
|
7596
|
+
}
|
|
7597
|
+
if (view === 'workWeek') {
|
|
7598
|
+
if (businessHours) {
|
|
7599
|
+
// Filter based on business hours
|
|
7600
|
+
return days.filter(day => {
|
|
7601
|
+
var _a;
|
|
7602
|
+
const dayName = day.format('dddd');
|
|
7603
|
+
return !((_a = businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed);
|
|
7604
|
+
});
|
|
7605
|
+
}
|
|
7606
|
+
else {
|
|
7607
|
+
// Default to 7 days (24/7) if no business hours provided
|
|
7608
|
+
return days;
|
|
7609
|
+
}
|
|
7610
|
+
}
|
|
7611
|
+
return days;
|
|
7612
|
+
};
|
|
7613
|
+
const calculateEventPositions = (bookings, timezone) => {
|
|
7614
|
+
const positions = new Map();
|
|
7615
|
+
// Sort bookings by start time
|
|
7616
|
+
const sortedBookings = [...bookings].sort((a, b) => {
|
|
7617
|
+
const startA = moment$1(a.start).tz(timezone);
|
|
7618
|
+
const startB = moment$1(b.start).tz(timezone);
|
|
7619
|
+
return startA.diff(startB);
|
|
7620
|
+
});
|
|
7621
|
+
// Group overlapping events
|
|
7622
|
+
const columns = [];
|
|
7623
|
+
sortedBookings.forEach(booking => {
|
|
7624
|
+
const start = moment$1(booking.start).tz(timezone);
|
|
7625
|
+
const end = moment$1(booking.end).tz(timezone);
|
|
7626
|
+
// Simple vertical position calculation (0-24 hours mapped to 0-100%)
|
|
7627
|
+
const startMinutes = start.hours() * 60 + start.minutes();
|
|
7628
|
+
const durationMinutes = end.diff(start, 'minutes');
|
|
7629
|
+
const top = (startMinutes / 1440) * 100;
|
|
7630
|
+
const height = (durationMinutes / 1440) * 100;
|
|
7631
|
+
// Overlap logic: Find a column where this event fits
|
|
7632
|
+
let placed = false;
|
|
7633
|
+
for (let i = 0; i < columns.length; i++) {
|
|
7634
|
+
const column = columns[i];
|
|
7635
|
+
const lastInColumn = column[column.length - 1];
|
|
7636
|
+
const lastInColumnEnd = moment$1(lastInColumn.end).tz(timezone);
|
|
7637
|
+
if (start.isSameOrAfter(lastInColumnEnd)) {
|
|
7638
|
+
column.push(booking);
|
|
7639
|
+
placed = true;
|
|
7640
|
+
break;
|
|
7641
|
+
}
|
|
7642
|
+
}
|
|
7643
|
+
if (!placed) {
|
|
7644
|
+
columns.push([booking]);
|
|
7645
|
+
}
|
|
7646
|
+
// Store temporary data to be refined
|
|
7647
|
+
positions.set(booking.meeting_id, { top, height, left: 0, width: 0 }); // Placeholder
|
|
7648
|
+
});
|
|
7649
|
+
// Refine positions based on columns
|
|
7650
|
+
// Let's try a standard "expand to fill" algorithm
|
|
7651
|
+
// Iterate through sorted bookings again to find "clusters"
|
|
7652
|
+
let cluster = [];
|
|
7653
|
+
let clusterEnd = null;
|
|
7654
|
+
for (let i = 0; i < sortedBookings.length; i++) {
|
|
7655
|
+
const booking = sortedBookings[i];
|
|
7656
|
+
const start = moment$1(booking.start).tz(timezone);
|
|
7657
|
+
const end = moment$1(booking.end).tz(timezone);
|
|
7658
|
+
if (clusterEnd === null || start.isBefore(clusterEnd)) {
|
|
7659
|
+
cluster.push(booking);
|
|
7660
|
+
if (clusterEnd === null || end.isAfter(clusterEnd)) {
|
|
7661
|
+
clusterEnd = end;
|
|
7662
|
+
}
|
|
7663
|
+
}
|
|
7664
|
+
else {
|
|
7665
|
+
// Process completed cluster
|
|
7666
|
+
processCluster(cluster, positions, timezone);
|
|
7667
|
+
cluster = [booking];
|
|
7668
|
+
clusterEnd = end;
|
|
7669
|
+
}
|
|
7670
|
+
}
|
|
7671
|
+
// Process last cluster
|
|
7672
|
+
if (cluster.length > 0) {
|
|
7673
|
+
processCluster(cluster, positions, timezone);
|
|
7674
|
+
}
|
|
7675
|
+
return positions;
|
|
7676
|
+
};
|
|
7677
|
+
const processCluster = (cluster, positions, timezone) => {
|
|
7678
|
+
// This is a simplified layout algorithm.
|
|
7679
|
+
// We will use a "columns" approach where we pack events into columns.
|
|
7680
|
+
const columns = [];
|
|
7681
|
+
cluster.forEach(booking => {
|
|
7682
|
+
const start = moment$1(booking.start).tz(timezone);
|
|
7683
|
+
let placed = false;
|
|
7684
|
+
for (let i = 0; i < columns.length; i++) {
|
|
7685
|
+
const lastInCol = columns[i][columns[i].length - 1];
|
|
7686
|
+
const lastEnd = moment$1(lastInCol.end).tz(timezone);
|
|
7687
|
+
if (start.isSameOrAfter(lastEnd)) {
|
|
7688
|
+
columns[i].push(booking);
|
|
7689
|
+
placed = true;
|
|
7690
|
+
break;
|
|
7691
|
+
}
|
|
7692
|
+
}
|
|
7693
|
+
if (!placed) {
|
|
7694
|
+
columns.push([booking]);
|
|
7695
|
+
}
|
|
7696
|
+
});
|
|
7697
|
+
const numColumns = columns.length;
|
|
7698
|
+
const width = 100 / numColumns;
|
|
7699
|
+
columns.forEach((col, colIndex) => {
|
|
7700
|
+
col.forEach(booking => {
|
|
7701
|
+
const pos = positions.get(booking.meeting_id);
|
|
7702
|
+
if (pos) {
|
|
7703
|
+
pos.left = colIndex * width;
|
|
7704
|
+
pos.width = width;
|
|
7705
|
+
positions.set(booking.meeting_id, pos);
|
|
7706
|
+
}
|
|
7707
|
+
});
|
|
7708
|
+
});
|
|
7709
|
+
};
|
|
7710
|
+
const isMobile = () => {
|
|
7711
|
+
if (typeof window !== 'undefined') {
|
|
7712
|
+
return window.innerWidth < 768;
|
|
7713
|
+
}
|
|
7714
|
+
return false;
|
|
7715
|
+
};
|
|
7716
|
+
|
|
7717
|
+
const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday, onCreateClick, dateRangeText, }) => {
|
|
7718
|
+
const mobile = isMobile();
|
|
7719
|
+
return (React.createElement("div", { className: "calendar-header" },
|
|
7720
|
+
React.createElement("div", { className: "calendar-title-section" },
|
|
7721
|
+
React.createElement("h2", { className: "calendar-title" }, title),
|
|
7722
|
+
React.createElement("div", { className: "calendar-view-toggle" },
|
|
7723
|
+
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'month' ? 'active' : ''}`, onClick: () => onViewChange('month'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Month"),
|
|
7724
|
+
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => onViewChange('week'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Week"),
|
|
7725
|
+
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'workWeek' ? 'active' : ''}`, onClick: () => onViewChange('workWeek'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Work Week"),
|
|
7726
|
+
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => onViewChange('day') }, "Day")),
|
|
7727
|
+
React.createElement("button", { className: "calendar-btn calendar-btn-create", onClick: onCreateClick }, "+ Create Booking")),
|
|
7728
|
+
React.createElement("div", { className: "calendar-navigation" },
|
|
7729
|
+
React.createElement("button", { className: "calendar-btn", onClick: onPrevious }, "\u2039"),
|
|
7730
|
+
React.createElement("button", { className: "calendar-btn", onClick: onToday }, "Today"),
|
|
7731
|
+
React.createElement("button", { className: "calendar-btn", onClick: onNext }, "\u203A"),
|
|
7732
|
+
React.createElement("span", { className: "calendar-current-month" }, dateRangeText))));
|
|
7733
|
+
};
|
|
7734
|
+
|
|
7735
|
+
const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTimeSlotClick, businessHours, }) => {
|
|
7736
|
+
const days = React.useMemo(() => {
|
|
7737
|
+
if (view === 'day') {
|
|
7738
|
+
return [moment$1(currentDate).tz(timezone)];
|
|
7739
|
+
}
|
|
7740
|
+
return getWeekDays(moment$1(currentDate).tz(timezone), view, businessHours);
|
|
7741
|
+
}, [currentDate, view, timezone, businessHours]);
|
|
7742
|
+
const { displayStart, displayEnd, timeLabels } = React.useMemo(() => {
|
|
7743
|
+
if (!businessHours) {
|
|
7744
|
+
return {
|
|
7745
|
+
displayStart: 0,
|
|
7746
|
+
displayEnd: 1440,
|
|
7747
|
+
timeLabels: Array.from({ length: 24 }, (_, i) => i * 60)
|
|
7748
|
+
};
|
|
7749
|
+
}
|
|
7750
|
+
let longestDayOpen = 0;
|
|
7751
|
+
let longestDayClose = 0;
|
|
7752
|
+
let maxDuration = 0;
|
|
7753
|
+
days.forEach(day => {
|
|
7754
|
+
const dayName = day.format('dddd');
|
|
7755
|
+
const dayHours = businessHours[dayName];
|
|
7756
|
+
console.log('Day:', dayName, 'Hours:', dayHours);
|
|
7757
|
+
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)) {
|
|
7758
|
+
const openTime = moment$1(dayHours.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7759
|
+
const closeTime = moment$1(dayHours.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
7760
|
+
if (!openTime.isValid() || !closeTime.isValid()) {
|
|
7761
|
+
console.warn('Invalid time format:', dayHours.openTime, dayHours.closeTime);
|
|
7762
|
+
return;
|
|
7763
|
+
}
|
|
7764
|
+
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7765
|
+
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7766
|
+
const duration = closeMinutes - openMinutes;
|
|
7767
|
+
console.log(' Open:', dayHours.openTime, '->', openMinutes, '| Close:', dayHours.closeTime, '->', closeMinutes, '| Duration:', duration);
|
|
7768
|
+
if (openMinutes < closeMinutes && duration > maxDuration) {
|
|
7769
|
+
maxDuration = duration;
|
|
7770
|
+
longestDayOpen = openMinutes;
|
|
7771
|
+
longestDayClose = closeMinutes;
|
|
7772
|
+
}
|
|
7773
|
+
}
|
|
7774
|
+
});
|
|
7775
|
+
console.log('Longest: open =', longestDayOpen, 'close =', longestDayClose);
|
|
7776
|
+
if (maxDuration === 0) {
|
|
7777
|
+
return {
|
|
7778
|
+
displayStart: 0,
|
|
7779
|
+
displayEnd: 1440,
|
|
7780
|
+
timeLabels: Array.from({ length: 24 }, (_, i) => i * 60)
|
|
7781
|
+
};
|
|
7782
|
+
}
|
|
7783
|
+
const displayStart = Math.max(0, longestDayOpen - 60);
|
|
7784
|
+
const displayEnd = Math.min(1440, longestDayClose + 60);
|
|
7785
|
+
const labels = [];
|
|
7786
|
+
const startHour = Math.floor(displayStart / 60);
|
|
7787
|
+
const endHour = Math.floor(displayEnd / 60);
|
|
7788
|
+
for (let h = startHour; h <= endHour; h++) {
|
|
7789
|
+
const hourInMinutes = h * 60;
|
|
7790
|
+
if (hourInMinutes < displayEnd && hourInMinutes >= displayStart) {
|
|
7791
|
+
labels.push(hourInMinutes);
|
|
7792
|
+
}
|
|
7793
|
+
}
|
|
7794
|
+
return { displayStart, displayEnd, timeLabels: labels };
|
|
7795
|
+
}, [days, businessHours]);
|
|
7796
|
+
const visibleBookings = React.useMemo(() => {
|
|
7797
|
+
if (days.length === 0)
|
|
7798
|
+
return [];
|
|
7799
|
+
const start = days[0].clone().startOf('day');
|
|
7800
|
+
const end = days[days.length - 1].clone().endOf('day');
|
|
7801
|
+
return bookings.filter(b => {
|
|
7802
|
+
const bStart = moment$1(b.start).tz(timezone);
|
|
7803
|
+
const bEnd = moment$1(b.end).tz(timezone);
|
|
7804
|
+
return bStart.isBefore(end) && bEnd.isAfter(start);
|
|
7805
|
+
});
|
|
7806
|
+
}, [bookings, days, timezone]);
|
|
7807
|
+
const dayPositions = React.useMemo(() => {
|
|
7808
|
+
const positions = new Map();
|
|
7809
|
+
const totalMinutes = displayEnd - displayStart;
|
|
7810
|
+
days.forEach(day => {
|
|
7811
|
+
const dayBookings = visibleBookings.filter(b => moment$1(b.start).tz(timezone).isSame(day, 'day'));
|
|
7812
|
+
const dayPos = calculateEventPositions(dayBookings, timezone);
|
|
7813
|
+
dayPos.forEach((pos, id) => {
|
|
7814
|
+
const startMinutes = (pos.top / 100) * 1440;
|
|
7815
|
+
const durationMinutes = (pos.height / 100) * 1440;
|
|
7816
|
+
const newTop = ((startMinutes - displayStart) / totalMinutes) * 100;
|
|
7817
|
+
const newHeight = (durationMinutes / totalMinutes) * 100;
|
|
7818
|
+
positions.set(id, Object.assign(Object.assign({}, pos), { top: Math.max(0, newTop), height: newHeight }));
|
|
7819
|
+
});
|
|
7820
|
+
});
|
|
7821
|
+
return positions;
|
|
7822
|
+
}, [visibleBookings, days, timezone, displayStart, displayEnd]);
|
|
7823
|
+
return (React.createElement("div", { className: "time-grid-container" },
|
|
7824
|
+
React.createElement("div", { className: "time-grid-header" },
|
|
7825
|
+
React.createElement("div", { className: "time-column-header", style: { width: '60px', minWidth: '60px' } }),
|
|
7826
|
+
days.map(day => {
|
|
7827
|
+
var _a;
|
|
7828
|
+
const dayName = day.format('dddd');
|
|
7829
|
+
const isClosed = (_a = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed;
|
|
7830
|
+
const isToday = day.isSame(moment$1().tz(timezone), 'day');
|
|
7831
|
+
return (React.createElement("div", { key: day.toString(), className: `day-column-header ${isToday ? 'today' : ''} ${isClosed ? 'closed' : ''}` },
|
|
7832
|
+
React.createElement("div", { className: "day-name" }, day.format('ddd')),
|
|
7833
|
+
React.createElement("div", { className: "day-number" }, day.format('D')),
|
|
7834
|
+
isClosed && React.createElement("span", { className: "closed-label" }, "Closed")));
|
|
7835
|
+
})),
|
|
7836
|
+
React.createElement("div", { className: "time-grid-body" },
|
|
7837
|
+
React.createElement("div", { className: "time-labels-column" }, timeLabels.map(minutes => (React.createElement("div", { key: minutes, className: "time-label" }, moment$1().startOf('day').add(minutes, 'minutes').format('h A'))))),
|
|
7838
|
+
React.createElement("div", { className: "days-grid", style: { height: `${(displayEnd - displayStart)}px` } },
|
|
7839
|
+
React.createElement("div", { className: "grid-lines" }, timeLabels.map(minutes => (React.createElement("div", { key: minutes, className: "grid-hour-row" })))),
|
|
7840
|
+
days.map(day => {
|
|
7841
|
+
const dayName = day.format('dddd');
|
|
7842
|
+
const businessDay = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName];
|
|
7843
|
+
const isClosed = businessDay === null || businessDay === void 0 ? void 0 : businessDay.isClosed;
|
|
7844
|
+
let closedBlocks = [];
|
|
7845
|
+
if (!isClosed && businessDay && businessDay.openTime && businessDay.closeTime) {
|
|
7846
|
+
const openTime = moment$1(businessDay.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7847
|
+
const closeTime = moment$1(businessDay.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
7848
|
+
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7849
|
+
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7850
|
+
const totalMinutes = displayEnd - displayStart;
|
|
7851
|
+
if (openMinutes < closeMinutes) {
|
|
7852
|
+
const preOpenEnd = openMinutes - 60;
|
|
7853
|
+
if (preOpenEnd > displayStart) {
|
|
7854
|
+
const height = ((preOpenEnd - displayStart) / totalMinutes) * 100;
|
|
7855
|
+
closedBlocks.push(React.createElement("div", { key: "pre-open", className: "calendar-closed-block", style: { top: '0%', height: `${height}%` } },
|
|
7856
|
+
React.createElement("span", { className: "closed-block-label" }, "Closed")));
|
|
7857
|
+
}
|
|
7858
|
+
const bufferStart = Math.max(displayStart, openMinutes - 60);
|
|
7859
|
+
const bufferEnd = openMinutes;
|
|
7860
|
+
if (bufferStart < bufferEnd) {
|
|
7861
|
+
const top = ((bufferStart - displayStart) / totalMinutes) * 100;
|
|
7862
|
+
const height = ((bufferEnd - bufferStart) / totalMinutes) * 100;
|
|
7863
|
+
closedBlocks.push(React.createElement("div", { key: "morning", className: "calendar-closed-block", style: { top: `${top}%`, height: `${height}%` } },
|
|
7864
|
+
React.createElement("span", { className: "closed-block-label" }, "Closed")));
|
|
7865
|
+
}
|
|
7866
|
+
const bufferCloseStart = closeMinutes;
|
|
7867
|
+
const bufferCloseEnd = Math.min(displayEnd, closeMinutes + 60);
|
|
7868
|
+
if (bufferCloseStart < bufferCloseEnd) {
|
|
7869
|
+
const top = ((bufferCloseStart - displayStart) / totalMinutes) * 100;
|
|
7870
|
+
const height = ((bufferCloseEnd - bufferCloseStart) / totalMinutes) * 100;
|
|
7871
|
+
closedBlocks.push(React.createElement("div", { key: "evening", className: "calendar-closed-block", style: { top: `${top}%`, height: `${height}%` } },
|
|
7872
|
+
React.createElement("span", { className: "closed-block-label" }, "Closed")));
|
|
7873
|
+
}
|
|
7874
|
+
const postCloseStart = closeMinutes + 60;
|
|
7875
|
+
if (postCloseStart < displayEnd) {
|
|
7876
|
+
const top = ((postCloseStart - displayStart) / totalMinutes) * 100;
|
|
7877
|
+
const height = ((displayEnd - postCloseStart) / totalMinutes) * 100;
|
|
7878
|
+
closedBlocks.push(React.createElement("div", { key: "post-close", className: "calendar-closed-block", style: { top: `${top}%`, height: `${height}%` } },
|
|
7879
|
+
React.createElement("span", { className: "closed-block-label" }, "Closed")));
|
|
7880
|
+
}
|
|
7881
|
+
}
|
|
7882
|
+
}
|
|
7883
|
+
return (React.createElement("div", { key: day.toString(), className: `day-column ${isClosed ? 'closed-column' : ''}`, onClick: (e) => {
|
|
7884
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
7885
|
+
const y = e.clientY - rect.top;
|
|
7886
|
+
const height = rect.height;
|
|
7887
|
+
const percentage = y / height;
|
|
7888
|
+
const totalMinutes = displayEnd - displayStart;
|
|
7889
|
+
const minutesFromDisplayStart = percentage * totalMinutes;
|
|
7890
|
+
const minutesFromMidnight = displayStart + minutesFromDisplayStart;
|
|
7891
|
+
const clickedTime = day.clone().startOf('day').add(minutesFromMidnight, 'minutes');
|
|
7892
|
+
if (!isClosed && businessDay && businessDay.openTime && businessDay.closeTime) {
|
|
7893
|
+
const openTime = moment$1(businessDay.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7894
|
+
const closeTime = moment$1(businessDay.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
7895
|
+
const clickedMinutes = clickedTime.hours() * 60 + clickedTime.minutes();
|
|
7896
|
+
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7897
|
+
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7898
|
+
if (clickedMinutes < openMinutes || clickedMinutes > closeMinutes) {
|
|
7899
|
+
return;
|
|
7900
|
+
}
|
|
7901
|
+
}
|
|
7902
|
+
if (!isClosed)
|
|
7903
|
+
onTimeSlotClick(clickedTime);
|
|
7904
|
+
} },
|
|
7905
|
+
closedBlocks,
|
|
7906
|
+
visibleBookings
|
|
7907
|
+
.filter(b => moment$1(b.start).tz(timezone).isSame(day, 'day'))
|
|
7908
|
+
.map(booking => {
|
|
7909
|
+
var _a;
|
|
7910
|
+
const pos = dayPositions.get(booking.meeting_id);
|
|
7911
|
+
if (!pos)
|
|
7912
|
+
return null;
|
|
7913
|
+
return (React.createElement("div", { key: booking.meeting_id, className: `calendar-event ${booking.className || ''}`, style: {
|
|
7914
|
+
top: `${pos.top}%`,
|
|
7915
|
+
height: `${pos.height}%`,
|
|
7916
|
+
left: `${pos.left}%`,
|
|
7917
|
+
width: `${pos.width}%`,
|
|
7918
|
+
position: 'absolute'
|
|
7919
|
+
}, onClick: (e) => {
|
|
7920
|
+
e.stopPropagation();
|
|
7921
|
+
if (onBookingClick)
|
|
7922
|
+
onBookingClick(booking);
|
|
7923
|
+
} },
|
|
7924
|
+
React.createElement("div", { className: "event-content" },
|
|
7925
|
+
React.createElement("div", { className: "event-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled'),
|
|
7926
|
+
React.createElement("div", { className: "event-time" },
|
|
7927
|
+
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7928
|
+
" - ",
|
|
7929
|
+
moment$1(booking.end).tz(timezone).format('h:mm A')))));
|
|
7930
|
+
})));
|
|
7931
|
+
})))));
|
|
7932
|
+
};
|
|
7933
|
+
|
|
7934
|
+
const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClick, businessHours, }) => {
|
|
7935
|
+
var _a;
|
|
7936
|
+
const startOfMonth = moment$1(currentDate).tz(timezone).startOf('month');
|
|
7937
|
+
const endOfMonth = moment$1(currentDate).tz(timezone).endOf('month');
|
|
7938
|
+
const startDate = startOfMonth.clone().startOf('week');
|
|
7939
|
+
const endDate = endOfMonth.clone().endOf('week');
|
|
7940
|
+
const rows = [];
|
|
7941
|
+
let days = [];
|
|
7942
|
+
let day = startDate.clone();
|
|
7943
|
+
while (day.isSameOrBefore(endDate, 'day')) {
|
|
7944
|
+
for (let i = 0; i < 7; i++) {
|
|
7945
|
+
const currentDay = day.clone();
|
|
7946
|
+
const dayBookings = bookings.filter(b => moment$1(b.start).tz(timezone).isSame(currentDay, 'day'));
|
|
7947
|
+
const isCurrentMonth = currentDay.isSame(startOfMonth, 'month');
|
|
7948
|
+
const isToday = currentDay.isSame(moment$1().tz(timezone), 'day');
|
|
7949
|
+
const dayName = currentDay.format('dddd');
|
|
7950
|
+
const isClosed = (_a = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed;
|
|
7951
|
+
days.push(React.createElement("div", { key: day.toString(), className: `calendar-cell ${!isCurrentMonth ? 'calendar-cell-disabled' : ''} ${isToday ? 'calendar-cell-today' : ''} ${isClosed ? 'calendar-cell-closed' : ''}`, onClick: () => isCurrentMonth && !isClosed && onDateClick(currentDay) },
|
|
7952
|
+
React.createElement("div", { className: "calendar-cell-header" },
|
|
7953
|
+
React.createElement("span", { className: "calendar-cell-number" }, currentDay.format('D')),
|
|
7954
|
+
isClosed && React.createElement("span", { className: "calendar-closed-label-small" }, "Closed")),
|
|
7955
|
+
React.createElement("div", { className: "calendar-cell-bookings" },
|
|
7956
|
+
dayBookings.slice(0, 3).map((booking) => {
|
|
7957
|
+
var _a;
|
|
7958
|
+
return (React.createElement("div", { key: booking.meeting_id, className: `calendar-booking ${booking.className || ''}`, onClick: (e) => {
|
|
7959
|
+
e.stopPropagation();
|
|
7960
|
+
if (onBookingClick) {
|
|
7961
|
+
onBookingClick(booking);
|
|
7962
|
+
}
|
|
7963
|
+
} },
|
|
7964
|
+
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7965
|
+
React.createElement("span", { className: "calendar-booking-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled')));
|
|
7966
|
+
}),
|
|
7967
|
+
dayBookings.length > 3 && (React.createElement("div", { className: "calendar-booking-more" },
|
|
7968
|
+
"+",
|
|
7969
|
+
dayBookings.length - 3,
|
|
7970
|
+
" more")))));
|
|
7971
|
+
day.add(1, 'days');
|
|
7972
|
+
}
|
|
7973
|
+
rows.push(React.createElement("div", { key: day.toString(), className: "calendar-row" }, days));
|
|
7974
|
+
days = [];
|
|
7975
|
+
}
|
|
7976
|
+
return (React.createElement("div", { className: "month-view-container" },
|
|
7977
|
+
React.createElement("div", { className: "calendar-days-row" }, ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => (React.createElement("div", { key: d, className: "calendar-day-header" }, d)))),
|
|
7978
|
+
React.createElement("div", { className: "calendar-body" }, rows)));
|
|
7979
|
+
};
|
|
7980
|
+
|
|
7981
|
+
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 background-color: #fff;\n display: flex;\n flex-direction: column;\n height: 100%;\n /* Use 100% height of parent */\n max-height: 100vh;\n /* Ensure it doesn't exceed viewport */\n min-height: 600px;\n /* Minimum height fallback */\n /* Minimum height fallback */\n overflow: hidden;\n}\n\n/* Header */\n.calendar-header {\n padding: 16px;\n border-bottom: 1px solid #e0e0e0;\n background-color: #fff;\n}\n\n.calendar-title-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.calendar-title {\n margin: 0;\n font-size: 1.5rem;\n color: #333;\n}\n\n.calendar-view-toggle {\n display: flex;\n background-color: #f5f5f5;\n border-radius: 6px;\n padding: 2px;\n}\n\n.calendar-btn {\n padding: 8px 16px;\n border: 1px solid #e0e0e0;\n background-color: #fff;\n cursor: pointer;\n border-radius: 4px;\n font-size: 14px;\n transition: all 0.2s;\n}\n\n.calendar-btn:hover {\n background-color: #f5f5f5;\n}\n\n.calendar-btn-view {\n border: none;\n background: transparent;\n border-radius: 4px;\n padding: 6px 12px;\n}\n\n.calendar-btn-view.active {\n background-color: #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n font-weight: 600;\n}\n\n.calendar-btn-create {\n background-color: #0078d4;\n color: white;\n border: none;\n}\n\n.calendar-btn-create:hover {\n background-color: #106ebe;\n}\n\n.calendar-navigation {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.calendar-current-month {\n font-size: 1.1rem;\n font-weight: 600;\n margin-left: 16px;\n color: #333;\n}\n\n/* Content Area */\n.calendar-content {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n/* Month View */\n.month-view-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n /* Prevent container scrolling, let body scroll */\n}\n\n.calendar-days-row {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n /* Ensure equal columns */\n border-bottom: 1px solid #e0e0e0;\n background-color: #f9f9f9;\n}\n\n.calendar-day-header {\n padding: 10px;\n text-align: center;\n font-weight: 600;\n color: #666;\n font-size: 0.9rem;\n overflow: hidden;\n /* Prevent overflow */\n text-overflow: ellipsis;\n}\n\n.calendar-body {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-y: auto;\n /* Scrollable body */\n}\n\n.calendar-row {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n /* Ensure equal columns */\n flex: 1;\n min-height: 100px;\n /* Minimum row height */\n border-bottom: 1px solid #e0e0e0;\n}\n\n.calendar-cell {\n border-right: 1px solid #e0e0e0;\n padding: 8px;\n position: relative;\n cursor: pointer;\n transition: background-color 0.2s;\n overflow: hidden;\n /* Prevent cell expansion */\n min-width: 0;\n /* Allow shrinking below content size */\n}\n\n.calendar-cell:hover {\n background-color: #fcfcfc;\n}\n\n.calendar-cell-disabled {\n background-color: #f9f9f9;\n color: #999;\n}\n\n.calendar-cell-today {\n background-color: #e6f2ff;\n}\n\n.calendar-cell-closed {\n background-color: #f5f5f5;\n cursor: not-allowed;\n}\n\n.calendar-cell-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n}\n\n.calendar-cell-number {\n font-weight: 600;\n font-size: 0.9rem;\n}\n\n.calendar-closed-label-small {\n font-size: 0.7rem;\n color: #d13438;\n background: #fde7e9;\n padding: 2px 4px;\n border-radius: 3px;\n}\n\n.calendar-cell-bookings {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.calendar-booking {\n background-color: #e1dfdd;\n /* Default neutral color */\n border-left: 3px solid #0078d4;\n padding: 4px 6px;\n border-radius: 2px;\n font-size: 0.8rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n position: relative;\n /* For tooltip positioning */\n}\n\n.calendar-booking:hover {\n background-color: #d0d0d0;\n}\n\n.calendar-booking-time {\n font-weight: 600;\n margin-right: 4px;\n}\n\n.calendar-booking-more {\n font-size: 0.8rem;\n color: #666;\n padding: 2px 4px;\n}\n\n/* Time Grid (Day/Week/WorkWeek) */\n.time-grid-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n}\n\n.time-grid-header {\n display: flex;\n border-bottom: 1px solid #e0e0e0;\n padding-right: 17px;\n /* Adjust for scrollbar */\n}\n\n.time-column-header {\n width: 60px;\n /* Width of time labels column */\n flex-shrink: 0;\n border-right: 1px solid #e0e0e0;\n}\n\n.day-column-header {\n flex: 1;\n text-align: center;\n padding: 8px;\n border-right: 1px solid #e0e0e0;\n background-color: #f9f9f9;\n min-width: 0;\n /* Prevent expansion */\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.day-column-header.today {\n background-color: #e6f2ff;\n color: #0078d4;\n}\n\n.day-column-header.closed {\n background-color: #f0f0f0;\n color: #999;\n}\n\n.day-name {\n font-size: 0.8rem;\n text-transform: uppercase;\n color: #666;\n}\n\n.day-number {\n font-size: 1.2rem;\n font-weight: 600;\n}\n\n.time-grid-body {\n display: flex;\n flex: 1;\n overflow-y: auto;\n position: relative;\n}\n\n.time-labels-column {\n width: 60px;\n flex-shrink: 0;\n border-right: 1px solid #e0e0e0;\n background-color: #fff;\n}\n\n.time-label {\n height: 60px;\n /* 1 hour height */\n text-align: right;\n padding-right: 8px;\n font-size: 0.75rem;\n color: #666;\n justify-content: center;\n}\n\n.days-grid {\n flex: 1;\n display: flex;\n position: relative;\n /* 24 hours * 60px/hour = 1440px total height */\n height: 1440px;\n}\n\n.grid-lines {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n.grid-hour-row {\n height: 60px;\n border-bottom: 1px solid #e0e0e0;\n box-sizing: border-box;\n}\n\n.grid-hour-row:last-child {\n border-bottom: none;\n}\n\n.day-column {\n flex: 1;\n border-right: 1px solid #e0e0e0;\n position: relative;\n height: 100%;\n min-width: 0;\n /* Critical for flex containers to not expand based on content */\n}\n\n.day-column.closed-column {\n background-color: repeating-linear-gradient(45deg,\n #fbfbfb,\n #fbfbfb 10px,\n #f5f5f5 10px,\n #f5f5f5 20px);\n}\n\n.calendar-event {\n background-color: #e1dfdd;\n border-left: 4px solid #0078d4;\n border-radius: 3px;\n padding: 2px 4px;\n font-size: 0.75rem;\n overflow: hidden;\n cursor: pointer;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n z-index: 1;\n transition: transform 0.1s, z-index 0.1s;\n}\n\n.calendar-event:hover {\n z-index: 10;\n /* Bring to front on hover */\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.event-content {\n height: 100%;\n overflow: hidden;\n}\n\n.event-title {\n font-weight: 600;\n margin-bottom: 2px;\n}\n\n.event-time {\n font-size: 0.7rem;\n color: #555;\n}\n\n/* Tooltip Styles */\n.event-tooltip {\n display: none;\n position: absolute;\n left: 100%;\n top: 0;\n background: white;\n border: 1px solid #ccc;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n padding: 10px;\n border-radius: 4px;\n width: 200px;\n z-index: 100;\n pointer-events: none;\n}\n\n/* Show tooltip on hover */\n.calendar-booking:hover .event-tooltip,\n.calendar-event:hover .event-tooltip {\n display: block;\n}\n\n/* Adjust tooltip position if it goes offscreen (simple right-side check) */\n/* Note: A real production app would use a library like Popper.js */\n.day-column:last-child .event-tooltip,\n.day-column:nth-last-child(2) .event-tooltip {\n left: auto;\n right: 100%;\n}\n\n.tooltip-title {\n font-weight: bold;\n margin-bottom: 8px;\n border-bottom: 1px solid #eee;\n padding-bottom: 4px;\n}\n\n.tooltip-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px;\n font-size: 0.85rem;\n}\n\n.tooltip-label {\n color: #666;\n margin-right: 8px;\n}\n\n.tooltip-value {\n font-weight: 500;\n text-align: right;\n}\n\n/* Loading & Error */\n.calendar-loading,\n.calendar-error {\n padding: 20px;\n text-align: center;\n color: #666;\n}\n\n.calendar-error {\n color: #d13438;\n}\n\n/* Closed Block Styles */\n.calendar-closed-block {\n position: absolute;\n left: 0;\n right: 0;\n background-color: #f0f0f0;\n background-image: repeating-linear-gradient(45deg,\n #f0f0f0,\n #f0f0f0 10px,\n #e8e8e8 10px,\n #e8e8e8 20px);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 5;\n /* Below events but above grid lines */\n pointer-events: none;\n /* Allow clicks to pass through if needed, though we block clicks in JS */\n border-bottom: 1px solid #ddd;\n border-top: 1px solid #ddd;\n}\n\n.closed-block-label {\n background-color: rgba(255, 255, 255, 0.8);\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 0.8rem;\n color: #888;\n font-weight: 500;\n}";
|
|
7535
7982
|
styleInject(css_248z);
|
|
7536
7983
|
|
|
7537
7984
|
const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
@@ -7542,6 +7989,19 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7542
7989
|
const [error, setError] = React.useState(null);
|
|
7543
7990
|
const [showCreateModal, setShowCreateModal] = React.useState(false);
|
|
7544
7991
|
const [selectedDate, setSelectedDate] = React.useState(null);
|
|
7992
|
+
const [selectedBooking, setSelectedBooking] = React.useState(null);
|
|
7993
|
+
// Mobile responsiveness logic
|
|
7994
|
+
React.useEffect(() => {
|
|
7995
|
+
const handleResize = () => {
|
|
7996
|
+
if (isMobile()) {
|
|
7997
|
+
setCurrentView('day');
|
|
7998
|
+
}
|
|
7999
|
+
};
|
|
8000
|
+
// Initial check
|
|
8001
|
+
handleResize();
|
|
8002
|
+
window.addEventListener('resize', handleResize);
|
|
8003
|
+
return () => window.removeEventListener('resize', handleResize);
|
|
8004
|
+
}, []);
|
|
7545
8005
|
// Update currentDate when timezone changes
|
|
7546
8006
|
React.useEffect(() => {
|
|
7547
8007
|
setCurrentDate((prev) => moment$1(prev).tz(timezone));
|
|
@@ -7563,6 +8023,10 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7563
8023
|
startDate = current.clone().startOf('week');
|
|
7564
8024
|
endDate = current.clone().endOf('week');
|
|
7565
8025
|
}
|
|
8026
|
+
else if (currentView === 'workWeek') {
|
|
8027
|
+
startDate = current.clone().startOf('week'); // Fetch full week to be safe
|
|
8028
|
+
endDate = current.clone().endOf('week');
|
|
8029
|
+
}
|
|
7566
8030
|
else {
|
|
7567
8031
|
startDate = current.clone().startOf('day');
|
|
7568
8032
|
endDate = current.clone().endOf('day');
|
|
@@ -7591,7 +8055,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7591
8055
|
if (currentView === 'month') {
|
|
7592
8056
|
newDate.subtract(1, 'months');
|
|
7593
8057
|
}
|
|
7594
|
-
else if (currentView === 'week') {
|
|
8058
|
+
else if (currentView === 'week' || currentView === 'workWeek') {
|
|
7595
8059
|
newDate.subtract(1, 'weeks');
|
|
7596
8060
|
}
|
|
7597
8061
|
else {
|
|
@@ -7604,7 +8068,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7604
8068
|
if (currentView === 'month') {
|
|
7605
8069
|
newDate.add(1, 'months');
|
|
7606
8070
|
}
|
|
7607
|
-
else if (currentView === 'week') {
|
|
8071
|
+
else if (currentView === 'week' || currentView === 'workWeek') {
|
|
7608
8072
|
newDate.add(1, 'weeks');
|
|
7609
8073
|
}
|
|
7610
8074
|
else {
|
|
@@ -7627,18 +8091,19 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7627
8091
|
onBookingCreate(booking);
|
|
7628
8092
|
}
|
|
7629
8093
|
});
|
|
7630
|
-
const
|
|
7631
|
-
|
|
7632
|
-
|
|
7633
|
-
|
|
7634
|
-
|
|
8094
|
+
const handleInternalBookingClick = (booking) => {
|
|
8095
|
+
setSelectedBooking(booking);
|
|
8096
|
+
// Also call the external callback if provided
|
|
8097
|
+
if (onBookingClick) {
|
|
8098
|
+
onBookingClick(booking);
|
|
8099
|
+
}
|
|
7635
8100
|
};
|
|
7636
8101
|
const getHeaderDateFormat = () => {
|
|
7637
8102
|
const current = moment$1(currentDate).tz(timezone);
|
|
7638
8103
|
if (currentView === 'month') {
|
|
7639
8104
|
return current.format('MMMM YYYY');
|
|
7640
8105
|
}
|
|
7641
|
-
else if (currentView === 'week') {
|
|
8106
|
+
else if (currentView === 'week' || currentView === 'workWeek') {
|
|
7642
8107
|
const weekStart = current.clone().startOf('week');
|
|
7643
8108
|
const weekEnd = current.clone().endOf('week');
|
|
7644
8109
|
return `${weekStart.format('MMM D')} - ${weekEnd.format('MMM D, YYYY')}`;
|
|
@@ -7647,143 +8112,16 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7647
8112
|
return current.format('MMMM D, YYYY');
|
|
7648
8113
|
}
|
|
7649
8114
|
};
|
|
7650
|
-
const renderHeader = () => {
|
|
7651
|
-
return (React.createElement("div", { className: "calendar-header" },
|
|
7652
|
-
React.createElement("div", { className: "calendar-title-section" },
|
|
7653
|
-
React.createElement("h2", { className: "calendar-title" }, title),
|
|
7654
|
-
React.createElement("div", { className: "calendar-view-toggle" },
|
|
7655
|
-
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'month' ? 'active' : ''}`, onClick: () => setCurrentView('month') }, "Month"),
|
|
7656
|
-
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => setCurrentView('week') }, "Week"),
|
|
7657
|
-
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => setCurrentView('day') }, "Day")),
|
|
7658
|
-
React.createElement("button", { className: "calendar-btn calendar-btn-create", onClick: () => setShowCreateModal(true) }, "+ Create Booking")),
|
|
7659
|
-
React.createElement("div", { className: "calendar-navigation" },
|
|
7660
|
-
React.createElement("button", { className: "calendar-btn", onClick: handlePrevious }, "\u2039"),
|
|
7661
|
-
React.createElement("button", { className: "calendar-btn", onClick: handleToday }, "Today"),
|
|
7662
|
-
React.createElement("button", { className: "calendar-btn", onClick: handleNext }, "\u203A"),
|
|
7663
|
-
React.createElement("span", { className: "calendar-current-month" }, getHeaderDateFormat()))));
|
|
7664
|
-
};
|
|
7665
|
-
const renderDaysOfWeek = () => {
|
|
7666
|
-
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
7667
|
-
return (React.createElement("div", { className: "calendar-days-row" }, days.map((day) => (React.createElement("div", { key: day, className: "calendar-day-header" }, day)))));
|
|
7668
|
-
};
|
|
7669
|
-
const renderMonthView = () => {
|
|
7670
|
-
var _a;
|
|
7671
|
-
const current = moment$1(currentDate).tz(timezone);
|
|
7672
|
-
const monthStart = current.clone().startOf('month');
|
|
7673
|
-
const monthEnd = current.clone().endOf('month');
|
|
7674
|
-
const startDate = monthStart.clone().startOf('week');
|
|
7675
|
-
const endDate = monthEnd.clone().endOf('week');
|
|
7676
|
-
const rows = [];
|
|
7677
|
-
let days = [];
|
|
7678
|
-
let day = startDate.clone();
|
|
7679
|
-
while (day.isSameOrBefore(endDate, 'day')) {
|
|
7680
|
-
for (let i = 0; i < 7; i++) {
|
|
7681
|
-
const currentDay = day.clone();
|
|
7682
|
-
const dayBookings = getBookingsForDay(currentDay);
|
|
7683
|
-
const isCurrentMonth = currentDay.isSame(monthStart, 'month');
|
|
7684
|
-
const isToday = currentDay.isSame(moment$1().tz(timezone), 'day');
|
|
7685
|
-
// Check business hours
|
|
7686
|
-
const dayName = currentDay.format('dddd');
|
|
7687
|
-
const isClosed = (_a = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed;
|
|
7688
|
-
days.push(React.createElement("div", { key: day.toString(), className: `calendar-cell ${!isCurrentMonth ? 'calendar-cell-disabled' : ''} ${isToday ? 'calendar-cell-today' : ''} ${isClosed ? 'calendar-cell-closed' : ''}`, onClick: () => isCurrentMonth && !isClosed && handleDateClick(currentDay), style: isClosed ? { backgroundColor: '#f5f5f5', cursor: 'not-allowed' } : {} },
|
|
7689
|
-
React.createElement("div", { className: "calendar-cell-number" }, currentDay.format('D')),
|
|
7690
|
-
isClosed && React.createElement("div", { className: "calendar-closed-label" }, "Closed"),
|
|
7691
|
-
React.createElement("div", { className: "calendar-cell-bookings" },
|
|
7692
|
-
dayBookings.slice(0, 3).map((booking) => {
|
|
7693
|
-
var _a, _b;
|
|
7694
|
-
return (React.createElement("div", { key: booking.meeting_id, className: "calendar-booking", onClick: (e) => {
|
|
7695
|
-
e.stopPropagation();
|
|
7696
|
-
if (onBookingClick) {
|
|
7697
|
-
onBookingClick(booking);
|
|
7698
|
-
}
|
|
7699
|
-
}, title: ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled' },
|
|
7700
|
-
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7701
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled')));
|
|
7702
|
-
}),
|
|
7703
|
-
dayBookings.length > 3 && (React.createElement("div", { className: "calendar-booking-more" },
|
|
7704
|
-
"+",
|
|
7705
|
-
dayBookings.length - 3,
|
|
7706
|
-
" more")))));
|
|
7707
|
-
day.add(1, 'days');
|
|
7708
|
-
}
|
|
7709
|
-
rows.push(React.createElement("div", { key: day.toString(), className: "calendar-row" }, days));
|
|
7710
|
-
days = [];
|
|
7711
|
-
}
|
|
7712
|
-
return React.createElement("div", { className: "calendar-body" }, rows);
|
|
7713
|
-
};
|
|
7714
|
-
const renderWeekView = () => {
|
|
7715
|
-
var _a;
|
|
7716
|
-
const current = moment$1(currentDate).tz(timezone);
|
|
7717
|
-
const weekStart = current.clone().startOf('week');
|
|
7718
|
-
const days = [];
|
|
7719
|
-
for (let i = 0; i < 7; i++) {
|
|
7720
|
-
const day = weekStart.clone().add(i, 'days');
|
|
7721
|
-
const dayBookings = getBookingsForDay(day);
|
|
7722
|
-
const isToday = day.isSame(moment$1().tz(timezone), 'day');
|
|
7723
|
-
const dayName = day.format('dddd');
|
|
7724
|
-
const isClosed = (_a = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed;
|
|
7725
|
-
days.push(React.createElement("div", { key: day.toString(), className: `calendar-week-day ${isToday ? 'calendar-cell-today' : ''}`, onClick: () => !isClosed && handleDateClick(day), style: isClosed ? { backgroundColor: '#f5f5f5' } : {} },
|
|
7726
|
-
React.createElement("div", { className: "calendar-week-day-header" },
|
|
7727
|
-
React.createElement("div", { className: "calendar-week-day-name" }, day.format('EEE')),
|
|
7728
|
-
React.createElement("div", { className: "calendar-week-day-number" }, day.format('D')),
|
|
7729
|
-
isClosed && React.createElement("div", { className: "calendar-closed-label-small" }, "Closed")),
|
|
7730
|
-
React.createElement("div", { className: "calendar-week-day-bookings" }, dayBookings.map((booking) => {
|
|
7731
|
-
var _a, _b;
|
|
7732
|
-
return (React.createElement("div", { key: booking.meeting_id, className: "calendar-booking calendar-week-booking", onClick: (e) => {
|
|
7733
|
-
e.stopPropagation();
|
|
7734
|
-
if (onBookingClick) {
|
|
7735
|
-
onBookingClick(booking);
|
|
7736
|
-
}
|
|
7737
|
-
}, title: ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled' },
|
|
7738
|
-
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7739
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled')));
|
|
7740
|
-
}))));
|
|
7741
|
-
}
|
|
7742
|
-
return React.createElement("div", { className: "calendar-week-view" }, days);
|
|
7743
|
-
};
|
|
7744
|
-
const renderDayView = () => {
|
|
7745
|
-
const current = moment$1(currentDate).tz(timezone);
|
|
7746
|
-
const dayBookings = getBookingsForDay(current);
|
|
7747
|
-
const isToday = current.isSame(moment$1().tz(timezone), 'day');
|
|
7748
|
-
const dayName = current.format('dddd');
|
|
7749
|
-
const businessDay = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName];
|
|
7750
|
-
const isClosed = businessDay === null || businessDay === void 0 ? void 0 : businessDay.isClosed;
|
|
7751
|
-
return (React.createElement("div", { className: "calendar-day-view" },
|
|
7752
|
-
React.createElement("div", { className: `calendar-day-container ${isToday ? 'calendar-cell-today' : ''}` },
|
|
7753
|
-
React.createElement("div", { className: "calendar-day-header" },
|
|
7754
|
-
React.createElement("div", { className: "calendar-day-name" }, current.format('dddd')),
|
|
7755
|
-
React.createElement("div", { className: "calendar-day-date" }, current.format('MMMM D, YYYY')),
|
|
7756
|
-
isClosed ? (React.createElement("div", { className: "calendar-status-closed" }, "Closed")) : businessDay ? (React.createElement("div", { className: "calendar-status-open" },
|
|
7757
|
-
"Open: ",
|
|
7758
|
-
businessDay.openTime,
|
|
7759
|
-
" - ",
|
|
7760
|
-
businessDay.closeTime)) : null),
|
|
7761
|
-
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) => {
|
|
7762
|
-
var _a, _b, _c;
|
|
7763
|
-
return (React.createElement("div", { key: booking.meeting_id, className: "calendar-booking calendar-day-booking", onClick: () => {
|
|
7764
|
-
if (onBookingClick) {
|
|
7765
|
-
onBookingClick(booking);
|
|
7766
|
-
}
|
|
7767
|
-
}, title: ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled' },
|
|
7768
|
-
React.createElement("span", { className: "calendar-booking-time" },
|
|
7769
|
-
moment$1(booking.start).tz(timezone).format('HH:mm'),
|
|
7770
|
-
" - ",
|
|
7771
|
-
moment$1(booking.end).tz(timezone).format('HH:mm')),
|
|
7772
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7773
|
-
((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.description) && (React.createElement("span", { className: "calendar-booking-description" }, booking.metadata.description))));
|
|
7774
|
-
}))),
|
|
7775
|
-
!isClosed && (React.createElement("button", { className: "calendar-btn calendar-day-add-btn", onClick: () => handleDateClick(current) }, "+ Add Booking")))));
|
|
7776
|
-
};
|
|
7777
8115
|
return (React.createElement("div", { className: "calendar-container" },
|
|
7778
|
-
|
|
8116
|
+
React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday, onCreateClick: () => {
|
|
8117
|
+
setSelectedDate(moment$1().tz(timezone).toDate());
|
|
8118
|
+
setShowCreateModal(true);
|
|
8119
|
+
}, dateRangeText: getHeaderDateFormat() }),
|
|
7779
8120
|
error && React.createElement("div", { className: "calendar-error" }, error),
|
|
7780
8121
|
loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
|
|
7781
|
-
currentView === 'month'
|
|
7782
|
-
|
|
7783
|
-
|
|
7784
|
-
currentView === 'week' && renderWeekView(),
|
|
7785
|
-
currentView === 'day' && renderDayView(),
|
|
7786
|
-
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) }))));
|
|
7787
8125
|
};
|
|
7788
8126
|
|
|
7789
8127
|
exports.Calendar = Calendar;
|