@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
36 lines • 1.69 kB
JavaScript
import { makeStyles } from '@material-ui/core';
import React, { useContext, useMemo } from 'react';
import { EventStorageContext } from '../../../../common/contexts/EventStorageContext';
import CalendarEventUtils from '../../../../common/tools/CalendarEventUtils';
import { NAVIGATION_BAR_HEIGHT } from '../../../../core/components/navigationBar/NavigationBar';
import DayGrid from '../../../day/components/dayGrid/DayGrid';
var useStyles = makeStyles(function (theme) { return ({
root: {
overflow: 'auto',
},
grid: {
display: 'flex',
flexDirection: 'row',
},
gridElement: {
flexGrow: 1,
minWidth: '107px',
},
}); });
export default function WeekGrid(props) {
var eventStorageContext = useContext(EventStorageContext);
var classes = useStyles();
function renderGrid() {
return props.weekDays.map(function (day) {
var events = CalendarEventUtils.getDayEvents(eventStorageContext.eventStorage, day);
return (React.createElement("div", { className: classes.gridElement, key: 'dayGrid-' + day.getDate() },
React.createElement(DayGrid, { dayEvents: events ? events : [], date: day })));
});
}
function getHeight() {
return "calc(100vh - " + NAVIGATION_BAR_HEIGHT + "px - " + props.weekHeaderHeight + "px)";
}
return (React.createElement("div", { className: classes.root, onScroll: props.onScroll, style: { height: getHeight() } },
React.createElement("div", { className: classes.grid }, useMemo(function () { return renderGrid(); }, [props.weekDays, eventStorageContext.eventStorage]))));
}
//# sourceMappingURL=WeekGrid.js.map