meeting-planner
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix Availability day rendering issue and layout

This commit is contained in:
rui hildt 2020-09-03 00:54:18 +02:00
parent 6cc19211c1
commit 1cd658be06
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/IntervalSelector.js
View File

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