# This is a combination of 30 commits.

# This is the 1st commit message:

Close socket on logout (fix #896)

# This is the commit message #2:

Fix lint

# This is the commit message #3:

Add calendar menu

# This is the commit message #4:

Add calendar file upload

# This is the commit message #5:

Disable icon tinting in Firefox

# This is the commit message #6:

Move ignition icon

# This is the commit message #7:

Specify icon sizes

# This is the commit message #8:

Fix lint issues

# This is the commit message #9:

Add accuracy button

# This is the commit message #10:

Merge shock and vibration alarms

# This is the commit message #11:

Add events alarm column

# This is the commit message #12:

Enable LocationIQ by default

# This is the commit message #13:

Update LocationIQ keys

# This is the commit message #14:

Fix selector style

# This is the commit message #15:

Support server change

# This is the commit message #16:

Update localization script

# This is the commit message #17:

Update localization

# This is the commit message #18:

Command to install dependency

# This is the commit message #19:

Update JavaScript libraries

# This is the commit message #20:

Fix modern app issues

# This is the commit message #21:

Fix image URL

# This is the commit message #22:

Fix user list (fix #898)

# This is the commit message #23:

Fix formatting issue

# This is the commit message #24:

Add option to disable reports

# This is the commit message #25:

Fix add button position

# This is the commit message #26:

Select device based on uniqueId

# This is the commit message #27:

Update devices list search

# This is the commit message #28:

Fix lint problems

# This is the commit message #29:

Changed devices list search

# This is the commit message #30:

Changed device list search

3 files changed, 152 insertions, 0 deletions

diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js
new file mode 100644
index 00000000..60d4ef76
--- /dev/null
+++ b/modern/src/settings/CalendarPage.js
@@ -0,0 +1,82 @@
+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 { DropzoneArea } from 'material-ui-dropzone';
+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();
+
+  const handleFiles = (files) => {
+    if (files.length > 0) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const { result } = event.target;
+        setItem({ ...item, data: result.substr(result.indexOf(',') + 1) });
+      };
+      reader.readAsDataURL(files[0]);
+    } else {
+      setItem({ ...item, data: null });
+    }
+  };
+
+  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"
+              />
+              <DropzoneArea
+                filesLimit={1}
+                onChange={handleFiles}
+              />
+            </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',