@dialiq/calendar-component 1.0.4 → 1.1.0
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/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 +445 -144
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +444 -143
- 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.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect, useCallback } from 'react';
|
|
1
|
+
import React, { useState, useMemo, useEffect, useCallback } from 'react';
|
|
2
2
|
|
|
3
3
|
/******************************************************************************
|
|
4
4
|
Copyright (c) Microsoft Corporation.
|
|
@@ -7529,7 +7529,426 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7529
7529
|
React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
|
|
7530
7530
|
};
|
|
7531
7531
|
|
|
7532
|
-
|
|
7532
|
+
const getWeekDays = (currentDate, view, businessHours) => {
|
|
7533
|
+
const startOfWeek = currentDate.clone().startOf('week');
|
|
7534
|
+
const days = [];
|
|
7535
|
+
// Generate all 7 days of the week first
|
|
7536
|
+
for (let i = 0; i < 7; i++) {
|
|
7537
|
+
days.push(startOfWeek.clone().add(i, 'days'));
|
|
7538
|
+
}
|
|
7539
|
+
if (view === 'workWeek') {
|
|
7540
|
+
if (businessHours) {
|
|
7541
|
+
// Filter based on business hours
|
|
7542
|
+
return days.filter(day => {
|
|
7543
|
+
var _a;
|
|
7544
|
+
const dayName = day.format('dddd');
|
|
7545
|
+
return !((_a = businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed);
|
|
7546
|
+
});
|
|
7547
|
+
}
|
|
7548
|
+
else {
|
|
7549
|
+
// Default to 7 days (24/7) if no business hours provided
|
|
7550
|
+
return days;
|
|
7551
|
+
}
|
|
7552
|
+
}
|
|
7553
|
+
return days;
|
|
7554
|
+
};
|
|
7555
|
+
const calculateEventPositions = (bookings, timezone) => {
|
|
7556
|
+
const positions = new Map();
|
|
7557
|
+
// Sort bookings by start time
|
|
7558
|
+
const sortedBookings = [...bookings].sort((a, b) => {
|
|
7559
|
+
const startA = moment$1(a.start).tz(timezone);
|
|
7560
|
+
const startB = moment$1(b.start).tz(timezone);
|
|
7561
|
+
return startA.diff(startB);
|
|
7562
|
+
});
|
|
7563
|
+
// Group overlapping events
|
|
7564
|
+
const columns = [];
|
|
7565
|
+
sortedBookings.forEach(booking => {
|
|
7566
|
+
const start = moment$1(booking.start).tz(timezone);
|
|
7567
|
+
const end = moment$1(booking.end).tz(timezone);
|
|
7568
|
+
// Simple vertical position calculation (0-24 hours mapped to 0-100%)
|
|
7569
|
+
const startMinutes = start.hours() * 60 + start.minutes();
|
|
7570
|
+
const durationMinutes = end.diff(start, 'minutes');
|
|
7571
|
+
const top = (startMinutes / 1440) * 100;
|
|
7572
|
+
const height = (durationMinutes / 1440) * 100;
|
|
7573
|
+
// Overlap logic: Find a column where this event fits
|
|
7574
|
+
let placed = false;
|
|
7575
|
+
for (let i = 0; i < columns.length; i++) {
|
|
7576
|
+
const column = columns[i];
|
|
7577
|
+
const lastInColumn = column[column.length - 1];
|
|
7578
|
+
const lastInColumnEnd = moment$1(lastInColumn.end).tz(timezone);
|
|
7579
|
+
if (start.isSameOrAfter(lastInColumnEnd)) {
|
|
7580
|
+
column.push(booking);
|
|
7581
|
+
placed = true;
|
|
7582
|
+
break;
|
|
7583
|
+
}
|
|
7584
|
+
}
|
|
7585
|
+
if (!placed) {
|
|
7586
|
+
columns.push([booking]);
|
|
7587
|
+
}
|
|
7588
|
+
// Store temporary data to be refined
|
|
7589
|
+
positions.set(booking.meeting_id, { top, height, left: 0, width: 0 }); // Placeholder
|
|
7590
|
+
});
|
|
7591
|
+
// Refine positions based on columns
|
|
7592
|
+
// Let's try a standard "expand to fill" algorithm
|
|
7593
|
+
// Iterate through sorted bookings again to find "clusters"
|
|
7594
|
+
let cluster = [];
|
|
7595
|
+
let clusterEnd = null;
|
|
7596
|
+
for (let i = 0; i < sortedBookings.length; i++) {
|
|
7597
|
+
const booking = sortedBookings[i];
|
|
7598
|
+
const start = moment$1(booking.start).tz(timezone);
|
|
7599
|
+
const end = moment$1(booking.end).tz(timezone);
|
|
7600
|
+
if (clusterEnd === null || start.isBefore(clusterEnd)) {
|
|
7601
|
+
cluster.push(booking);
|
|
7602
|
+
if (clusterEnd === null || end.isAfter(clusterEnd)) {
|
|
7603
|
+
clusterEnd = end;
|
|
7604
|
+
}
|
|
7605
|
+
}
|
|
7606
|
+
else {
|
|
7607
|
+
// Process completed cluster
|
|
7608
|
+
processCluster(cluster, positions, timezone);
|
|
7609
|
+
cluster = [booking];
|
|
7610
|
+
clusterEnd = end;
|
|
7611
|
+
}
|
|
7612
|
+
}
|
|
7613
|
+
// Process last cluster
|
|
7614
|
+
if (cluster.length > 0) {
|
|
7615
|
+
processCluster(cluster, positions, timezone);
|
|
7616
|
+
}
|
|
7617
|
+
return positions;
|
|
7618
|
+
};
|
|
7619
|
+
const processCluster = (cluster, positions, timezone) => {
|
|
7620
|
+
// This is a simplified layout algorithm.
|
|
7621
|
+
// We will use a "columns" approach where we pack events into columns.
|
|
7622
|
+
const columns = [];
|
|
7623
|
+
cluster.forEach(booking => {
|
|
7624
|
+
const start = moment$1(booking.start).tz(timezone);
|
|
7625
|
+
let placed = false;
|
|
7626
|
+
for (let i = 0; i < columns.length; i++) {
|
|
7627
|
+
const lastInCol = columns[i][columns[i].length - 1];
|
|
7628
|
+
const lastEnd = moment$1(lastInCol.end).tz(timezone);
|
|
7629
|
+
if (start.isSameOrAfter(lastEnd)) {
|
|
7630
|
+
columns[i].push(booking);
|
|
7631
|
+
placed = true;
|
|
7632
|
+
break;
|
|
7633
|
+
}
|
|
7634
|
+
}
|
|
7635
|
+
if (!placed) {
|
|
7636
|
+
columns.push([booking]);
|
|
7637
|
+
}
|
|
7638
|
+
});
|
|
7639
|
+
const numColumns = columns.length;
|
|
7640
|
+
const width = 100 / numColumns;
|
|
7641
|
+
columns.forEach((col, colIndex) => {
|
|
7642
|
+
col.forEach(booking => {
|
|
7643
|
+
const pos = positions.get(booking.meeting_id);
|
|
7644
|
+
if (pos) {
|
|
7645
|
+
pos.left = colIndex * width;
|
|
7646
|
+
pos.width = width;
|
|
7647
|
+
positions.set(booking.meeting_id, pos);
|
|
7648
|
+
}
|
|
7649
|
+
});
|
|
7650
|
+
});
|
|
7651
|
+
};
|
|
7652
|
+
const isMobile = () => {
|
|
7653
|
+
if (typeof window !== 'undefined') {
|
|
7654
|
+
return window.innerWidth < 768;
|
|
7655
|
+
}
|
|
7656
|
+
return false;
|
|
7657
|
+
};
|
|
7658
|
+
|
|
7659
|
+
const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday, onCreateClick, dateRangeText, }) => {
|
|
7660
|
+
const mobile = isMobile();
|
|
7661
|
+
return (React.createElement("div", { className: "calendar-header" },
|
|
7662
|
+
React.createElement("div", { className: "calendar-title-section" },
|
|
7663
|
+
React.createElement("h2", { className: "calendar-title" }, title),
|
|
7664
|
+
React.createElement("div", { className: "calendar-view-toggle" },
|
|
7665
|
+
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'month' ? 'active' : ''}`, onClick: () => onViewChange('month'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Month"),
|
|
7666
|
+
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => onViewChange('week'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Week"),
|
|
7667
|
+
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'workWeek' ? 'active' : ''}`, onClick: () => onViewChange('workWeek'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Work Week"),
|
|
7668
|
+
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => onViewChange('day') }, "Day")),
|
|
7669
|
+
React.createElement("button", { className: "calendar-btn calendar-btn-create", onClick: onCreateClick }, "+ Create Booking")),
|
|
7670
|
+
React.createElement("div", { className: "calendar-navigation" },
|
|
7671
|
+
React.createElement("button", { className: "calendar-btn", onClick: onPrevious }, "\u2039"),
|
|
7672
|
+
React.createElement("button", { className: "calendar-btn", onClick: onToday }, "Today"),
|
|
7673
|
+
React.createElement("button", { className: "calendar-btn", onClick: onNext }, "\u203A"),
|
|
7674
|
+
React.createElement("span", { className: "calendar-current-month" }, dateRangeText))));
|
|
7675
|
+
};
|
|
7676
|
+
|
|
7677
|
+
const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTimeSlotClick, businessHours, }) => {
|
|
7678
|
+
const days = useMemo(() => {
|
|
7679
|
+
if (view === 'day') {
|
|
7680
|
+
return [moment$1(currentDate).tz(timezone)];
|
|
7681
|
+
}
|
|
7682
|
+
return getWeekDays(moment$1(currentDate).tz(timezone), view, businessHours);
|
|
7683
|
+
}, [currentDate, view, timezone, businessHours]);
|
|
7684
|
+
const { displayStart, displayEnd, timeLabels } = useMemo(() => {
|
|
7685
|
+
if (!businessHours) {
|
|
7686
|
+
return {
|
|
7687
|
+
displayStart: 0,
|
|
7688
|
+
displayEnd: 1440,
|
|
7689
|
+
timeLabels: Array.from({ length: 24 }, (_, i) => i * 60)
|
|
7690
|
+
};
|
|
7691
|
+
}
|
|
7692
|
+
let longestDayOpen = 0;
|
|
7693
|
+
let longestDayClose = 0;
|
|
7694
|
+
let maxDuration = 0;
|
|
7695
|
+
days.forEach(day => {
|
|
7696
|
+
const dayName = day.format('dddd');
|
|
7697
|
+
const dayHours = businessHours[dayName];
|
|
7698
|
+
console.log('Day:', dayName, 'Hours:', dayHours);
|
|
7699
|
+
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)) {
|
|
7700
|
+
const openTime = moment$1(dayHours.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7701
|
+
const closeTime = moment$1(dayHours.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
7702
|
+
if (!openTime.isValid() || !closeTime.isValid()) {
|
|
7703
|
+
console.warn('Invalid time format:', dayHours.openTime, dayHours.closeTime);
|
|
7704
|
+
return;
|
|
7705
|
+
}
|
|
7706
|
+
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7707
|
+
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7708
|
+
const duration = closeMinutes - openMinutes;
|
|
7709
|
+
console.log(' Open:', dayHours.openTime, '->', openMinutes, '| Close:', dayHours.closeTime, '->', closeMinutes, '| Duration:', duration);
|
|
7710
|
+
if (openMinutes < closeMinutes && duration > maxDuration) {
|
|
7711
|
+
maxDuration = duration;
|
|
7712
|
+
longestDayOpen = openMinutes;
|
|
7713
|
+
longestDayClose = closeMinutes;
|
|
7714
|
+
}
|
|
7715
|
+
}
|
|
7716
|
+
});
|
|
7717
|
+
console.log('Longest: open =', longestDayOpen, 'close =', longestDayClose);
|
|
7718
|
+
if (maxDuration === 0) {
|
|
7719
|
+
return {
|
|
7720
|
+
displayStart: 0,
|
|
7721
|
+
displayEnd: 1440,
|
|
7722
|
+
timeLabels: Array.from({ length: 24 }, (_, i) => i * 60)
|
|
7723
|
+
};
|
|
7724
|
+
}
|
|
7725
|
+
const displayStart = Math.max(0, longestDayOpen - 60);
|
|
7726
|
+
const displayEnd = Math.min(1440, longestDayClose + 60);
|
|
7727
|
+
const labels = [];
|
|
7728
|
+
const startHour = Math.floor(displayStart / 60);
|
|
7729
|
+
const endHour = Math.floor(displayEnd / 60);
|
|
7730
|
+
for (let h = startHour; h <= endHour; h++) {
|
|
7731
|
+
const hourInMinutes = h * 60;
|
|
7732
|
+
if (hourInMinutes < displayEnd && hourInMinutes >= displayStart) {
|
|
7733
|
+
labels.push(hourInMinutes);
|
|
7734
|
+
}
|
|
7735
|
+
}
|
|
7736
|
+
return { displayStart, displayEnd, timeLabels: labels };
|
|
7737
|
+
}, [days, businessHours]);
|
|
7738
|
+
const visibleBookings = useMemo(() => {
|
|
7739
|
+
if (days.length === 0)
|
|
7740
|
+
return [];
|
|
7741
|
+
const start = days[0].clone().startOf('day');
|
|
7742
|
+
const end = days[days.length - 1].clone().endOf('day');
|
|
7743
|
+
return bookings.filter(b => {
|
|
7744
|
+
const bStart = moment$1(b.start).tz(timezone);
|
|
7745
|
+
const bEnd = moment$1(b.end).tz(timezone);
|
|
7746
|
+
return bStart.isBefore(end) && bEnd.isAfter(start);
|
|
7747
|
+
});
|
|
7748
|
+
}, [bookings, days, timezone]);
|
|
7749
|
+
const dayPositions = useMemo(() => {
|
|
7750
|
+
const positions = new Map();
|
|
7751
|
+
const totalMinutes = displayEnd - displayStart;
|
|
7752
|
+
days.forEach(day => {
|
|
7753
|
+
const dayBookings = visibleBookings.filter(b => moment$1(b.start).tz(timezone).isSame(day, 'day'));
|
|
7754
|
+
const dayPos = calculateEventPositions(dayBookings, timezone);
|
|
7755
|
+
dayPos.forEach((pos, id) => {
|
|
7756
|
+
const startMinutes = (pos.top / 100) * 1440;
|
|
7757
|
+
const durationMinutes = (pos.height / 100) * 1440;
|
|
7758
|
+
const newTop = ((startMinutes - displayStart) / totalMinutes) * 100;
|
|
7759
|
+
const newHeight = (durationMinutes / totalMinutes) * 100;
|
|
7760
|
+
positions.set(id, Object.assign(Object.assign({}, pos), { top: Math.max(0, newTop), height: newHeight }));
|
|
7761
|
+
});
|
|
7762
|
+
});
|
|
7763
|
+
return positions;
|
|
7764
|
+
}, [visibleBookings, days, timezone, displayStart, displayEnd]);
|
|
7765
|
+
return (React.createElement("div", { className: "time-grid-container" },
|
|
7766
|
+
React.createElement("div", { className: "time-grid-header" },
|
|
7767
|
+
React.createElement("div", { className: "time-column-header", style: { width: '60px', minWidth: '60px' } }),
|
|
7768
|
+
days.map(day => {
|
|
7769
|
+
var _a;
|
|
7770
|
+
const dayName = day.format('dddd');
|
|
7771
|
+
const isClosed = (_a = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed;
|
|
7772
|
+
const isToday = day.isSame(moment$1().tz(timezone), 'day');
|
|
7773
|
+
return (React.createElement("div", { key: day.toString(), className: `day-column-header ${isToday ? 'today' : ''} ${isClosed ? 'closed' : ''}` },
|
|
7774
|
+
React.createElement("div", { className: "day-name" }, day.format('ddd')),
|
|
7775
|
+
React.createElement("div", { className: "day-number" }, day.format('D')),
|
|
7776
|
+
isClosed && React.createElement("span", { className: "closed-label" }, "Closed")));
|
|
7777
|
+
})),
|
|
7778
|
+
React.createElement("div", { className: "time-grid-body" },
|
|
7779
|
+
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'))))),
|
|
7780
|
+
React.createElement("div", { className: "days-grid", style: { height: `${(displayEnd - displayStart)}px` } },
|
|
7781
|
+
React.createElement("div", { className: "grid-lines" }, timeLabels.map(minutes => (React.createElement("div", { key: minutes, className: "grid-hour-row" })))),
|
|
7782
|
+
days.map(day => {
|
|
7783
|
+
const dayName = day.format('dddd');
|
|
7784
|
+
const businessDay = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName];
|
|
7785
|
+
const isClosed = businessDay === null || businessDay === void 0 ? void 0 : businessDay.isClosed;
|
|
7786
|
+
let closedBlocks = [];
|
|
7787
|
+
if (!isClosed && businessDay && businessDay.openTime && businessDay.closeTime) {
|
|
7788
|
+
const openTime = moment$1(businessDay.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7789
|
+
const closeTime = moment$1(businessDay.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
7790
|
+
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7791
|
+
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7792
|
+
const totalMinutes = displayEnd - displayStart;
|
|
7793
|
+
if (openMinutes < closeMinutes) {
|
|
7794
|
+
const preOpenEnd = openMinutes - 60;
|
|
7795
|
+
if (preOpenEnd > displayStart) {
|
|
7796
|
+
const height = ((preOpenEnd - displayStart) / totalMinutes) * 100;
|
|
7797
|
+
closedBlocks.push(React.createElement("div", { key: "pre-open", className: "calendar-closed-block", style: { top: '0%', height: `${height}%` } },
|
|
7798
|
+
React.createElement("span", { className: "closed-block-label" }, "Closed")));
|
|
7799
|
+
}
|
|
7800
|
+
const bufferStart = Math.max(displayStart, openMinutes - 60);
|
|
7801
|
+
const bufferEnd = openMinutes;
|
|
7802
|
+
if (bufferStart < bufferEnd) {
|
|
7803
|
+
const top = ((bufferStart - displayStart) / totalMinutes) * 100;
|
|
7804
|
+
const height = ((bufferEnd - bufferStart) / totalMinutes) * 100;
|
|
7805
|
+
closedBlocks.push(React.createElement("div", { key: "morning", className: "calendar-closed-block", style: { top: `${top}%`, height: `${height}%` } },
|
|
7806
|
+
React.createElement("span", { className: "closed-block-label" }, "Closed")));
|
|
7807
|
+
}
|
|
7808
|
+
const bufferCloseStart = closeMinutes;
|
|
7809
|
+
const bufferCloseEnd = Math.min(displayEnd, closeMinutes + 60);
|
|
7810
|
+
if (bufferCloseStart < bufferCloseEnd) {
|
|
7811
|
+
const top = ((bufferCloseStart - displayStart) / totalMinutes) * 100;
|
|
7812
|
+
const height = ((bufferCloseEnd - bufferCloseStart) / totalMinutes) * 100;
|
|
7813
|
+
closedBlocks.push(React.createElement("div", { key: "evening", className: "calendar-closed-block", style: { top: `${top}%`, height: `${height}%` } },
|
|
7814
|
+
React.createElement("span", { className: "closed-block-label" }, "Closed")));
|
|
7815
|
+
}
|
|
7816
|
+
const postCloseStart = closeMinutes + 60;
|
|
7817
|
+
if (postCloseStart < displayEnd) {
|
|
7818
|
+
const top = ((postCloseStart - displayStart) / totalMinutes) * 100;
|
|
7819
|
+
const height = ((displayEnd - postCloseStart) / totalMinutes) * 100;
|
|
7820
|
+
closedBlocks.push(React.createElement("div", { key: "post-close", className: "calendar-closed-block", style: { top: `${top}%`, height: `${height}%` } },
|
|
7821
|
+
React.createElement("span", { className: "closed-block-label" }, "Closed")));
|
|
7822
|
+
}
|
|
7823
|
+
}
|
|
7824
|
+
}
|
|
7825
|
+
return (React.createElement("div", { key: day.toString(), className: `day-column ${isClosed ? 'closed-column' : ''}`, onClick: (e) => {
|
|
7826
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
7827
|
+
const y = e.clientY - rect.top;
|
|
7828
|
+
const height = rect.height;
|
|
7829
|
+
const percentage = y / height;
|
|
7830
|
+
const totalMinutes = displayEnd - displayStart;
|
|
7831
|
+
const minutesFromDisplayStart = percentage * totalMinutes;
|
|
7832
|
+
const minutesFromMidnight = displayStart + minutesFromDisplayStart;
|
|
7833
|
+
const clickedTime = day.clone().startOf('day').add(minutesFromMidnight, 'minutes');
|
|
7834
|
+
if (!isClosed && businessDay && businessDay.openTime && businessDay.closeTime) {
|
|
7835
|
+
const openTime = moment$1(businessDay.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7836
|
+
const closeTime = moment$1(businessDay.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
7837
|
+
const clickedMinutes = clickedTime.hours() * 60 + clickedTime.minutes();
|
|
7838
|
+
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7839
|
+
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7840
|
+
if (clickedMinutes < openMinutes || clickedMinutes > closeMinutes) {
|
|
7841
|
+
return;
|
|
7842
|
+
}
|
|
7843
|
+
}
|
|
7844
|
+
if (!isClosed)
|
|
7845
|
+
onTimeSlotClick(clickedTime);
|
|
7846
|
+
} },
|
|
7847
|
+
closedBlocks,
|
|
7848
|
+
visibleBookings
|
|
7849
|
+
.filter(b => moment$1(b.start).tz(timezone).isSame(day, 'day'))
|
|
7850
|
+
.map(booking => {
|
|
7851
|
+
var _a, _b, _c, _d, _e, _f;
|
|
7852
|
+
const pos = dayPositions.get(booking.meeting_id);
|
|
7853
|
+
if (!pos)
|
|
7854
|
+
return null;
|
|
7855
|
+
return (React.createElement("div", { key: booking.meeting_id, className: `calendar-event ${booking.className || ''}`, style: {
|
|
7856
|
+
top: `${pos.top}%`,
|
|
7857
|
+
height: `${pos.height}%`,
|
|
7858
|
+
left: `${pos.left}%`,
|
|
7859
|
+
width: `${pos.width}%`,
|
|
7860
|
+
position: 'absolute'
|
|
7861
|
+
}, onClick: (e) => {
|
|
7862
|
+
e.stopPropagation();
|
|
7863
|
+
if (onBookingClick)
|
|
7864
|
+
onBookingClick(booking);
|
|
7865
|
+
} },
|
|
7866
|
+
React.createElement("div", { className: "event-content" },
|
|
7867
|
+
React.createElement("div", { className: "event-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled'),
|
|
7868
|
+
React.createElement("div", { className: "event-time" },
|
|
7869
|
+
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7870
|
+
" - ",
|
|
7871
|
+
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7872
|
+
React.createElement("div", { className: "event-tooltip" },
|
|
7873
|
+
React.createElement("div", { className: "tooltip-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7874
|
+
React.createElement("div", { className: "tooltip-row" },
|
|
7875
|
+
React.createElement("span", { className: "tooltip-label" }, "Time:"),
|
|
7876
|
+
React.createElement("span", { className: "tooltip-value" },
|
|
7877
|
+
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7878
|
+
" - ",
|
|
7879
|
+
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7880
|
+
(booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7881
|
+
React.createElement("span", { className: "tooltip-label" }, "Staff:"),
|
|
7882
|
+
React.createElement("span", { className: "tooltip-value" }, booking.staff || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.staff)))),
|
|
7883
|
+
(booking.room || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.room)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7884
|
+
React.createElement("span", { className: "tooltip-label" }, "Room:"),
|
|
7885
|
+
React.createElement("span", { className: "tooltip-value" }, booking.room || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.room)))))));
|
|
7886
|
+
})));
|
|
7887
|
+
})))));
|
|
7888
|
+
};
|
|
7889
|
+
|
|
7890
|
+
const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClick, businessHours, }) => {
|
|
7891
|
+
var _a;
|
|
7892
|
+
const startOfMonth = moment$1(currentDate).tz(timezone).startOf('month');
|
|
7893
|
+
const endOfMonth = moment$1(currentDate).tz(timezone).endOf('month');
|
|
7894
|
+
const startDate = startOfMonth.clone().startOf('week');
|
|
7895
|
+
const endDate = endOfMonth.clone().endOf('week');
|
|
7896
|
+
const rows = [];
|
|
7897
|
+
let days = [];
|
|
7898
|
+
let day = startDate.clone();
|
|
7899
|
+
while (day.isSameOrBefore(endDate, 'day')) {
|
|
7900
|
+
for (let i = 0; i < 7; i++) {
|
|
7901
|
+
const currentDay = day.clone();
|
|
7902
|
+
const dayBookings = bookings.filter(b => moment$1(b.start).tz(timezone).isSame(currentDay, 'day'));
|
|
7903
|
+
const isCurrentMonth = currentDay.isSame(startOfMonth, 'month');
|
|
7904
|
+
const isToday = currentDay.isSame(moment$1().tz(timezone), 'day');
|
|
7905
|
+
const dayName = currentDay.format('dddd');
|
|
7906
|
+
const isClosed = (_a = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed;
|
|
7907
|
+
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) },
|
|
7908
|
+
React.createElement("div", { className: "calendar-cell-header" },
|
|
7909
|
+
React.createElement("span", { className: "calendar-cell-number" }, currentDay.format('D')),
|
|
7910
|
+
isClosed && React.createElement("span", { className: "calendar-closed-label-small" }, "Closed")),
|
|
7911
|
+
React.createElement("div", { className: "calendar-cell-bookings" },
|
|
7912
|
+
dayBookings.slice(0, 3).map((booking) => {
|
|
7913
|
+
var _a, _b, _c, _d, _e, _f;
|
|
7914
|
+
return (React.createElement("div", { key: booking.meeting_id, className: `calendar-booking ${booking.className || ''}`, onClick: (e) => {
|
|
7915
|
+
e.stopPropagation();
|
|
7916
|
+
if (onBookingClick) {
|
|
7917
|
+
onBookingClick(booking);
|
|
7918
|
+
}
|
|
7919
|
+
} },
|
|
7920
|
+
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7921
|
+
React.createElement("span", { className: "calendar-booking-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled'),
|
|
7922
|
+
React.createElement("div", { className: "event-tooltip" },
|
|
7923
|
+
React.createElement("div", { className: "tooltip-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7924
|
+
React.createElement("div", { className: "tooltip-row" },
|
|
7925
|
+
React.createElement("span", { className: "tooltip-label" }, "Time:"),
|
|
7926
|
+
React.createElement("span", { className: "tooltip-value" },
|
|
7927
|
+
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7928
|
+
" - ",
|
|
7929
|
+
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7930
|
+
(booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7931
|
+
React.createElement("span", { className: "tooltip-label" }, "Staff:"),
|
|
7932
|
+
React.createElement("span", { className: "tooltip-value" }, booking.staff || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.staff)))),
|
|
7933
|
+
(booking.room || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.room)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7934
|
+
React.createElement("span", { className: "tooltip-label" }, "Room:"),
|
|
7935
|
+
React.createElement("span", { className: "tooltip-value" }, booking.room || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.room)))))));
|
|
7936
|
+
}),
|
|
7937
|
+
dayBookings.length > 3 && (React.createElement("div", { className: "calendar-booking-more" },
|
|
7938
|
+
"+",
|
|
7939
|
+
dayBookings.length - 3,
|
|
7940
|
+
" more")))));
|
|
7941
|
+
day.add(1, 'days');
|
|
7942
|
+
}
|
|
7943
|
+
rows.push(React.createElement("div", { key: day.toString(), className: "calendar-row" }, days));
|
|
7944
|
+
days = [];
|
|
7945
|
+
}
|
|
7946
|
+
return (React.createElement("div", { className: "month-view-container" },
|
|
7947
|
+
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)))),
|
|
7948
|
+
React.createElement("div", { className: "calendar-body" }, rows)));
|
|
7949
|
+
};
|
|
7950
|
+
|
|
7951
|
+
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}";
|
|
7533
7952
|
styleInject(css_248z);
|
|
7534
7953
|
|
|
7535
7954
|
const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
@@ -7540,6 +7959,18 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7540
7959
|
const [error, setError] = useState(null);
|
|
7541
7960
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
|
7542
7961
|
const [selectedDate, setSelectedDate] = useState(null);
|
|
7962
|
+
// Mobile responsiveness logic
|
|
7963
|
+
useEffect(() => {
|
|
7964
|
+
const handleResize = () => {
|
|
7965
|
+
if (isMobile()) {
|
|
7966
|
+
setCurrentView('day');
|
|
7967
|
+
}
|
|
7968
|
+
};
|
|
7969
|
+
// Initial check
|
|
7970
|
+
handleResize();
|
|
7971
|
+
window.addEventListener('resize', handleResize);
|
|
7972
|
+
return () => window.removeEventListener('resize', handleResize);
|
|
7973
|
+
}, []);
|
|
7543
7974
|
// Update currentDate when timezone changes
|
|
7544
7975
|
useEffect(() => {
|
|
7545
7976
|
setCurrentDate((prev) => moment$1(prev).tz(timezone));
|
|
@@ -7561,6 +7992,10 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7561
7992
|
startDate = current.clone().startOf('week');
|
|
7562
7993
|
endDate = current.clone().endOf('week');
|
|
7563
7994
|
}
|
|
7995
|
+
else if (currentView === 'workWeek') {
|
|
7996
|
+
startDate = current.clone().startOf('week'); // Fetch full week to be safe
|
|
7997
|
+
endDate = current.clone().endOf('week');
|
|
7998
|
+
}
|
|
7564
7999
|
else {
|
|
7565
8000
|
startDate = current.clone().startOf('day');
|
|
7566
8001
|
endDate = current.clone().endOf('day');
|
|
@@ -7589,7 +8024,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7589
8024
|
if (currentView === 'month') {
|
|
7590
8025
|
newDate.subtract(1, 'months');
|
|
7591
8026
|
}
|
|
7592
|
-
else if (currentView === 'week') {
|
|
8027
|
+
else if (currentView === 'week' || currentView === 'workWeek') {
|
|
7593
8028
|
newDate.subtract(1, 'weeks');
|
|
7594
8029
|
}
|
|
7595
8030
|
else {
|
|
@@ -7602,7 +8037,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7602
8037
|
if (currentView === 'month') {
|
|
7603
8038
|
newDate.add(1, 'months');
|
|
7604
8039
|
}
|
|
7605
|
-
else if (currentView === 'week') {
|
|
8040
|
+
else if (currentView === 'week' || currentView === 'workWeek') {
|
|
7606
8041
|
newDate.add(1, 'weeks');
|
|
7607
8042
|
}
|
|
7608
8043
|
else {
|
|
@@ -7625,18 +8060,12 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7625
8060
|
onBookingCreate(booking);
|
|
7626
8061
|
}
|
|
7627
8062
|
});
|
|
7628
|
-
const getBookingsForDay = (day) => {
|
|
7629
|
-
return bookings.filter((booking) => {
|
|
7630
|
-
const bookingStart = moment$1(booking.start).tz(timezone);
|
|
7631
|
-
return bookingStart.isSame(day, 'day');
|
|
7632
|
-
});
|
|
7633
|
-
};
|
|
7634
8063
|
const getHeaderDateFormat = () => {
|
|
7635
8064
|
const current = moment$1(currentDate).tz(timezone);
|
|
7636
8065
|
if (currentView === 'month') {
|
|
7637
8066
|
return current.format('MMMM YYYY');
|
|
7638
8067
|
}
|
|
7639
|
-
else if (currentView === 'week') {
|
|
8068
|
+
else if (currentView === 'week' || currentView === 'workWeek') {
|
|
7640
8069
|
const weekStart = current.clone().startOf('week');
|
|
7641
8070
|
const weekEnd = current.clone().endOf('week');
|
|
7642
8071
|
return `${weekStart.format('MMM D')} - ${weekEnd.format('MMM D, YYYY')}`;
|
|
@@ -7645,142 +8074,14 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7645
8074
|
return current.format('MMMM D, YYYY');
|
|
7646
8075
|
}
|
|
7647
8076
|
};
|
|
7648
|
-
const renderHeader = () => {
|
|
7649
|
-
return (React.createElement("div", { className: "calendar-header" },
|
|
7650
|
-
React.createElement("div", { className: "calendar-title-section" },
|
|
7651
|
-
React.createElement("h2", { className: "calendar-title" }, title),
|
|
7652
|
-
React.createElement("div", { className: "calendar-view-toggle" },
|
|
7653
|
-
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'month' ? 'active' : ''}`, onClick: () => setCurrentView('month') }, "Month"),
|
|
7654
|
-
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => setCurrentView('week') }, "Week"),
|
|
7655
|
-
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => setCurrentView('day') }, "Day")),
|
|
7656
|
-
React.createElement("button", { className: "calendar-btn calendar-btn-create", onClick: () => setShowCreateModal(true) }, "+ Create Booking")),
|
|
7657
|
-
React.createElement("div", { className: "calendar-navigation" },
|
|
7658
|
-
React.createElement("button", { className: "calendar-btn", onClick: handlePrevious }, "\u2039"),
|
|
7659
|
-
React.createElement("button", { className: "calendar-btn", onClick: handleToday }, "Today"),
|
|
7660
|
-
React.createElement("button", { className: "calendar-btn", onClick: handleNext }, "\u203A"),
|
|
7661
|
-
React.createElement("span", { className: "calendar-current-month" }, getHeaderDateFormat()))));
|
|
7662
|
-
};
|
|
7663
|
-
const renderDaysOfWeek = () => {
|
|
7664
|
-
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
7665
|
-
return (React.createElement("div", { className: "calendar-days-row" }, days.map((day) => (React.createElement("div", { key: day, className: "calendar-day-header" }, day)))));
|
|
7666
|
-
};
|
|
7667
|
-
const renderMonthView = () => {
|
|
7668
|
-
var _a;
|
|
7669
|
-
const current = moment$1(currentDate).tz(timezone);
|
|
7670
|
-
const monthStart = current.clone().startOf('month');
|
|
7671
|
-
const monthEnd = current.clone().endOf('month');
|
|
7672
|
-
const startDate = monthStart.clone().startOf('week');
|
|
7673
|
-
const endDate = monthEnd.clone().endOf('week');
|
|
7674
|
-
const rows = [];
|
|
7675
|
-
let days = [];
|
|
7676
|
-
let day = startDate.clone();
|
|
7677
|
-
while (day.isSameOrBefore(endDate, 'day')) {
|
|
7678
|
-
for (let i = 0; i < 7; i++) {
|
|
7679
|
-
const currentDay = day.clone();
|
|
7680
|
-
const dayBookings = getBookingsForDay(currentDay);
|
|
7681
|
-
const isCurrentMonth = currentDay.isSame(monthStart, 'month');
|
|
7682
|
-
const isToday = currentDay.isSame(moment$1().tz(timezone), 'day');
|
|
7683
|
-
// Check business hours
|
|
7684
|
-
const dayName = currentDay.format('dddd');
|
|
7685
|
-
const isClosed = (_a = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed;
|
|
7686
|
-
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' } : {} },
|
|
7687
|
-
React.createElement("div", { className: "calendar-cell-number" }, currentDay.format('D')),
|
|
7688
|
-
isClosed && React.createElement("div", { className: "calendar-closed-label" }, "Closed"),
|
|
7689
|
-
React.createElement("div", { className: "calendar-cell-bookings" },
|
|
7690
|
-
dayBookings.slice(0, 3).map((booking) => {
|
|
7691
|
-
var _a, _b;
|
|
7692
|
-
return (React.createElement("div", { key: booking.meeting_id, className: "calendar-booking", onClick: (e) => {
|
|
7693
|
-
e.stopPropagation();
|
|
7694
|
-
if (onBookingClick) {
|
|
7695
|
-
onBookingClick(booking);
|
|
7696
|
-
}
|
|
7697
|
-
}, title: ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled' },
|
|
7698
|
-
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7699
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled')));
|
|
7700
|
-
}),
|
|
7701
|
-
dayBookings.length > 3 && (React.createElement("div", { className: "calendar-booking-more" },
|
|
7702
|
-
"+",
|
|
7703
|
-
dayBookings.length - 3,
|
|
7704
|
-
" more")))));
|
|
7705
|
-
day.add(1, 'days');
|
|
7706
|
-
}
|
|
7707
|
-
rows.push(React.createElement("div", { key: day.toString(), className: "calendar-row" }, days));
|
|
7708
|
-
days = [];
|
|
7709
|
-
}
|
|
7710
|
-
return React.createElement("div", { className: "calendar-body" }, rows);
|
|
7711
|
-
};
|
|
7712
|
-
const renderWeekView = () => {
|
|
7713
|
-
var _a;
|
|
7714
|
-
const current = moment$1(currentDate).tz(timezone);
|
|
7715
|
-
const weekStart = current.clone().startOf('week');
|
|
7716
|
-
const days = [];
|
|
7717
|
-
for (let i = 0; i < 7; i++) {
|
|
7718
|
-
const day = weekStart.clone().add(i, 'days');
|
|
7719
|
-
const dayBookings = getBookingsForDay(day);
|
|
7720
|
-
const isToday = day.isSame(moment$1().tz(timezone), 'day');
|
|
7721
|
-
const dayName = day.format('dddd');
|
|
7722
|
-
const isClosed = (_a = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName]) === null || _a === void 0 ? void 0 : _a.isClosed;
|
|
7723
|
-
days.push(React.createElement("div", { key: day.toString(), className: `calendar-week-day ${isToday ? 'calendar-cell-today' : ''}`, onClick: () => !isClosed && handleDateClick(day), style: isClosed ? { backgroundColor: '#f5f5f5' } : {} },
|
|
7724
|
-
React.createElement("div", { className: "calendar-week-day-header" },
|
|
7725
|
-
React.createElement("div", { className: "calendar-week-day-name" }, day.format('EEE')),
|
|
7726
|
-
React.createElement("div", { className: "calendar-week-day-number" }, day.format('D')),
|
|
7727
|
-
isClosed && React.createElement("div", { className: "calendar-closed-label-small" }, "Closed")),
|
|
7728
|
-
React.createElement("div", { className: "calendar-week-day-bookings" }, dayBookings.map((booking) => {
|
|
7729
|
-
var _a, _b;
|
|
7730
|
-
return (React.createElement("div", { key: booking.meeting_id, className: "calendar-booking calendar-week-booking", onClick: (e) => {
|
|
7731
|
-
e.stopPropagation();
|
|
7732
|
-
if (onBookingClick) {
|
|
7733
|
-
onBookingClick(booking);
|
|
7734
|
-
}
|
|
7735
|
-
}, title: ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled' },
|
|
7736
|
-
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7737
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled')));
|
|
7738
|
-
}))));
|
|
7739
|
-
}
|
|
7740
|
-
return React.createElement("div", { className: "calendar-week-view" }, days);
|
|
7741
|
-
};
|
|
7742
|
-
const renderDayView = () => {
|
|
7743
|
-
const current = moment$1(currentDate).tz(timezone);
|
|
7744
|
-
const dayBookings = getBookingsForDay(current);
|
|
7745
|
-
const isToday = current.isSame(moment$1().tz(timezone), 'day');
|
|
7746
|
-
const dayName = current.format('dddd');
|
|
7747
|
-
const businessDay = businessHours === null || businessHours === void 0 ? void 0 : businessHours[dayName];
|
|
7748
|
-
const isClosed = businessDay === null || businessDay === void 0 ? void 0 : businessDay.isClosed;
|
|
7749
|
-
return (React.createElement("div", { className: "calendar-day-view" },
|
|
7750
|
-
React.createElement("div", { className: `calendar-day-container ${isToday ? 'calendar-cell-today' : ''}` },
|
|
7751
|
-
React.createElement("div", { className: "calendar-day-header" },
|
|
7752
|
-
React.createElement("div", { className: "calendar-day-name" }, current.format('dddd')),
|
|
7753
|
-
React.createElement("div", { className: "calendar-day-date" }, current.format('MMMM D, YYYY')),
|
|
7754
|
-
isClosed ? (React.createElement("div", { className: "calendar-status-closed" }, "Closed")) : businessDay ? (React.createElement("div", { className: "calendar-status-open" },
|
|
7755
|
-
"Open: ",
|
|
7756
|
-
businessDay.openTime,
|
|
7757
|
-
" - ",
|
|
7758
|
-
businessDay.closeTime)) : null),
|
|
7759
|
-
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) => {
|
|
7760
|
-
var _a, _b, _c;
|
|
7761
|
-
return (React.createElement("div", { key: booking.meeting_id, className: "calendar-booking calendar-day-booking", onClick: () => {
|
|
7762
|
-
if (onBookingClick) {
|
|
7763
|
-
onBookingClick(booking);
|
|
7764
|
-
}
|
|
7765
|
-
}, title: ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled' },
|
|
7766
|
-
React.createElement("span", { className: "calendar-booking-time" },
|
|
7767
|
-
moment$1(booking.start).tz(timezone).format('HH:mm'),
|
|
7768
|
-
" - ",
|
|
7769
|
-
moment$1(booking.end).tz(timezone).format('HH:mm')),
|
|
7770
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7771
|
-
((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.description) && (React.createElement("span", { className: "calendar-booking-description" }, booking.metadata.description))));
|
|
7772
|
-
}))),
|
|
7773
|
-
!isClosed && (React.createElement("button", { className: "calendar-btn calendar-day-add-btn", onClick: () => handleDateClick(current) }, "+ Add Booking")))));
|
|
7774
|
-
};
|
|
7775
8077
|
return (React.createElement("div", { className: "calendar-container" },
|
|
7776
|
-
|
|
8078
|
+
React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday, onCreateClick: () => {
|
|
8079
|
+
setSelectedDate(moment$1().tz(timezone).toDate());
|
|
8080
|
+
setShowCreateModal(true);
|
|
8081
|
+
}, dateRangeText: getHeaderDateFormat() }),
|
|
7777
8082
|
error && React.createElement("div", { className: "calendar-error" }, error),
|
|
7778
8083
|
loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
|
|
7779
|
-
currentView === 'month'
|
|
7780
|
-
renderDaysOfWeek(),
|
|
7781
|
-
renderMonthView())),
|
|
7782
|
-
currentView === 'week' && renderWeekView(),
|
|
7783
|
-
currentView === 'day' && renderDayView(),
|
|
8084
|
+
React.createElement("div", { className: "calendar-content" }, currentView === 'month' ? (React.createElement(MonthView, { currentDate: currentDate, bookings: bookings, timezone: timezone, onBookingClick: onBookingClick, onDateClick: handleDateClick, businessHours: businessHours })) : (React.createElement(TimeGrid, { currentDate: currentDate, view: currentView, bookings: bookings, timezone: timezone, onBookingClick: onBookingClick, onTimeSlotClick: handleDateClick, businessHours: businessHours }))),
|
|
7784
8085
|
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours }))));
|
|
7785
8086
|
};
|
|
7786
8087
|
|