@abbl/material-calendar/dist/views/week/WeekView.js

Calendar component build with React and Material-UI

import { makeStyles } from '@material-ui/core';
import { eachDayOfInterval, endOfWeek, startOfWeek } from 'date-fns';
import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { ViewContext } from '../../common/contexts/ViewContext';
import WeekTimeGrid from './components/timeGrid/WeekTimeGrid';
import WeekGrid from './components/weekGrid/WeekGrid';
import WeekHeader from './components/weekHeader/WeekHeader';
var useStyles = makeStyles(function () { return ({
    root: {
        display: 'flex',
    },
}); });
function WeekView() {
    var viewContext = useContext(ViewContext);
    var classes = useStyles();
    var _a = useState(0), headerHeight = _a[0], setHeaderHeight = _a[1];
    var _b = useState(getWeekDays()), weekDays = _b[0], setWeekDays = _b[1];
    var headerRef = useRef(null);
    var timeGridRef = useRef(null);
    useLayoutEffect(function () {
        if (headerRef.current) {
            var height = headerRef.current.getBoundingClientRect().height;
            setHeaderHeight(Math.round(height));
        }
    }, []);
    useEffect(function () {
        setWeekDays(getWeekDays());
    }, [viewContext.highlightDate]);
    function getWeekDays() {
        return eachDayOfInterval({
            start: startOfWeek(viewContext.highlightDate),
            end: endOfWeek(viewContext.highlightDate),
        });
    }
    function handleOnScrollEvent(event) {
        scrollWeekHeader(event);
        scrollTimeGrid(event);
    }
    function scrollWeekHeader(event) {
        if (headerRef.current) {
            var scrollX_1 = event.currentTarget.scrollLeft;
            headerRef.current.scroll(scrollX_1, 0);
        }
    }
    function scrollTimeGrid(event) {
        if (timeGridRef.current) {
            var scrollY_1 = event.currentTarget.scrollTop;
            timeGridRef.current.scroll(0, scrollY_1);
        }
    }
    return (React.createElement("div", { className: classes.root },
        React.createElement(WeekTimeGrid, { headerHeight: headerHeight, ref: timeGridRef }),
        React.createElement("div", { style: { width: 'calc(100% - 56px)' } },
            React.createElement(WeekHeader, { weekDays: weekDays, ref: headerRef }),
            React.createElement(WeekGrid, { weekDays: weekDays, weekHeaderHeight: headerHeight, onScroll: handleOnScrollEvent }))));
}
export default WeekView;
//# sourceMappingURL=WeekView.js.map