@abbl/material-calendar/dist/views/schedule/scheduleGrid/ScheduleGrid.js

Calendar component build with React and Material-UI

import { Box, makeStyles } from '@material-ui/core';
import React, { useContext } from 'react';
import { EventStorageContext } from '../../../common/contexts/EventStorageContext';
import { ViewContext } from '../../../common/contexts/ViewContext';
import ScheduleGridElement from './ScheduleGridElement';
var useStyles = makeStyles(function (theme) { return ({
    root: {
        backgroundColor: theme.palette.common.white,
        maxHeight: 'calc(100vh - 64px)',
        maxWidth: '100vw',
        overflowY: 'auto',
    },
}); });
export default function ScheduleGrid(props) {
    var eventStorageContext = useContext(EventStorageContext);
    var viewContext = useContext(ViewContext);
    var classes = useStyles();
    function displayScheduleElements() {
        var _a, _b;
        var date = viewContext.highlightDate;
        //TODO: Move this to helper function.
        var monthEvents = (_b = (_a = eventStorageContext.eventStorage) === null || _a === void 0 ? void 0 : _a[date.getFullYear()]) === null || _b === void 0 ? void 0 : _b[date.getMonth()];
        var elements = [];
        if (monthEvents) {
            for (var _i = 0, _c = Object.entries(monthEvents); _i < _c.length; _i++) {
                var dayEvents = _c[_i];
                elements.push(React.createElement(ScheduleGridElement, { day: dayEvents[0], date: date, calendarEvents: dayEvents[1], key: dayEvents[0] }));
            }
        }
        return elements;
    }
    return (React.createElement(Box, { display: "flex", flexDirection: "column", className: classes.root }, displayScheduleElements()));
}
//# sourceMappingURL=ScheduleGrid.js.map