diff --git a/src/components/IntervalSelector.js b/src/components/IntervalSelector.js index c438503..4f55ce2 100644 --- a/src/components/IntervalSelector.js +++ b/src/components/IntervalSelector.js @@ -30,22 +30,31 @@ export default function IntervalSelector({ // Create an event dates list used to create the days columns const daysList = selectedDates.map((event) => event.start); - const handleDayDidMount = (info) => { - let currentDate = DateTime.fromJSDate(info.date).toFormat('yyyy-MM-dd'); + console.log(daysList); + + const handleDayDidMount = ({ date, el }) => { + let currentDate = DateTime.fromJSDate(date).toFormat('yyyy-MM-dd'); if (!daysList.includes(currentDate)) { - info.el.remove(); + if (el) { + el.remove(); + } } }; const handleViewMount = ({ el }) => { // Adapt column width to number of dates present const timegridBody = el.querySelectorAll('div.fc-timegrid-body'); - const timegridSlots = el.querySelectorAll( - 'div.fc-timegrid-slots table', + const timegridSlots = el.querySelectorAll('div.fc-timegrid-slots'); + const timegridScroll = el.querySelectorAll( + 'table.fc-col-header.fc-scrollgrid-sync-table', ); + + console.log(timegridScroll); + // Update width based on rendered dates number let newWidth = daysList.length * dayMinWidth; timegridBody[0].style['min-width'] = `${newWidth}px`; timegridSlots[0].style['min-width'] = `${newWidth}px`; + timegridScroll[0].style['min-width'] = `${newWidth}px`; }; /// AVAILABILITY INTERACTION @@ -113,6 +122,8 @@ export default function IntervalSelector({ ); }; + console.log(startDate, endDate); + return (