table and classes in table
This commit is contained in:
parent
96ed785c29
commit
aa519c5e00
@ -74,7 +74,6 @@ export const Scheduler = () => {
|
||||
setCellWidth(cellRef.current.getBoundingClientRect().width);
|
||||
setCellTop(cellRef.current.getBoundingClientRect().top);
|
||||
setCellHeight(cellRef.current.getBoundingClientRect().height);
|
||||
cellRef.current.style.backgroundColor = 'blue';
|
||||
}
|
||||
};
|
||||
handleResize();
|
||||
@ -111,13 +110,15 @@ export const Scheduler = () => {
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexRow === 23 ? (
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
<TableCell style={{ borderBottom: '2px soli rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexCell === 5 ? (
|
||||
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
|
||||
) : indexRow === 5 ? (
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexRow % 2 !== 0 ? (
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : (
|
||||
|
@ -29,7 +29,7 @@ const ClassesWrapper = styled.div<ClassesWrapperProps>`
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: ${({ cellTop }) => cellTop}px;
|
||||
left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 15 + cellWidth * eventIndex}px;
|
||||
left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 5 + cellWidth * eventIndex}px;
|
||||
width: ${({ cellWidth }) => cellWidth - 10}px;
|
||||
height: ${({ cellHeight }) => cellHeight * 3}px;
|
||||
z-index: 2;
|
||||
@ -37,22 +37,27 @@ const ClassesWrapper = styled.div<ClassesWrapperProps>`
|
||||
`;
|
||||
|
||||
interface ClassesProps {
|
||||
cellWidth: number;
|
||||
cellHeight: number;
|
||||
groupType: GroupType;
|
||||
}
|
||||
|
||||
const Classes = styled.div<ClassesProps>`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
font-size: 0.65vw;
|
||||
line-height: normal;
|
||||
border-radius: 10px;
|
||||
height: ${({ cellHeight }) => cellHeight * 3}px;
|
||||
width: ${({ cellWidth }) => cellWidth *3/4}px;
|
||||
margin-right: 5px;
|
||||
text-align: left;
|
||||
padding: 5px 2px 2px 5px;
|
||||
text-align: center;
|
||||
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
|
||||
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
|
||||
|
||||
`;
|
||||
|
||||
interface SchedulerRowProps {
|
||||
@ -101,6 +106,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
|
||||
console.log('group: ', group);
|
||||
}}
|
||||
groupType={group.type}
|
||||
cellWidth={cellWidth}
|
||||
cellHeight={cellHeight}
|
||||
id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
|
||||
key={index}
|
||||
|
Loading…
Reference in New Issue
Block a user