ish-ui 1.0.2

package/src/themes/ishTheme.ts

@@ -0,0 +1,401 @@
+/*
+ * Copyright ish group pty ltd 2022.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+import { createTheme } from '@mui/material/styles';
+import { Components } from '@mui/material/styles/components';
+import { PaletteMode } from '@mui/material';
+import { theme } from './appTheme';
+import {
+  AppTheme,
+  DarkThemeKey,
+  DefaultThemeKey,
+  HighcontrastThemeKey,
+  MonochromeThemeKey,
+  ThemeValues
+} from '@src/model';
+
+const createOverrides = (palette):{ components: Components } => ({
+  components: {
+    MuiButtonBase: {
+      styleOverrides: {
+        root: {
+          userSelect: 'auto',
+        }
+      }
+    },
+    MuiCollapse: {
+      styleOverrides: {
+        entered: {
+          height: 'auto',
+          overflow: 'visible'
+        }
+      }
+    },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          maxWidth: '100%',
+        }
+      }
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        label: {
+          fontSize: '14px',
+          '&$disabled': {
+            color: 'unset'
+          }
+        },
+        disabled: {}
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
+        underline: {
+          '&:before': {
+            borderBottom: '1px solid transparent',
+          },
+          '&:hover:not(.Mui-disabled):not(.primaryContarstUnderline):before': {
+            borderBottom: `1px solid ${palette.primary.main}`
+          },
+          '&.primaryContarstUnderline:hover:not(.Mui-disabled):before': {
+            borderBottom: `1px solid ${palette.primary.contrastText}`
+          }
+        }
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        shrink: {
+          '& .inputAdornmentIcon': {
+            transform: 'scale(1.25)'
+          }
+        }
+      }
+    },
+    MuiSelect: {
+      styleOverrides: {
+        select: {
+          '&:focus': {
+            backgroundColor: 'none',
+          },
+        },
+      }
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          lineHeight: 1.2,
+          whiteSpace: 'nowrap'
+        },
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          maxWidth: '100%',
+          width: '100%',
+          MuiInput: {
+            root: {
+              '&:before': {
+                borderBottom: '1px solid transparent',
+              },
+              '&:hover:not(.Mui-disabled):not(.primaryContarstUnderline):before': {
+                borderBottom: `1px solid ${palette.primary.main}`
+              },
+              '&.primaryContarstUnderline:hover:not(.Mui-disabled):before': {
+                borderBottom: `1px solid ${palette.primary.contrastText}`
+              }
+            },
+          },
+        },
+        input: {
+          '&.Mui-disabled': {
+            fontWeight: 300,
+            WebkitTextFillColor: 'inherit'
+          },
+          '&::placeholder': {
+            opacity: 0.15
+          },
+          textOverflow: 'ellipsis',
+          color: palette.text.primaryEditable,
+          fontWeight: 400,
+          '&:hover:not(.Mui-disabled):not(&:focus):not(.primaryContarstHover)': {
+            color: palette.primary.main,
+            MuiSelect: {
+              icon: {
+                color: palette.primary.main,
+              },
+            },
+          },
+        },
+        inputMultiline: {
+          lineHeight: '1.5em'
+        }
+      }
+    },
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          fontFeatureSettings:
+            '"dlig" 0, "numr" 0, "dnom" 0, "tnum" 0, "case" 0, "zero" 0, "frac" 0, '
+            + '"sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01" 0, "ss02" 0, "ss03" 0, '
+            + '"cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv08", "cv09", '
+            + '"cv10", "cv11", "calt", "liga", "kern"',
+          fontSize: '0.875rem'
+        }
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+          '@media (min-width: 600px)': {
+            minHeight: '36px'
+          }
+        }
+      }
+    },
+    MuiTableSortLabel: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            color: palette.text.primary
+          },
+          '&$active': {
+            color: palette.text.primary
+          }
+        },
+        active: {},
+        icon: {
+          fontSize: '18px'
+        }
+      }
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        inputRoot: {
+          flexWrap: 'inherit',
+        }
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0
+        }
+      }
+    }
+  }
+});
+
+const commonTypography = {
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 600,
+    body2: {
+      fontWeight: 300
+    },
+    body1: {
+      fontWeight: 300
+    },
+    caption: {
+      fontWeight: 300
+    }
+  }
+};
+
+// Default Theme
+
+const defaultThemePalette = {
+  primary: {
+    main: '#f7941d',
+    contrastText: '#fff'
+  },
+  background: {
+    default: '#fbf9f0'
+  },
+  secondary: {
+    main: '#4b6390'
+  },
+  text: {
+    secondary: 'rgba(0, 0, 0, 0.54)',
+    primary: 'rgba(0, 0, 0, 0.87)',
+    primaryEditable: 'rgba(0, 0, 0, 0.95)',
+    disabled: 'rgba(34, 34, 34, 0.38)',
+    hint: 'rgba(34, 34, 34, 0.38)',
+    grey: '#434343',
+  }
+};
+
+export const defaultTheme = createTheme({
+  palette: defaultThemePalette,
+  ...commonTypography,
+  ...theme.default,
+  ...createOverrides(defaultThemePalette)
+}) as AppTheme;
+
+// Dark Theme
+const darkThemePalette = {
+  mode: 'dark' as PaletteMode,
+  common: { black: '#000', white: '#fff' },
+  primary: {
+    main: '#f7941d',
+    dark: 'rgba(255, 143, 0, 1)',
+    contrastText: 'rgba(255, 255, 255, 1)'
+  },
+  background: {
+    default: '#1b1b1b',
+    paper: '#313131'
+  },
+  secondary: {
+    light: 'rgba(75, 99, 144, 1)',
+    main: '#9bbeff',
+    dark: 'rgba(75, 99, 144, 1)',
+    contrastText: '#fff'
+  },
+  error: {
+    light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
+  },
+  text: {
+    primary: 'rgba(255, 255, 255, 0.87)',
+    primaryEditable: 'rgba(255, 255, 255, 0.95)',
+    secondary: 'rgba(255, 255, 255, 0.65)',
+    disabled: 'rgba(255, 255, 255, 0.38)',
+    hint: 'rgba(255, 255, 255, 0.38)',
+    grey: 'rgba(255, 255, 255, 0.65)',
+  }
+};
+
+export const darkTheme = createTheme({
+  palette: darkThemePalette,
+  ...commonTypography,
+  ...theme.dark,
+  ...createOverrides(darkThemePalette)
+}) as AppTheme;
+
+// Monochrome Theme
+
+const monochromeThemePalette = {
+  mode: 'light' as PaletteMode,
+  common: { black: '#000', white: '#fff' },
+  primary: {
+    main: '#111111',
+    dark: '#76838f',
+    contrastText: '#fff'
+  },
+  secondary: {
+    light: '#9bbeff',
+    main: '#111111',
+    dark: '#111111',
+    contrastText: '#fff'
+  },
+  error: {
+    light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
+  },
+  text: {
+    primary: '#222222',
+    primaryEditable: '#181818',
+    secondary: 'rgba(34, 34, 34, 0.54)',
+    disabled: 'rgba(34, 34, 34, 0.38)',
+    hint: 'rgba(34, 34, 34, 0.38)',
+    grey: '#434343',
+  }
+};
+
+export const monochromeTheme = createTheme({
+  palette: monochromeThemePalette,
+  ...commonTypography,
+  ...theme.monochrome,
+  ...createOverrides(monochromeThemePalette)
+}) as AppTheme;
+
+// High Contrast Theme
+
+const highcontrastThemePalette = {
+  common: { black: '#111111', white: '#fff' },
+  primary: {
+    main: '#111111',
+    dark: '#76838f',
+    contrastText: '#fff'
+  },
+  secondary: {
+    light: '#9bbeff',
+    main: '#111111',
+    dark: '#111111',
+    contrastText: '#fff'
+  },
+  background: {
+    default: '#f2f2f2'
+  },
+  error: {
+    light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
+  },
+  text: {
+    primary: '#111111',
+    primaryEditable: '#070707',
+    secondary: '#111111',
+    disabled: 'rgba(34, 34, 34, 0.38)',
+    hint: 'rgba(34, 34, 34, 0.38)',
+    grey: '#434343',
+  },
+  action: {
+    selected: 'rgba(0, 0, 0, 0.3)'
+  },
+  divider: 'rgba(0, 0, 0, 0.40)'
+};
+
+export const highcontrastTheme = createTheme({
+  palette: highcontrastThemePalette,
+  ...commonTypography,
+  ...theme.highcontrast,
+  ...createOverrides(highcontrastThemePalette)
+}) as AppTheme;
+
+export const currentTheme = (themeName: ThemeValues): AppTheme => {
+  switch (themeName) {
+    case DarkThemeKey: {
+      return darkTheme;
+    }
+    case DefaultThemeKey: {
+      return defaultTheme;
+    }
+    case MonochromeThemeKey: {
+      return monochromeTheme;
+    }
+    case HighcontrastThemeKey: {
+      return highcontrastTheme;
+    }
+    default: {
+      return defaultTheme;
+    }
+  }
+};
+
+export const getTheme = (): AppTheme => {
+  let actualTheme = defaultTheme;
+
+  try {
+    const storageThemeName = localStorage.getItem('theme') as ThemeValues;
+    if (storageThemeName) {
+      actualTheme = currentTheme(storageThemeName);
+    }
+  } catch (e) {
+    console.error(e);
+    return actualTheme;
+  }
+
+  return actualTheme;
+};
+
+export const useAppTheme = (): AppTheme => ({
+  ...getTheme()
+});

package/src/timetable/datePeriodFilter/DayPeriodIcons.tsx

@@ -0,0 +1,95 @@
+{
+  /* tslint:disable:max-line-length */
+}
+import React from "react";
+
+interface IconProps {
+  className?: string;
+}
+
+export const MorningIcon: React.FunctionComponent<IconProps> = ({ className }) => (
+  <svg className={className} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9 3C9 2.44772 9.44772 2 10 2C10.5523 2 11 2.44772 11 3V4C11 4.55228 10.5523 5 10 5C9.44772 5 9 4.55228 9 4V3Z"
+      fill="black"
+    />
+    <path
+      d="M16.3638 7.05022C15.9733 7.44074 15.3402 7.44074 14.9496 7.05022C14.5591 6.65969 14.5591 6.02653 14.9496 5.636L15.6567 4.9289C16.0473 4.53837 16.6804 4.53837 17.071 4.9289C17.4615 5.31942 17.4615 5.95259 17.071 6.34311L16.3638 7.05022Z"
+      fill="black"
+    />
+    <path
+      d="M5.04997 5.63603C5.4405 6.02656 5.4405 6.65972 5.04997 7.05025C4.65945 7.44077 4.02628 7.44077 3.63576 7.05025L2.92865 6.34314C2.53813 5.95262 2.53813 5.31945 2.92865 4.92893C3.31918 4.5384 3.95234 4.5384 4.34287 4.92893L5.04997 5.63603Z"
+      fill="black"
+    />
+    <path
+      d="M12.8356 11.0181C13.0163 11.54 13.4477 12 14 12C14.5523 12 15.0104 11.5478 14.9013 11.0064C14.4405 8.72096 12.4212 7 9.99999 7C7.57878 7 5.55952 8.72096 5.09872 11.0064C4.98956 11.5478 5.44771 12 5.99999 12C6.55228 12 6.98368 11.54 7.16437 11.0181C7.57105 9.84347 8.68702 9 9.99999 9C11.313 9 12.4289 9.84347 12.8356 11.0181Z"
+      fill="black"
+    />
+    <path
+      d="M0 15C0 14.4477 0.447715 14 1 14H19C19.5523 14 20 14.4477 20 15C20 15.5523 19.5523 16 19 16H1C0.447716 16 0 15.5523 0 15Z"
+      fill="black"
+    />
+  </svg>
+);
+
+export const AfternoonIcon: React.FunctionComponent<IconProps> = ({ className }) => (
+  <svg className={className} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0)">
+      <path
+        d="M9 1C9 0.447715 9.44772 0 10 0C10.5523 0 11 0.447715 11 1V2C11 2.55228 10.5523 3 10 3C9.44772 3 9 2.55228 9 2V1Z"
+        fill="black"
+      />
+      <path
+        d="M9 18C9 17.4477 9.44772 17 10 17C10.5523 17 11 17.4477 11 18V19C11 19.5523 10.5523 20 10 20C9.44772 20 9 19.5523 9 19V18Z"
+        fill="black"
+      />
+      <path
+        d="M1 11C0.447715 11 2.41411e-08 10.5523 0 10C-2.41411e-08 9.44772 0.447715 9 1 9H2C2.55228 9 3 9.44772 3 10C3 10.5523 2.55228 11 2 11H1Z"
+        fill="black"
+      />
+      <path
+        d="M18 11C17.4477 11 17 10.5523 17 10C17 9.44772 17.4477 9 18 9H19C19.5523 9 20 9.44772 20 10C20 10.5523 19.5523 11 19 11H18Z"
+        fill="black"
+      />
+      <path
+        d="M4.34309 17.0711C3.95257 17.4616 3.3194 17.4616 2.92888 17.0711C2.53836 16.6806 2.53836 16.0474 2.92888 15.6569L3.63599 14.9498C4.02651 14.5592 4.65968 14.5592 5.0502 14.9498C5.44072 15.3403 5.44072 15.9735 5.0502 16.364L4.34309 17.0711Z"
+        fill="black"
+      />
+      <path
+        d="M16.3638 5.05022C15.9733 5.44074 15.3402 5.44074 14.9496 5.05022C14.5591 4.65969 14.5591 4.02653 14.9496 3.636L15.6567 2.9289C16.0473 2.53837 16.6804 2.53837 17.071 2.9289C17.4615 3.31942 17.4615 3.95259 17.071 4.34311L16.3638 5.05022Z"
+        fill="black"
+      />
+      <path
+        d="M17.071 15.6568C17.4615 16.0473 17.4615 16.6805 17.071 17.071C16.6804 17.4615 16.0473 17.4615 15.6568 17.071L14.9496 16.3639C14.5591 15.9734 14.5591 15.3402 14.9496 14.9497C15.3402 14.5592 15.9733 14.5592 16.3639 14.9497L17.071 15.6568Z"
+        fill="black"
+      />
+      <path
+        d="M5.04997 3.63603C5.4405 4.02656 5.4405 4.65972 5.04997 5.05025C4.65945 5.44077 4.02628 5.44077 3.63576 5.05025L2.92865 4.34314C2.53813 3.95262 2.53813 3.31945 2.92865 2.92893C3.31918 2.5384 3.95234 2.5384 4.34287 2.92893L5.04997 3.63603Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 13C11.6569 13 13 11.6569 13 10C13 8.34315 11.6569 7 10 7C8.34315 7 7 8.34315 7 10C7 11.6569 8.34315 13 10 13Z"
+        fill="black"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const EveningIcon: React.FunctionComponent<IconProps> = ({ className }) => (
+  <svg className={className} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="20" height="20" fill="none" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.38031 2.16405C8.28754 2.18313 8.19536 2.20381 8.10379 2.22606C4.6008 3.07753 2 6.23504 2 10C2 14.4183 5.58172 18 10 18C13.765 18 16.9225 15.3992 17.7739 11.8962C17.7962 11.8046 17.8169 11.7125 17.8359 11.6197C17.9102 11.2587 17.9601 10.8887 17.9839 10.5117C17.9946 10.3425 18 10.1719 18 10C18 9.65868 17.5651 9.52223 17.3093 9.74823C17.2098 9.83613 17.1068 9.92014 17.0005 10C16.7187 10.2117 16.4139 10.3943 16.0904 10.5434C16.0508 10.5616 16.0109 10.5794 15.9707 10.5966C15.366 10.8562 14.6998 11 14 11C11.2386 11 9 8.76142 9 6C9 5.30021 9.14376 4.634 9.40336 4.02929C9.4206 3.98912 9.43836 3.94922 9.45662 3.9096C9.6057 3.58611 9.78831 3.28127 10 2.99951C10.0799 2.89321 10.1639 2.7902 10.2518 2.69071C10.4778 2.43493 10.3413 2 10 2C9.8281 2 9.65747 2.00542 9.48826 2.0161C9.11126 2.0399 8.74135 2.08982 8.38031 2.16405ZM7.11363 4.73861C7.039 5.14795 7 5.56956 7 6C7 9.86599 10.134 13 14 13C14.4304 13 14.8521 12.961 15.2614 12.8864C14.2411 14.7423 12.2674 16 10 16C6.68629 16 4 13.3137 4 10C4 7.73257 5.25775 5.7589 7.11363 4.73861Z"
+      fill="black"
+    />
+  </svg>
+);

