@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
36 lines • 1.75 kB
JavaScript
import { Box, makeStyles, Typography } from '@material-ui/core';
import React from 'react';
import useLocale from '../../../common/hooks/locale/useLocale';
import ScheduleViewEvent from '../event/ScheduleViewEvent';
var useStyles = makeStyles(function (theme) { return ({
root: {
padding: theme.spacing(1),
borderBottom: '1px solid',
borderBottomColor: theme.palette.grey[300],
display: 'flex',
},
monthAndDay: {
paddingLeft: theme.spacing(1),
},
}); });
export default function ScheduleGridElement(props) {
var locale = useLocale();
var classes = useStyles();
var date = props.date;
// Date provided by ScheduleGrid will have the incorrect day set,
// So we fix it here.
date.setDate(props.day);
function displayEventsElements() {
return props.calendarEvents.map(function (calendarEvent) { return (React.createElement(ScheduleViewEvent, { event: calendarEvent, key: calendarEvent.id, popover: props.popover })); });
}
return (React.createElement("div", { className: classes.root },
React.createElement(Box, { width: 120, hidden: props.hideLabel },
React.createElement(Typography, { variant: "h6", display: "inline" }, props.day),
React.createElement(Typography, { variant: "caption", display: "inline", className: classes.monthAndDay },
locale.monthsShort[date.getMonth()].toLocaleUpperCase(),
",",
' ',
locale.daysShort[date.getDay()].toLocaleUpperCase())),
React.createElement(Box, { display: "flex", flexDirection: "column", width: "100%", justifyContent: "center" }, displayEventsElements())));
}
//# sourceMappingURL=ScheduleGridElement.js.map