tylko wybrane gruppy

This commit is contained in:
wrzesinski-hubert 2020-09-11 18:56:14 +02:00
parent 78e54b70e4
commit e90ffbe04d
2 changed files with 24 additions and 4 deletions

View File

@ -85,7 +85,7 @@ export const Scheduler = () => {
// const column = cellId.slice(0, 9); // const column = cellId.slice(0, 9);
// const row = cellId.slice(1); // const row = cellId.slice(1);
//const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`; //const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
console.log(cellId) console.log(currentEventsIds)
setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]); setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
}; };

View File

@ -13,10 +13,16 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
position: absolute; position: absolute;
top: ${({ cellTop }) => cellTop}px; top: ${({ cellTop }) => cellTop}px;
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px; left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
z-index: 2;
`;
const ClassDiv = styled.div<SchedulerEventProps>`
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
background-color: lightblue;
z-index: 2; z-index: 2;
border-radius: 10px;
padding-left:5px;
background-color: rgb(100, 181, 246);
`; `;
interface SchedulerRowProps { interface SchedulerRowProps {
@ -25,7 +31,7 @@ interface SchedulerRowProps {
cellTop: number; cellTop: number;
cellWidth: number; cellWidth: number;
cellHeight: number; cellHeight: number;
onClick: (e: React.MouseEvent) => void onClick: (e: React.MouseEvent) => void;
} }
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => { export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
@ -41,7 +47,21 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
key={eventIndex} key={eventIndex}
id={`eventRow${indexRow}eventCol${eventIndex}`} id={`eventRow${indexRow}eventCol${eventIndex}`}
> >
{groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)} {groups.map(
(group, index) =>
group.day === eventIndex && (
<ClassDiv
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}`}
key={index}
>
{groups[index]?.lecturer}
</ClassDiv>
),
)}
</SchedulerEvent> </SchedulerEvent>
))} ))}
</> </>