@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
36 lines • 1.68 kB
JavaScript
import { Avatar, Box, makeStyles, Typography } from '@material-ui/core';
import React from 'react';
import useLocale from '../../hooks/locale/useLocale';
import DateEventsCloseButton from '../dateEvents/DateEventsCloseButton';
var useStyles = makeStyles(function (theme) { return ({
root: {
padding: theme.spacing(1),
width: 320,
},
square: {
width: 16,
height: 16,
backgroundColor: theme.palette.primary.main,
},
}); });
export default function ExamplePopover(props) {
var classes = useStyles();
var locale = useLocale();
function handleOnClose() {
props.popoverState.closePopover();
}
return (React.createElement("div", { className: classes.root },
React.createElement(DateEventsCloseButton, { onClose: handleOnClose }),
React.createElement(Box, { display: "flex", marginTop: '24px' },
React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", px: 2 },
React.createElement(Avatar, { variant: "rounded", className: classes.square }, ' ')),
React.createElement(Box, { pl: '8px', pb: 1 },
React.createElement(Typography, { variant: "h5" }, props.calendarEvent.title),
React.createElement(Typography, { variant: "caption", gutterBottom: true },
locale.days[props.calendarEvent.startedAt.getDay()],
", ",
props.calendarEvent.startedAt.getDate(),
' ',
locale.months[props.calendarEvent.startedAt.getMonth()].toLocaleLowerCase())))));
}
//# sourceMappingURL=ExamplePopover.js.map