package/src/timetable/datePeriodFilter/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+
+export * from './DayPeriodIcons';

package/src/timetable/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+
+export * from './datePeriodFilter';
+export * from './miniCalendar';

package/src/timetable/miniCalendar/CalendarDay.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+import React, { useMemo } from 'react';
+import { Button } from '@mui/material';
+import { isSameDay } from 'date-fns';
+import clsx from 'clsx';
+import { alpha } from '@mui/material/styles';
+import { makeAppStyles } from '@src/styles';
+import { useAppTheme } from '@src/themes';
+
+
+interface Props {
+  day: number;
+  isToday?: boolean;
+  today?: any;
+  date: Date;
+  status: string;
+  selectedMonthSessionDays: number[];
+  disabled: boolean;
+  theme?: any;
+  targetDay?: any;
+  setTargetDay?: any;
+}
+
+const useStyles = makeAppStyles(theme => ({
+  root: {
+    padding: 0,
+    border: '2px solid transparent',
+    borderRadius: 4,
+    minWidth: 'initial',
+    boxShadow: 'none',
+    fontWeight: 'normal',
+    color: theme.palette.text.primary,
+    '&:active': {
+      boxShadow: 'none'
+    },
+    '&:focus': {
+      boxShadow: 'none'
+    },
+    '&::after': {
+      content: '\'\'',
+      position: 'absolute',
+      width: 4,
+      height: 4,
+      top: 4,
+      borderRadius: '100%'
+    },
+    '&$same': {
+      border: `2px solid ${theme.palette.text.primary}`
+    }
+  },
+  same: {}
+}));
+
+const CalendarDay = React.memo((props: Props) => {
+  const {
+   day, status, date, disabled, targetDay, setTargetDay, selectedMonthSessionDays
+  } = props;
+
+  const classes = useStyles();
+
+  const theme = useAppTheme();
+  const isSame = isSameDay(targetDay, date);
+  const isToday = isSameDay(new Date(), date);
+  
+  const style = useMemo(() => {
+    let result;
+
+    const dayIndexValue = selectedMonthSessionDays[day - 1];
+    
+    if (selectedMonthSessionDays.length && status === 'current' && dayIndexValue !== 0) {
+      const backgroundColor = alpha(theme.palette.primary.main, dayIndexValue);
+
+      result = {
+        ...result || {},
+        backgroundColor,
+        color: theme.palette.getContrastText(backgroundColor)
+      };
+    }
+    
+    if (isToday) {
+      result = {
+        ...result || {},
+        fontWeight: '900'
+      };
+    }
+    
+    return result;
+  }, [isToday, status, selectedMonthSessionDays, day, theme]);
+
+  return (
+    <Button
+      className={clsx(classes.root, isSame && classes.same)}
+      onClick={() => setTargetDay(date)}
+      disabled={disabled}
+      style={style}
+    >
+      {day}
+    </Button>
+  );
+});
+
+export default CalendarDay;

