3 files changed, 134 insertions, 0 deletions
diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js
new file mode 100644
index 00000000..de714c36
--- /dev/null
+++ b/modern/src/settings/CalendarPage.js
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import TextField from '@material-ui/core/TextField';
+import {
+  Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import EditItemView from '../EditItemView';
+import EditAttributesView from '../attributes/EditAttributesView';
+import { useTranslation } from '../LocalizationProvider';
+
+const useStyles = makeStyles(() => ({
+  details: {
+    flexDirection: 'column',
+  },
+}));
+
+const CalendarPage = () => {
+  const classes = useStyles();
+  const t = useTranslation();
+
+  const [item, setItem] = useState();
+
+  return (
+    <EditItemView endpoint="calendars" item={item} setItem={setItem}>
+      {item
+        && (
+        <>
+          <Accordion defaultExpanded>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography variant="subtitle1">
+                {t('sharedRequired')}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails className={classes.details}>
+              <TextField
+                margin="normal"
+                value={item.name || ''}
+                onChange={(event) => setItem({ ...item, name: event.target.value })}
+                label={t('sharedName')}
+                variant="filled"
+              />
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography variant="subtitle1">
+                {t('sharedAttributes')}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails className={classes.details}>
+              <EditAttributesView
+                attributes={item.attributes}
+                setAttributes={(attributes) => setItem({ ...item, attributes })}
+                definitions={{}}
+              />
+            </AccordionDetails>
+          </Accordion>
+        </>
+        )}
+    </EditItemView>
+  );
+};
+
+export default CalendarPage;
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
new file mode 100644
index 00000000..076f30ca
--- /dev/null
+++ b/modern/src/settings/CalendarsPage.js
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import {
+  TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
+} from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { useEffectAsync } from '../reactHelper';
+import EditCollectionView from '../EditCollectionView';
+import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
+
+const useStyles = makeStyles((theme) => ({
+  columnAction: {
+    width: theme.spacing(1),
+    padding: theme.spacing(0, 1),
+  },
+}));
+
+const CalendarsView = ({ updateTimestamp, onMenuClick }) => {
+  const classes = useStyles();
+  const t = useTranslation();
+
+  const [items, setItems] = useState([]);
+
+  useEffectAsync(async () => {
+    const response = await fetch('/api/calendars');
+    if (response.ok) {
+      setItems(await response.json());
+    }
+  }, [updateTimestamp]);
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell className={classes.columnAction} />
+            <TableCell>{t('sharedName')}</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {items.map((item) => (
+            <TableRow key={item.id}>
+              <TableCell className={classes.columnAction} padding="none">
+                <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+                  <MoreVertIcon />
+                </IconButton>
+              </TableCell>
+              <TableCell>{item.name}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+const CalendarsPage = () => (
+  <OptionsLayout>
+    <EditCollectionView content={CalendarsView} editPath="/settings/calendar" endpoint="calendars" />
+  </OptionsLayout>
+);
+
+export default CalendarsPage;
diff --git a/modern/src/settings/OptionsLayout/useRoutes.js b/modern/src/settings/OptionsLayout/useRoutes.js
index 8be4ec30..efbd9eb2 100644
--- a/modern/src/settings/OptionsLayout/useRoutes.js
+++ b/modern/src/settings/OptionsLayout/useRoutes.js
@@ -8,6 +8,7 @@ import StorageIcon from '@material-ui/icons/Storage';
 import BuildIcon from '@material-ui/icons/Build';
 import PeopleIcon from '@material-ui/icons/People';
 import BarChartIcon from '@material-ui/icons/BarChart';
+import TodayIcon from '@material-ui/icons/Today';
 import { getIsAdmin, getUserId } from '../../common/selectors';
 import { useTranslation } from '../../LocalizationProvider';
 
@@ -61,6 +62,12 @@ const useMainRoutes = (t, userId) => useMemo(() => [
     icon: <PersonIcon />,
   },
   {
+    match: 'calendar',
+    name: t('sharedCalendars'),
+    href: '/settings/calendars',
+    icon: <TodayIcon />,
+  },
+  {
     match: 'attribute',
     name: t('sharedComputedAttributes'),
     href: '/settings/attributes',