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
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 (
<FullCalendar
plugins={[dayGridPlugin, interaction, timeGridPlugin, scrollGrid]}