package/src/timetable/miniCalendar/CalendarHeader.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { IconButton, Typography } from "@mui/material";
+import { createStyles, withStyles } from "@mui/styles";
+import { KeyboardArrowLeft, KeyboardArrowRight } from "@mui/icons-material";
+
+interface Props {
+  month: string;
+  year: number;
+  previousMonth: () => void;
+  nextMonth: () => void;
+  classes?: any;
+}
+
+const styles = createStyles(theme => ({
+  root: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: theme.spacing(0, 1)
+  }
+}));
+
+const CalendarHeader = ({ classes, month, year, previousMonth, nextMonth }: Props) => (
+  <div className={classes.root}>
+    <IconButton onClick={previousMonth}>
+      <KeyboardArrowLeft />
+    </IconButton>
+    <Typography align="center">
+      {month} {year}
+    </Typography>
+    <IconButton onClick={nextMonth}>
+      <KeyboardArrowRight />
+    </IconButton>
+  </div>
+);
+
+export default withStyles(styles)(CalendarHeader);

package/src/timetable/miniCalendar/CalendarWeekPanel.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { createStyles, withStyles } from "@mui/styles";
+import WeekDay from "./WeekDay";
+
+interface Props {
+  classes?: any;
+  switchWeekDays: (dayId: number) => void;
+  selectedWeekDays: boolean[];
+}
+
+const styles = theme =>
+  createStyles({
+    root: {
+      display: "grid",
+      gridTemplateColumns: `repeat(7, ${theme.spacing(4)})`,
+      gridColumnGap: 1,
+      padding: theme.spacing(0, 1),
+      marginBottom: theme.spacing(1),
+      justifyContent: "center"
+    }
+  });
+
+const week = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+const CalendarWeekPanel = ({ classes, switchWeekDays, selectedWeekDays }: Props) => {
+  return (
+    <div className={classes.root}>
+      {week.map((el, id) => (
+        <WeekDay key={id} id={id} name={el} selected={selectedWeekDays[id]} click={switchWeekDays} />
+      ))}
+    </div>
+  );
+};
+
+export default withStyles(styles)(CalendarWeekPanel);