react-weekly-table
Version:
React weekly scheduler <br/> By default build time ranges for a week, supports up to 31 days <br/> Can work with different timezones, data always return to UTC+0
23 lines (22 loc) • 1.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCells, useScheduler, useTimeBlock } from '../providers';
import { SchedulerArea, SchedulerHeader, SchedulerHelper, TimeBlockCore, } from './index';
/**
* Columns description, rows and drawing area layout component
*/
export const SchedulerLayout = () => {
const { headerHeightProp, helperWidthProp, bottomHeightProp, baseZIndex } = useScheduler();
const { offsetWidth, offsetHeight } = useCells();
const { blocks, preview } = useTimeBlock();
return (_jsxs("div", Object.assign({ id: 'schedulerLayout', className: 'scheduler-layout', style: {
position: 'absolute',
display: 'grid',
gridTemplateColumns: `${helperWidthProp}px ${offsetWidth - helperWidthProp}px`,
gridTemplateRows: `${headerHeightProp}px ${offsetHeight - headerHeightProp - bottomHeightProp}px ${bottomHeightProp}px`,
width: offsetWidth,
maxWidth: offsetWidth,
height: offsetHeight,
maxHeight: offsetHeight,
zIndex: baseZIndex + 2,
} }, { children: [blocks === null || blocks === void 0 ? void 0 : blocks.map((block) => (_jsx(TimeBlockCore, Object.assign({}, block), block.id))), preview === null || preview === void 0 ? void 0 : preview.map((block) => (_jsx(TimeBlockCore, Object.assign({}, block), block.id))), _jsx("div", { style: { position: 'relative' } }), _jsx(SchedulerHeader, {}), _jsx(SchedulerHelper, {}), _jsx(SchedulerArea, {})] })));
};